- This Shopify Liquid code creates a responsive shopify contact form with an elegant popup thank-you message. It features AJAX submission, schema markup for SEO, and mobile-friendly styling.
- Need help implementing this? Contact a Shopify developer for professional customization and integration services to make it work perfectly for your store.
-- Shopify Schema Code --
{% schema %}
{
"name": "Contact Form with Popup",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Contact Us"
},
{
"type": "richtext",
"id": "description",
"label": "Description",
"default": "<p>Have questions? Fill out the form below and we'll get back to you soon.</p>"
},
{
"type": "text",
"id": "submit_text",
"label": "Submit Button Text",
"default": "Send Message"
},
{
"type": "text",
"id": "success_message",
"label": "Success Message",
"default": "Thanks for contacting us. We'll get back to you soon!"
},
{
"type": "text",
"id": "popup_close_text",
"label": "Popup Close Button Text",
"default": "Close"
}
],
"presets": [
{
"name": "Contact Form with Popup",
"category": "Forms"
}
]
}
{% endschema %}
-- Shopify Liquid Code --
<div class="contact-form">
<h2>{{ section.settings.heading }}</h2>
<div class="contact-form__description">
{{ section.settings.description }}
</div>
{% form 'contact', class: 'contact-form__form' %}
{% if form.errors %}
<div class="errors">
{{ form.errors | default_errors }}
</div>
{% endif %}
<div class="contact-form__field">
<label for="ContactFormName" class="contact-form__label">Name</label>
<input type="text"
name="contact[name]"
id="ContactFormName"
class="contact-form__input"
required>
</div>
<div class="contact-form__field">
<label for="ContactFormEmail" class="contact-form__label">Email</label>
<input type="email"
name="contact[email]"
id="ContactFormEmail"
class="contact-form__input"
required>
</div>
<div class="contact-form__field">
<label for="ContactFormPhone" class="contact-form__label">Phone Number (optional)</label>
<input type="tel"
name="contact[phone]"
id="ContactFormPhone"
class="contact-form__input"
pattern="[0-9\-]+">
</div>
<div class="contact-form__field">
<label for="ContactFormMessage" class="contact-form__label">Message</label>
<textarea rows="10"
name="contact[body]"
id="ContactFormMessage"
class="contact-form__textarea"
required></textarea>
</div>
<button type="submit" class="contact-form__submit">
{{ section.settings.submit_text }}
</button>
{% endform %}
</div>
<!-- Thank You Popup -->
<div class="contact-popup" id="thankYouPopup">
<div class="contact-popup__content">
<button class="contact-popup__close" id="closePopup">×</button>
<h3>Thank You!</h3>
<div class="contact-popup__message">
{{ section.settings.success_message }}
</div>
<button class="contact-popup__button" id="closePopupButton">
{{ section.settings.popup_close_text }}
</button>
</div>
</div>
-- CSS Code --
{% style %}
.contact-form {
max-width: 600px;
margin: 0 auto;
padding: 2rem;
}
.contact-form__field {
margin-bottom: 1.5rem;
}
.contact-form__label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
}
.contact-form__input,
.contact-form__textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
}
.contact-form__textarea {
min-height: 150px;
resize: vertical;
}
.contact-form__submit {
background-color: #000;
color: #fff;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
transition: opacity 0.2s;
}
.contact-form__submit:hover {
opacity: 0.9;
}
.errors {
color: #d32f2f;
margin-bottom: 1rem;
}
/* Popup Styles */
.contact-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 9999;
justify-content: center;
align-items: center;
}
.contact-popup__content {
background-color: white;
padding: 2rem;
border-radius: 8px;
max-width: 500px;
width: 90%;
text-align: center;
position: relative;
}
.contact-popup__close {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
}
.contact-popup__message {
margin: 1rem 0;
font-size: 1.1rem;
}
.contact-popup__button {
background-color: #000;
color: #fff;
padding: 0.5rem 1rem;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 1rem;
}
{% endstyle %}
-- JavaScript Code --
<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('.contact-form__form');
const popup = document.getElementById('thankYouPopup');
const closeButtons = document.querySelectorAll('#closePopup, #closePopupButton');
// Check if form was successfully submitted (after page reload)
if (window.location.search.includes('contact_posted=true')) {
showPopup();
// Clean URL
history.replaceState(null, null, window.location.pathname);
}
// Handle form submission
if (form) {
form.addEventListener('submit', function(e) {
e.preventDefault();
fetch('/contact', {
method: 'POST',
body: new FormData(form),
headers: {
'Accept': 'application/json'
}
})
.then(response => {
if (response.ok) {
showPopup();
form.reset();
} else {
return response.json().then(err => { throw err; });
}
})
.catch(error => {
console.error('Error:', error);
});
});
}
// Close popup handlers
closeButtons.forEach(button => {
button.addEventListener('click', hidePopup);
});
// Close when clicking outside content
popup.addEventListener('click', function(e) {
if (e.target === popup) {
hidePopup();
}
});
function showPopup() {
popup.style.display = 'flex';
document.body.style.overflow = 'hidden';
}
function hidePopup() {
popup.style.display = 'none';
document.body.style.overflow = '';
}
});
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ContactPage",
"name": "{{ section.settings.heading | escape }}",
"description": "{{ section.settings.description | strip_html | escape }}",
"potentialAction": {
"@type": "ContactPoint",
"contactType": "customer service",
"url": "{{ shop.url }}{{ page.url }}",
"email": "{{ shop.email }}"
}
}
</script>
Key Features:
Popup Thank You Message:
Shows a modal/popup when form is successfully submitted
Includes close button and can be closed by clicking outside
AJAX Form Submission:
Submits the form without page reload using fetch API
Better user experience
Popup Styling:
Centered modal with semi-transparent backdrop
Clean, modern design
Additional Settings:
Added setting for popup close button text
Accessibility:
Properly handles body scroll when popup is open
Multiple ways to close the popup (button, X, click outside)
