Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
AJAX-based contact form for Craft CMS. More info: http://craftsnippets.com/articles/building-ajax-contact-form-with-craft-cms
<form class="js-contact-form">
<fieldset class="js-contact-form-fieldset">
{{ csrfInput() }}
<div class="field">
{{tag('label', {
for: 'form-email',
class: 'label',
text: 'Your Email'|t('contact-form'),
}) }}
{{tag('input', {
type: 'email',
name: 'fromEmail',
id: 'form-email',
class: 'input',
required: true,
}) }}
</div>
<div class="field">
{{tag('label', {
for: 'form-name',
class: 'label',
text: 'Your Name'|t('contact-form'),
}) }}
{{tag('input', {
type: 'text',
name: 'fromName',
id: 'form-name',
class: 'input',
required: true,
}) }}
</div>
<div class="field">
{{tag('label', {
for: 'form-text',
class: 'label',
text: 'Message'|t('contact-form'),
}) }}
{{tag('textarea', {
type: 'text',
name: 'message[text]',
id: 'form-text',
class: 'input',
required: true,
}) }}
</div>
<div class="field">
<button class="js-contact-form-send button is-primary">
{{'Send'|t('app')}}
</button>
</div>
</fieldset>
</form>
{% js %}
// twig to js
var submit_url = "{{alias('@web')|e('js')}}";
var message_success = "{{'Your message has been sent.'|t('contact-form')}}";
var message_fail = "{{'Message could not be sent!'|t}}";
// html elements
var form_element = document.querySelector('.js-contact-form');
var form_button = form_element.querySelector('.js-contact-form-send')
var fieldset = form_element.querySelector('.js-contact-form-fieldset')
form_element.addEventListener("submit", function(e){
e.preventDefault();
var formData = new FormData(form_element);
formData.append('action', 'contact-form/send');
form_button.classList.add('is-loading');
fieldset.setAttribute('disabled', true);
fetch(submit_url+'/', {
method: 'POST',
body: formData,
headers: {
'Accept': 'application/json',
},
})
.then(response => response.json())
.then(data => {
form_button.classList.remove('is-loading');
fieldset.removeAttribute('disabled');
if(data.success == true){
form_element.reset();
alert(message_success);
}else{
var allErrors = Array();
for ( fieldErrors of Object.values(data.errors)){
var concatedArray = allErrors.concat(fieldErrors);
allErrors = concatedArray;
}
var errorString = allErrors.join(' ');
alert(errorString);
}
})
.catch(err => {
alert(message_fail)
});
});
{% endjs %}
{% js %}
// twig to js
var submit_url = "{{alias('@web')|e('js')}}";
var message_success = "{{'Your message has been sent.'|t('contact-form')}}";
var message_fail = "{{'Message could not be sent!'|t}}";
// html elements
var form_element = $('.js-contact-form');
var form_button = form_element.find('.js-contact-form-send')
var fieldset = form_element.find('.js-contact-form-fieldset')
// ajax request on submit
form_element.submit( function(e){
e.preventDefault()
var formData = new FormData(form_element[0]);
formData.append('action', 'contact-form/send');
$.ajax({
contentType: false,
processData: false,
method: "POST",
url: submit_url+'/',
dataType: "json",
data: formData,
beforeSend: function( ) {
form_button.addClass('is-loading');
fieldset.prop('disabled', true);
},
}).always(function() {
form_button.removeClass('is-loading');
fieldset.prop('disabled', false);
}).done(function( data ) {
if(data.success == true){
form_element[0].reset();
alert(message_success);
}else{
var allErrors = Array();
for ( fieldErrors of Object.values(data.errors)){
var concatedArray = allErrors.concat(fieldErrors);
allErrors = concatedArray;
}
var errorString = allErrors.join(' ');
alert(errorString);
}
}).fail(function( data ) {
alert(message_fail);
});
})
{% endjs %}
@OneMohrTime

This comment has been minimized.

Copy link

@OneMohrTime OneMohrTime commented Aug 6, 2020

This was a HUGE save for me, thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment