Adding Contact Form to a Shopify Product Page for FREE. No API, No APP - Made4uo - Great Gift Deals

Adding Contact Form to a Shopify Product Page for FREE. No API, No APP

Hi,

I have been looking for a way to have customers contact me when they have question about the product. No APP needed, nor need API or subscription. The contact form will include the product title, the product SKU, customer's name, customer's email, and of course the message.

I used EmailJS to fulfill the sending of email using the Gmail account. Therefore, Gmail account is need. EmailJS has a 200 free emails/month. See Emailjs pricing.

This is compatible with Shopify Themes, such as Debut, Supply and Simple. I have not tried other themes yet. 

Prerequisite:

  • Gmail account
  • EmailJS account

You do not need any coding experience to be able to complete this. Just follow 8 simple steps below

1. First, we need the Service ID, Template ID and User ID from EmailJS. Please follow this link to set up your EmailJS.
2. Go to Shopify -> Online Store -> Themes -> Actions -> then Edit Code.
3. Create a snippet and name it "product-modal-contact-form", under Snippet folder
4. Paste the CODE below.

 <button id="contact-modal-button" class="btn">Questions about the product?</button>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script>

<script type="text/javascript">
emailjs.init('user_XXXXXXXX')
</script>

<div id="modal-contact-dark-overlay"></div>
<div id="contact-modal-container">
<div id="contact-modal">
<button id="contact-modal-exit">&#x2715;</button>
<p id="modal-success-message"></p>
<div id="contact-modal-form-content">
<h1>Contact Made4uo</h1>
<form id="form">
<div class="field">
<label for="ContactFormTitle" class="label--hidden">{{ product.title }}</label>
<input type="text" id="ContactFormTitle" name="ContactFormTitle" value="{{ product.title }}" readonly="readonly">
</div>


<div class="field">
<label for="ContactFormSKU" class="label--hidden">{{ product.selected_or_first_available_variant.sku }}</label>
<input type="text" id="ContactFormSKU" name="ContactFormSKU" value="{{ product.selected_or_first_available_variant.sku }}" readonly="readonly">
</div>

<div class="field">
<label for="ContactFormName">First Name</label>
<input type="text" name="ContactFormName" id="ContactFormName">
</div>
<div class="field">
<label for="ContactFormEmail">Email</label>
<input type="email" name="ContactFormEmail" id="ContactFormEmail">
</div>
<div class="field">
<textarea rows="5" id="ContactFormMessage" name="ContactFormMessage"></textarea>
</div>
<input type="submit" id="button" value="Send Email" >
</form>
</div>
</div>
</div>

<script>
const parambtn = document.getElementById('button');

document.getElementById('form')
.addEventListener('submit', function(event) {
event.preventDefault();

parambtn.value = 'Sending...';

const serviceID = 'default_service';
const templateID = 'template_XXXXX';

emailjs.sendForm(serviceID, templateID, this)
.then(() => {
parambtn.value = 'Send Email';
alert('Sent!');
hideOverlay();
hideModal();
}, (err) => {
parambtn.value = 'Send Email';
alert(JSON.stringify(err));
});
});
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();
}
}
</script>
<style>
#ContactFormMessage {
width: 100%;
}

.field {
margin-bottom: 10px;
}

.field input {
display: block;
min-width: 100%;
line-height: 1;
font-size: 14px;
}
#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%;
z-index: 9999999;
}

#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: 10%;

}
@media(max-width: 1200px){
#contact-modal {
width: 40%;
}
}
@media(max-width: 770px){
#contact-modal {
width: 85%;
top: 10%;
padding: 20% 5% 5% 10%;
}
}
@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;
display:block;
width: 100%;
}

input#ContactFormTitle {
background-color: #F5F5F5;
font-style: italic;
}
input#ContactFormSKU {
background-color: #F5F5F5;
font-style: italic;
}
input#ContactFormTitle:focus {
outline: none;
}
input#ContactFormSKU:focus {
outline: none;
}
</style>


5. You need to change the highlighted code, and edit the Bold items to your store name, then click SAVE.
6. Go to Section folder and open the product-template-liquid file. Find the code below, usually at line 242. 

  {% endform %}


7. After the code above, paste the code below. 

  {% render 'product-modal-contact-form' %}


8. Your code should look like below


 You can try it now in your website. You can see the quota you have available on the top of your EmailJS dashboard. Please do not hesitate to contact me if you have questions.

Update 9/29/21. Fix the button size issue and the paypal button showing when opening the form

How to make hero image the background for header - DAWN Theme

Hero image to be the background for header. It is possible. Just follow the steps below. I recomm...

Featured collection slider for Dawn Theme Shopify 2.0

Add a collection slider for your home page. This only works with Dawn Theme.

Adjust Main and Thumbnail Product Images in the Product Page for Dawn Theme

Dawn Theme issues with large images? Solve that using this video tutorial

Product Slider for Dawn Theme - No apps or subscript- Just a little bit of code

Add a product slider for Dawn theme, almost like Debut theme slider. No app or subscription neede...

Tab Component Section - Pure CSS

Add a tab component as a section which means, you can add it to any pages in Shopify 2.0, like pr...

Add WhatsApp to Shopify for Free - No App or Subscription

Add WhatsApp to your Shopify website without app or subscription. Personalize the icon with your ...

Product / Card Automatic Swipeable Carousel / Slider for Most of Shopify Theme

Add a carousel / slider for your product or card without an app or external library. This work in...

Awesome slideshow for most of Shopify Themes - Work well with Dawn

Awesome slideshow with 11 unique designs to choose from. No app or subscription needed. No coding...

5 comments

Hi,

How’s everything at your end?

I want o offer you a simple three-step process of the guest post. The guest post ideas will be amazing and will interest your readers for sure. Here’s what we need to do:

1. I will send you well-researched topic ideas that resonate with your site.
2. You’ll have to choose one topic of your choice.
3. I will then send a high-quality, SEO Friendly article on that selected topic for you to publish on your website with one do-follow link to my site.

Let me know if we shall begin with step 1?

Best,
Anita Gro

Anita Gro

How do I increase the z-index property for my popup in my styles? I have other icons/boxes overlapping the questions popup box. That is what Emailjs support suggested I try. Any feedback? Thank you!

Terry Marie

Hello testing :)

Terry Marie

Hi. I’m sorry if your facing this issue. This is how you delete it.

1. In your online store. Go to themes.
2. Go to the theme you have emailJS.
3. Click Actions, then edit code
4. At the right side of your screen, you will see the theme folders. Find the product-template-liquid.
5. Open the folder. Then in your keyboard. Click Ctrl f at the same time, so the search input will come out. In the search box, paste this code {% render ‘product-modal-contact-form’ }.
6. Find the { render ‘product-modal-contact-form’ %} and delete it, then click SAVE
7. In your Theme folders. Find the Snippet folder.
8. Open the file, product-modal-contact-form
9. At the right corner, click the delete file button. That’s it

Made4uo

How do i delete EmailJS from my website?? I no longer want to use it but I have NO IDEA how to delete it… can you please please help me? Like a step by step guide, which is as easy as this guide :) Thank you!!

Terry Marie

Leave a comment