add contact form
This commit is contained in:
		
							parent
							
								
									d8e54c179d
								
							
						
					
					
						commit
						4b44632f2e
					
				| @ -67,20 +67,52 @@ TCP | |||||||
|   # Run ssh with (your domain, no port): |   # Run ssh with (your domain, no port): | ||||||
|   ssh lucky-duck-42.telebit.cloud</code></pre> |   ssh lucky-duck-42.telebit.cloud</code></pre> | ||||||
| 
 | 
 | ||||||
|     <center> |  | ||||||
|       <p><footer> |       <p><footer> | ||||||
|         <h3> |         <h3> | ||||||
|           <li><a href="https://git.coolaj86.com/coolaj86/telebit.js" target="_blank">Read the Telebit docs</a></li> |           <li><a href="https://git.coolaj86.com/coolaj86/telebit.js" target="_blank">Read the Telebit docs</a></li> | ||||||
|           <li><a href="https://git.coolaj86.com/coolaj86/telebitd.js" target="_blank">Host your own Telebit Relay</a></li> |           <li><a href="https://git.coolaj86.com/coolaj86/telebitd.js" target="_blank">Host your own Telebit Relay</a></li> | ||||||
|         </h3> |         </h3> | ||||||
| 
 | 
 | ||||||
|  | 
 | ||||||
|  | 				<div class="alert alert-info js-list-thanks hidden" hidden>Thanks! We'll be in touch.</div> | ||||||
|  | 				<div id="next"> | ||||||
|  | 					<br> | ||||||
|  | 					<br> | ||||||
|  | 				</div> | ||||||
|  | 				<form class="js-list-form"> | ||||||
|  | 					<div class="alert alert-info"> | ||||||
|  | 						<h2>Want to follow our progress?</h2> | ||||||
|  | 						<div class="form-group"> | ||||||
|  | 							<label>Your name</label> | ||||||
|  | 							<input class="js-list-comment form-control" placeholder="ex: John Doe" /> | ||||||
|  |               <br> | ||||||
|  | 							<small class="form-text text-muted">(optional, so we know what to call you other than <em>rubybelle99@gmail.com</em> or whatever...)</small> | ||||||
|  | 						</div> | ||||||
|  |             <br> | ||||||
|  | 						<div class="form-group"> | ||||||
|  | 							<label>Your email</label> | ||||||
|  | 							<input class="js-list-address form-control" type="email" placeholder="ex: john@email.com" /> | ||||||
|  |               <br> | ||||||
|  | 							<small class="form-text text-muted">(non-optional, otherwise this doesn't even make any sense)</small> | ||||||
|  | 						</div> | ||||||
|  |             <br> | ||||||
|  | 						<div class="form-group"> | ||||||
|  | 							<button class="js-list-submit btn btn-primary form-control" type="button">Join us!</button> | ||||||
|  | 						</div> | ||||||
|  | 					</div> | ||||||
|  | 				</form> | ||||||
|  | 
 | ||||||
|  | 				<br> | ||||||
|  | 				<br> | ||||||
|  | 
 | ||||||
|  | 				<center> | ||||||
| 					<li>©2018 AJ ONeal</li> | 					<li>©2018 AJ ONeal</li> | ||||||
| 					<li><a href="https://git.coolaj86.com/coolaj86/telebit.js" target="_blank">git</a></li> | 					<li><a href="https://git.coolaj86.com/coolaj86/telebit.js" target="_blank">git</a></li> | ||||||
| 					<li><a href="/legal/" target="_blank">License</a></li> | 					<li><a href="/legal/" target="_blank">License</a></li> | ||||||
| 					<li><a href="/legal/" target="_blank">Terms</a></li> | 					<li><a href="/legal/" target="_blank">Terms</a></li> | ||||||
| 					<li><a href="/legal/" target="_blank">Privacy</a></li> | 					<li><a href="/legal/" target="_blank">Privacy</a></li> | ||||||
|       </footer></p> |  | ||||||
| 				</center> | 				</center> | ||||||
|  |       </footer></p> | ||||||
| 
 | 
 | ||||||
|     </div> |     </div> | ||||||
| 
 | 
 | ||||||
|  | |||||||
| @ -3,4 +3,61 @@ | |||||||
| 
 | 
 | ||||||
| document.body.hidden = false; | document.body.hidden = false; | ||||||
| 
 | 
 | ||||||
|  | function formSubmit() { | ||||||
|  |   var msg = { | ||||||
|  |     address: document.querySelector('.js-list-address').value | ||||||
|  |   , comment: 'telebit.cloud: ' + (document.querySelector('.js-list-comment').value || '') | ||||||
|  |   }; | ||||||
|  | 
 | ||||||
|  |   window.fetch('https://api.ppl.family/api/ppl.family/public/list', { | ||||||
|  |     method: 'POST' | ||||||
|  |   , cors: true | ||||||
|  |   , headers: new Headers({ 'Content-Type': 'application/json' }) | ||||||
|  |   , body: JSON.stringify(msg) | ||||||
|  |   }).then(function (resp) { | ||||||
|  |     return resp.json().then(function (data) { | ||||||
|  |       if (data.error) { | ||||||
|  |         window.alert("Couldn't save your message. Email coolaj86@gmail.com instead."); | ||||||
|  |         return; | ||||||
|  |       } | ||||||
|  |       document.querySelector('.js-list-form').hidden = true; | ||||||
|  |       document.querySelector('.js-list-form').className += ' hidden'; | ||||||
|  |       document.querySelector('.js-list-thanks').hidden = false; | ||||||
|  |       document.querySelector('.js-list-thanks').className = document.querySelector('.js-list-thanks').className.replace(/\s*hidden\b/, ''); | ||||||
|  |     }, function () { | ||||||
|  |       window.alert("Couldn't save your message. Email coolaj86@gmail.com instead."); | ||||||
|  |     }); | ||||||
|  |   }, function () { | ||||||
|  |     window.alert("Didn't get your message. Bad network connection? Email coolaj86@gmail.com instead."); | ||||||
|  |   }); | ||||||
|  | } | ||||||
|  | document.body.addEventListener('submit', function (ev) { | ||||||
|  |   if (ev.target.matches('.js-list-form')) { | ||||||
|  |     ev.preventDefault(); | ||||||
|  |     ev.stopPropagation(); | ||||||
|  |     formSubmit(); | ||||||
|  |     return; | ||||||
|  |   } | ||||||
|  | }); | ||||||
|  | document.body.addEventListener('click', function (ev) { | ||||||
|  |   if (ev.target.matches('.js-list-submit')) { | ||||||
|  |     ev.preventDefault(); | ||||||
|  |     ev.stopPropagation(); | ||||||
|  |     formSubmit(); | ||||||
|  |     return; | ||||||
|  |   } | ||||||
|  |   /* | ||||||
|  |   if (ev.target.closest('.js-navbar-toggle')) { | ||||||
|  |     ev.preventDefault(); | ||||||
|  |     ev.stopPropagation(); | ||||||
|  |     if (/show/.test(document.querySelector('.js-navbar-collapse').className)) { | ||||||
|  |       document.querySelector('.js-navbar-collapse').className = document.querySelector('.js-navbar-collapse').className.replace(/\s+show\b/, ''); | ||||||
|  |     } else { | ||||||
|  |       document.querySelector('.js-navbar-collapse').className += ' show'; | ||||||
|  |     } | ||||||
|  |     return; | ||||||
|  |   } | ||||||
|  |   */ | ||||||
|  | }); | ||||||
|  | 
 | ||||||
| }()); | }()); | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user