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.
5. You need to change the highlighted code below, then click SAVE. (To personalized the code, edit the Bold items)
6. Go to product-template-liquid, under Section folder and find the {% endform %}
7. Enter code below
{% render 'product-modal-contact-form' %}
8. Click SAVE
CODE:
<html>
<head>
<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">✕</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>
</head>
<body>
<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%;
}
#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;
background: 56D4C5;
left: 5px;
top: -10px;
min-width: 98%;
}
@media(max-width: 770px){
#contact-modal-button {
position: static;
width: 100%;
display: flex;
justify-content: center;
}
}
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>
</body>
</html>
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.