Shopify Ajax Contact Form

ajax-contact-form.js

// Before implementing this, you'll need to contact Shopify support and ask them to turn off Google's ReCaptcha
// for your Shopify store's contact forms. Otherwise, it will redirect to the captcha's verification page.
// I'd recommend replacing it with a custom solution like this: https://captcha.cremadesignstudio.com/

// Retrieves input data from a form and returns it as a JSON object:
function formToJSON(elements) {
	return [].reduce.call(elements, function (data, element) {
		data[element.name] = element.value;
		return data;
	}, {});
}

function getUrlString(data) {
	var urlParameters = Object.entries(data).map(function (e) {
		return e.join('=');
	}).join('&');

	return urlParameters;
}

function initForm(selector) {
	selector = selector || '.contact-form';

	document.querySelectorAll(selector).forEach(function(form) {
		var action = form.getAttribute("data-action"),
			alert = form.querySelector('[data-alert="status"]'),
			inputs = form.querySelectorAll("[name]"),
			btn = form.querySelector('[type="button"]');

		// Submit data via Fetch
		form.addEventListener('submit', function(e){
			e.preventDefault();

			fetch(action, {
				method: 'POST',
				headers: {
					"Content-Type": "application/x-www-form-urlencoded",
					"Accept": "application/json"
				},
				body: getUrlString(formToJSON(inputs))
			}).then(function(response) {
				console.log(response);
				console.log("Response Status: " + response.status);
				alert.className = "alert alert-success";
				alert.innerHTML = "Thank you for contacting us. We will be in touch.";
			}).catch(function(error) {
				console.log(error);
				console.log("Response Status: " + response.status);
				alert.className = "alert alert-danger";
				alert.innerHTML = "We had an issue receiving your form. Please try again later.";
			});
		});
	});
}

initForm();

form-contact.liquid

{% comment %}
    Contact Form
{% endcomment %}

{% capture contactForm %}
	{% form 'contact' %}
	    {% if form.posted_successfully? %}
	        <p class="success-msg">{{ 'contact.form.post_success' | t }}</p>
	    {% endif %}

	    {% include 'form-errors-custom' %}

	    <div class="mb-3">
	        <label for="name">{{ 'contact.form.name' | t }} <i class="fa fa-asterisk"></i></label>
	        <input type="text" class="form-control" name="contact[name]" autocomplete="name" required>
	    </div>

	    <div class="mb-3">
	        <label for="email">{{ 'contact.form.email' | t }} <i class="fa fa-asterisk"></i></label>
	        <input type="email" class="form-control" name="contact[email]" autocomplete="email" required>
	    </div>

		<div class="mb-3">
	        <label for="phone">{{ 'contact.form.phone' | t }} <i class="fa fa-asterisk"></i></label>
	        <input type="tel" class="form-control" name="contact[phone]" autocomplete="tel" required>
	    </div>

	    <div class="mb-3">
	        <label for="message">{{ 'contact.form.message' | t }}</label>
	        <textarea class="form-control" name="contact[body]" rows="7"></textarea>
	    </div>

		<!-- 2019 Honeypot / Checkbox Placeholder -->
		<div class="checkbox captcha"><input type="text" class="honeypot" autocomplete="off" style="display:none;"></div>

		<div class="d-none" data-alert="status"></div>

	    <div class="form-footer">
			<button type="button" class="btn btn-lg btn-outline-primary btn-submit">{{ 'contact.form.send' | t }}</button>
	    </div>
	{% endform %}
{% endcapture %}

{{ contactForm | replace: 'action=', 'data-action=' | replace: 'id=', 'data-id=' }}