Adding a Modal Contact Form to a Shopify Product Page

Rich Cherry | Shopify Theme Development

Shopify theme development and setup can bring a totally new user experience. Whether you want to add a Contact Form, Sign Up Form, or Login Form to your Shopify site, a Modal can be a great way to allow users to submit forms via a popup window (although, technically not a popup window) without removing them from their current page, which can provide a more cohesive shopping experience.

How to add a modal contact form to the Shopify product page

In the video below, you will find a full guide of how to add a modal contact form and make it easier for your customers to get in touch with you.

HTML

<button id="contact-modal-button" class="btn">Questions?</button><div id="modal-contact-dark-overlay"></div>  <div id="contact-modal-container">    <div id="contact-modal">      <button id="contact-modal-exit">&#x2715;</button>      <h1>Contact Us</h1>      <p id="modal-success-message"></p>      <div id="contact-modal-form-content">        {% form 'contact' %}          {{ form.errors | default_errors }}</div></div></div>

 <label for="ContactFormArtwork" class="label--hidden">{{ product.title }}</label>          <input type="text" id="ContactFormArtwork" name="contact[Artwork]" value="{{ product.title }}" readonly="readonly">    

     <label for="ContactFormSku" class="label--hidden">{{ product.selected_or_first_available_variant.sku }}</label>          <input type="text" id="ContactFormSku" name="contact[Sku]" value="{{ product.selected_or_first_available_variant.sku }}" readonly="readonly">          

         {% assign name_attr = 'contact.form.name' | t | handle %}          <label for="ContactFormName" class="label--hidden">{{ 'contact.form.name' | t }}</label>          <input type="text" id="ContactFormName" name="contact[{{ 'contact.form.name' | t }}]" placeholder="{{ 'contact.form.name' | t }}" autocapitalize="words" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.name }}{% endif %}">

        <label for="ContactFormEmail" class="label--hidden">{{ 'contact.form.email' | t }}</label>         <input type="email" id="ContactFormEmail" name="contact[email]" placeholder="{{ 'contact.form.email' | t }}" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">

        {% assign name_attr = 'contact.form.phone' | t | handle %}         <label for="ContactFormPhone" class="label--hidden">{{ 'contact.form.phone' | t }}</label>         <input type="tel" id="ContactFormPhone" name="contact[{{ 'contact.form.phone' | t }}]" placeholder="{{ 'contact.form.phone' | t }}" pattern="[0-9\-]*" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.phone }}{% endif %}">

        <label for="ContactFormMessage" class="label--hidden">{{ 'contact.form.message' | t }}</label>         <textarea rows="10" id="ContactFormMessage" name="contact[{{ 'contact.form.message' | t }}]" placeholder="{{ 'contact.form.message' | t }}">{% if form.body %}{{ form.body }}{% endif %}</textarea>  

        <input type="submit" class="btn right" value="{{ 'contact.form.send' | t }}">     {% assign form_success = form.posted_successfully? %}      {% endform %}          

CSS:

 #modal-contact-dark-overlay {    display: none;    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    background-color: rgba(0, 0, 0, 0.7);    overflow: auto;    animation-name: animateopacity;    animation-duration: 0.5s;  }    @keyframes animateopacity {    from {background-color: rgba(0, 0, 0, 0.0)}    to {background-color: rgba(0, 0, 0, 0.7)}  }  #contact-modal-container {    display: none;    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;  }  #contact-modal {    position: relative;    margin: 0 auto;    background-color: white;    width: 30%;    height: auto;    padding: 20px 40px 50px 40px;    box-shadow: -1px 3px 18px 0px rgba(128,128,128,1);    animation: drop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);    transform: translate(0%, -25%);    top: 25%;  }  @media(max-width: 1200px){    #contact-modal {      width: 40%;    }    }  @media(max-width: 770px){    #contact-modal {      width: 85%;    }    }    @keyframes drop-in {    from {top: 10%;}    to {top: 25%}  }    #contact-modal-exit {    position: absolute;    right: 20px;    border:none;    background:none;    font-size: 18px;  }  .hide-modal-content {    display: none;  }  #contact-modal-button {    position: relative;    background: black;    left: 243px;    top: -78px;    min-width: 34%;      }  @media(max-width: 770px){    #contact-modal-button {      position: static;       width: 100%;      display: flex;      justify-content: center;    }   }      input#ContactFormArtwork {    background-color: #F5F5F5;    font-style: italic;  }  input#ContactFormSku {    background-color: #F5F5F5;    font-style: italic;  }  input#ContactFormArtwork:focus {    outline: none;  }  input#ContactFormSku:focus {    outline: none;  }

JavaScript

<script>  const showOverlay = () => document.querySelector("#modal-contact-dark-overlay").style.display = "block";  const showModal = () => document.querySelector("#contact-modal-container").style.display = "block";    const hideOverlay = () => document.querySelector("#modal-contact-dark-overlay").style.display = "none";  const hideModal = () => document.querySelector("#contact-modal-container").style.display = "none";  // Open the Modal Window  document.querySelector("#contact-modal-button").onclick = function(){    showOverlay();    showModal();  }// Close the Modal Window by clicking the X  document.getElementById("contact-modal-exit").onclick = function(){    hideOverlay();    hideModal();  }// Close the Modal Window by clicking outside the box    window.onclick = function(event) {    if(event.target === document.querySelector('#contact-modal-container')) {      hideOverlay();      hideModal();        }  }  const hideFormFields = () => document.querySelector('#contact-modal-form-content').classList.add('hide-modal-content');// Show success message on page load        window.onload = function(){        if({{ form_success }}){  hideFormFields();      showOverlay();      showModal();      document.querySelector('#modal-success-message').innerHTML = "{{ 'contact.form.post_success' | t }}";    }  }</script>

‍