marc/karnov.club
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Ajaxing the form.

Browse source
This commit is contained in:
Marc 2015-12-24 20:10:57 -05:00
parent d2724a1f97
commit d504440371
2 changed files with 26 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
index.html
View file

@ -86,18 +86,17 @@
<p class="primarytext basesize">You can also send me an <span class="accent accentsize oswald">email</span> at <a href="mailto:c.marcandre@gmail.com">c.marcandre[at]gmail.com</a>, or fill the form below!</p> <p class="primarytext basesize">You can also send me an <span class="accent accentsize oswald">email</span> at <a href="mailto:c.marcandre@gmail.com">c.marcandre[at]gmail.com</a>, or fill the form below!</p>
<form id="contactme" action="http://formspree.io/c.marcandre@gmail.com" method="POST"> <form id="contactme">
<p class="accentsize accent oswald">About you:</p> <p class="accentsize accent oswald">About you:</p>
<p class="basesize">My name is <input name="name" type="text" class="accent" placeholder="Johnny Appleseed"required>, I'm a <input nform="contactme" name="function" type="text" class="accent" placeholder="fellow tinkerer">. You can contact me at <input form="contactme" name="_replyto" type="text" class="accent" placeholder="foo@bar.baz" required>.</p> <p class="basesize">My name is <input id="sender" type="text" class="accent" placeholder="Johnny Appleseed"required>, I'm a <input id="function" type="text" class="accent" placeholder="fellow tinkerer">. You can contact me at <input id="replyto" type="email" class="accent" placeholder="foo@bar.baz" required>.</p>
<p class="basesize">I'd like to tell you about ...</p> <p class="basesize">I'd like to tell you about ...</p>
<p class="basesize"><textarea form="contactme" name="details" class="accent" placeholder="... this new cool thing I'm working on." required></textarea></p> <p class="basesize"><textarea id="details" class="accent" placeholder="... this new cool thing I'm working on." required></textarea></p>
<div class="ta-center"> <div class="ta-center">
<input type="submit" name="sbt" value="Send message"> <input type="submit" value="Send message">
</div> </div>
<input form="contactme" type="hidden" name="_subject" value="Contact form submission" /> <input form="contactme" type="hidden" name="_subject" value="Contact form submission" />
<input form="contactme" type="text" name="_gotcha" style="display:none" /> <input form="contactme" type="text" name="_gotcha" style="display:none" />
<input form="contactme" type="hidden" name="_next" value="#panel-intouch" />
</form> </form>

22
js/form-handling.js Normal file
View file

@ -0,0 +1,22 @@
var $contactForm = $('#contactme');
$contactForm.submit(function(e) {
e.preventDefault();
$.ajax({
url: '//formspree.io/c.marcandre@gmail.com',
method: 'POST',
data: $(this).serialize(),
dataType: 'json',
beforeSend: function() {
$contactForm.append('<div class="alert alert--loading">Sending message…</div>');
},
success: function(data) {
$contactForm.find('.alert--loading').hide();
$contactForm.append('<div class="alert alert--success">Message sent!</div>');
},
error: function(err) {
$contactForm.find('.alert--loading').hide();
$contactForm.append('<div class="alert alert--error">Ops, there was an error.</div>');
}
});
});