Creating a popup with a contact form

[FBalit]

Hi,

I am trying to add a link to all my product pages which, when it's clicked on, a popup window appears with a contact form. This is for customers that need help are able to enquire about a product.

I would like to use the default contact form on my theme (Debut theme) instead of an app but I don't really know how to create this popup window with the form, can anyone help?

Thanks in advance for your help 🙂

Francecsa

[ShanifAtApteo]

Hi @FBalit, I'd love to elaborate on what you're actively looking to know about how to create this popup window with the form. I hope you should be able to resolve your issue by adding the given code below:

1: Go to Online Store > Actions > Edit Code > Snippets

2:Click on Add New Snippet

3: Insert a name for snippet but for this case using “my-popup”

4:  Click on “ Create Snippet ” 5:  Paste this code in the new file ‘my-popup’

 <style>

/* The Modal (background) */

.modal {

  display: none; /* Hidden by default */

  position: fixed; /* Stay in place */

  z-index: 1; /* Sit on top */

  padding-top: 100px; /* Location of the box */

  left: 0;

  top: 0;

  width: 100%; /* Full width */

  height: 100%; /* Full height */

  overflow: auto; /* Enable scroll if needed */

  background-color: rgb(0,0,0); /* Fallback color */

  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

/* Modal Content */

.modal-content {

  background-color: #fefefe;

  margin: auto;

  padding: 20px;

  border: 1px solid #888;

  width: 80%;

}

/* The Close Button */

.close {

  color: #aaaaaa;

  float: right;

  font-size: 28px;

  font-weight: bold;

}

.close:hover,

.close:focus {

  color: #000;

  text-decoration: none;

  cursor: pointer;

}

</style>

<h2>Modal Example</h2>

<!-- Trigger/Open The Modal -->

<button id="myBtn">Open contact us Modal</button>

<!-- The Modal -->

<div id="myModal" class="modal">

  <!-- Modal content -->

  <div class="modal-content">

    <span class="close">&times;</span>

      <div class="contact-form form-vertical">

        {% form 'contact' %}

          {% if form.posted_successfully? %}

            <p class="note form-success">

              {{ 'contact.form.post_success' | t }}

            </p>

          {% endif %}

          {{ form.errors | default_errors }}

          <div class="grid grid--half-gutters">

            <div class="grid__item medium-up--one-half">

              <label for="ContactFormName">{{ 'contact.form.name' | t }}</label>

              <input type="text" id="ContactFormName" name="contact[name]" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">

            </div>

            <div class="grid__item medium-up--one-half">

              <label for="ContactFormEmail" class="{% if form.errors contains 'email' %}label--error{% endif %}">{{ 'contact.form.email' | t }}</label>

              <input type="email" id="ContactFormEmail" name="contact[email]" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}" class="{% if form.errors contains 'email' %}input--error{% endif %}">

            </div>

          </div>

      <label for="ContactFormPhone">{{ 'contact.form.phone' | t }}</label>

          <input type="tel" id="ContactFormPhone" name="contact[phone]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">

          <label for="ContactFormMessage">{{ 'contact.form.message' | t }}</label>

          <textarea rows="10" id="ContactFormMessage" name="contact[body]">{% if form.body %}{{ form.body }}{% endif %}</textarea>

          <input type="submit" class="btn" value="{{ 'contact.form.submit' | t }}">

        {% endform %}

      </div>

  </div>

</div>

<script>

// Get the modal

var modal = document.getElementById("myModal");

// Get the button that opens the modal

var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal

btn.onclick = function() {

  modal.style.display = "block";

}

 // When the user clicks on <span> (x), close the modal

span.onclick = function() {

  modal.style.display = "none";

}

// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {

  if (event.target == modal) {

    modal.style.display = "none";

  }

}

</script> 

6: Click on Save Button

7: ( Optional for your case, You can skip to the next point ) Now your pop-up is ready and you can use this where you want by writing this line of code

{% include 'my-popup' %}

8: For your case  open “product-template.liquid” code file and paste this code where you want

{% include 'my-popup' %}

 Now it will be visible for every product page. Hopefully, that solves your problem. If not, please let me know if you're seeing any other issues.

[made4Uo]

Hi,

I assume you want a contact form with the SKU and the title of the product to be included to be able to respond to the question correctly right? Check this video tutorial with instructions. No app needed and it is free. No coding experience needed either

[Paula133]

Can you use this for some products only?

I'm using Prestige theme and want an enquiry pop up for only some products.

Can you help?

[made4Uo]

It applies to all products in your store. I have not tried prestige theme though

[Paula133]

Thanks - but can it apply to only a few products? and if so, how do you do this?

[Aravinthmoshi]

Thanks for your code. In that close button (modal close functionality) is not working for me. Can you pls help me on that?

[superbowl]

Thank you. It works. I only change include on render