add contact form

This commit is contained in:
AJ ONeal 2018-06-07 08:06:09 +00:00
parent d8e54c179d
commit 4b44632f2e
2 changed files with 96 additions and 7 deletions

View File

@ -67,20 +67,52 @@ TCP
# Run ssh with (your domain, no port):
ssh lucky-duck-42.telebit.cloud</code></pre>
<center>
<p><footer>
<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/telebitd.js" target="_blank">Host your own Telebit Relay</a></li>
</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>&copy;2018 AJ ONeal</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">Terms</a></li>
<li><a href="/legal/" target="_blank">Privacy</a></li>
</footer></p>
</center>
</footer></p>
</div>

View File

@ -3,4 +3,61 @@
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;
}
*/
});
}());