Skip to content

Instantly share code, notes, and snippets.

@aaliyan111
Forked from callaginn/ajax-contact-form.js
Created October 9, 2023 11:06
Show Gist options
  • Save aaliyan111/2b44ef948b950f5a6933f22e0a439926 to your computer and use it in GitHub Desktop.
Save aaliyan111/2b44ef948b950f5a6933f22e0a439926 to your computer and use it in GitHub Desktop.
Shopify Ajax Contact Form
// 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.
// 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;
}, {});
}
// Get Shopify Friendly URL String
function getUrlString(data) {
var urlParameters = Object.entries(data).map(function (e) {
return e.join('=');
}).join('&');
return urlParameters;
}
function getUrlParameter(sParam) {
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : sParameterName[1];
}
}
}
function ajaxFormInit(form) {
var form_type = form.querySelector("[name=form_type]").value,
inputs = form.querySelectorAll("[name]"),
alert = form.querySelector('[data-alert="status"]'),
alert_msgs = form.querySelector('.form-alerts');
form.addEventListener('submit', function(e){
e.preventDefault();
var action = form.getAttribute("action");
if (alert_msgs) {
var alert_msg = JSON.parse(alert_msgs.innerHTML)
}
console.log("Form Action: " + action);
console.log("Submitting " + form_type + " form...");
fetch(action, {
method: 'POST',
body: getUrlString(formToJSON(inputs)),
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
'Accept': 'text/html, */*; q=0.01',
'X-Requested-With': 'XMLHttpRequest'
}
}).then(function(response) {
console.log(response);
console.log(response.status);
if (alert) {
alert.className = "alert alert-success";
alert.innerHTML = alert_msg.success;
}
var checkoutUrl = getUrlParameter("checkout_url");
if (checkoutUrl) {
window.location = getUrlParameter("checkout_url");
} else if (response.status === 200 && form_type !== "contact") {
window.location.pathname = "/account"
}
}).catch(function(err) {
console.error(err);
if (alert) {
alert.className = "alert alert-error";
alert.innerHTML = alert_msg.error;
}
});
});
}
// Init Shopify Forms
document.querySelectorAll("[name=form_type]").forEach(function(el) {
ajaxFormInit(el.closest("form"));
});
{% comment %}
Contact Form Wide
{% endcomment %}
{%- form 'contact' -%}
<div class="row">
<div class="col-md-4 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="col-md-4 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="col-md-4 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>
<div class="mb-3">
<label for="message">{{ 'contact.form.message' | t }}</label>
<textarea id="message" 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>
<script type="application/json" class="form-alerts">
{
"error": "{{ 'general.forms.post_error' | t }}",
"success": "{{ 'contact.form.post_success' | t }}"
}
</script>
<div class="d-none" data-alert="status"></div>
<button type="button" class="btn btn-lg btn-outline-primary btn-submit disabled" disabled>{{ 'contact.form.send' | t }}</button>
{%- endform -%}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment