Created
October 17, 2014 15:37
-
-
Save chrisblakley/fff3ec6c0105a9799252 to your computer and use it in GitHub Desktop.
An AJAX form using Nebula
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery(document).on('submit', '#ajax-contact', function(e){ | |
var contactData = [{ | |
'name': jQuery("#ajax-contact input.name").val(), | |
'email': jQuery("#ajax-contact input.email").val(), | |
'message': jQuery("#ajax-contact textarea.message").val(), | |
}]; | |
jQuery('#form-messages').html('<i class="fa fa-spinner fa-spin sending"></i> Sending...'); | |
jQuery.ajax({ | |
type: "POST", | |
url: jQuery('#ajax-contact').attr('action'), | |
data: { | |
data: contactData, | |
}, | |
success: function(response){ | |
if ( response.indexOf('Thank you') > -1 ) { | |
jQuery('#ajax-contact input:not(#contact-submit), #ajax-contact textarea').val('').trigger('keyup'); | |
jQuery('#ajax-contact').slideUp(); | |
//conversionTracker(); | |
ga('send', 'event', 'Contact', 'Submit', 'AJAX Example Form Submission from ' + contactData[0]['name'] + ': "' + contactData[0]['message'] + '"'); | |
Gumby.log('Sending GA event: ' + 'Contact', 'Submit', 'AJAX Example Submission'); | |
} | |
jQuery('#form-messages').html(response); | |
}, | |
error: function(MLHttpRequest, textStatus, errorThrown){ | |
jQuery('#form-messages').text(errorThrown); | |
ga('send', 'event', 'Contact', 'Error', 'Contact Form AJAX Error'); | |
Gumby.log('Sending GA event: ' + 'Contact', 'Error', 'Contact AJAX Form Error'); | |
}, | |
timeout: 60000 | |
}); | |
e.preventDefault(); | |
return false; | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<form id="ajax-contact" method="post" action="<?php echo get_template_directory_uri(); ?>/includes/mailer.php"> | |
<ul> | |
<li class="field"> | |
<span class="contact-form-heading">Name*</span> | |
<input class="input name" type="text" placeholder="Name" required/> | |
</li> | |
<li class="field"> | |
<span class="contact-form-heading">Email*</span> | |
<input class="input email" type="email" placeholder="Email" required/> | |
</li> | |
<li class="field"> | |
<span class="contact-form-heading">Message*</span> | |
<textarea class="input textarea message" placeholder="Message" required></textarea> | |
</li> | |
<li class="field"> | |
<input class="submit" type="submit" value="Send"> | |
</li> | |
</ul> | |
</form> | |
<div id="form-messages"></div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment