How To Add a Shopify Contact Form With Popup Thank You

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">&times;</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 %}

Java Script 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)

Author
Recent Posts

Shahrukh Miya

With 7+ years of experience in Shopify development, eCommerce solutions, and SEO, I have successfully delivered 100+ high-performing Shopify stores that drive conversions and enhance user experience.

Shopify Schema Code

Shopify Liquid Code

CSS Code

Java Script Code

Key Features:

Leave a Reply Cancel reply

OPTIMIZE YOUR MARKETING

Find Out Your Website's Ranking On Google

Services

Support

Quick Link

Contact