How to Add Shopify Contact Form to a Shopify Product Page

Log in or Sign up to ensure access to purchased code across multiple devices.

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: All Shopify 2.0 FREE themes ONLY. Works from lower version to version 12

In the dynamic world of online shopping, providing excellent customer service is key to success. Adding a contact form directly to your Shopify product pages can significantly enhance the shopping experience, allowing customers to easily reach out with questions or feedback. This guide will walk you through the simple steps to integrate a contact form into your Shopify product page, improving customer engagement and potentially boosting sales.

Why Add a Shopify Contact Form to Your Product Page? Integrating a contact form on your product page offers numerous benefits:

Direct Communication: Customers can ask questions or share concerns immediately, right on the product page.
Increased Engagement: A contact form invites interaction, keeping customers engaged on your site.
Boosted Confidence: Providing a direct line of communication builds trust and confidence in your brand.

Best Practices for Contact Forms:

Keep It Simple: Don't overwhelm customers with too many fields.
Clear Call to Action: Use engaging language for your submit button, like "Question about this product?".
Responsive Design: Make sure your form looks good on both desktop and mobile devices.

Form looks like this in your Product page

Shopify contact form in product page image

To start:

1. Go to Admin Shopify store > Themes > Actions > Edit Code

2. In Snippet folder, click "Add a new snippet", and name it "shopify-contact-form".

3. Open the newly created snippet, and place the code below. Make sure to SAVE.

<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;
  z-index: 1;
  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);
  }
  to {
    background-color: rgba(0, 0, 0, 0.7);
  }
}
#contact-modal-container {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100svh;
  z-index: 100;
  transform: translate(-50%, -50%);
  align-content: center;
  align-items: center;
  justify-content: center;
}
#contact-modal {
  position: relative;
  background-color: white;
  margin: 2rem;
  width: 100%;
  max-width: 400px;
  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);
}
@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: -100%;
  }
  to {
    top: 0%;
  }
}
#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>
<shopify-contact-form>
  <button class="shopify-contact-form-btn btn button">Question about this product?</button>
  <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">
        <h2 class="h2">Contact {{ shop.name }}</h2>
     {%- form 'contact', id: 'ContactForm', class: contact_form_class -%}
       <input type="hidden" name="contact[Product page]" value="{{ product.title }} - {{ product.url }}">
      {%- if form.posted_successfully? -%}
        <h2 class="form-status form-status-list form__message" tabindex="-1" autofocus>
          {% render 'icon-success' %}
          {{ 'templates.contact.form.post_success' | t }}
        </h2>
      {%- elsif form.errors -%}
        <div class="form__message">
          <h2 class="form-status caption-large text-body" role="alert" tabindex="-1" autofocus>
            {% render 'icon-error' %}
            {{ 'templates.contact.form.error_heading' | t }}
          </h2>
        </div>
        <ul class="form-status-list caption-large" role="list">
          <li>
            <a href="#ContactForm-email" class="link">
              {{ form.errors.translated_fields.email | capitalize }}
              {{ form.errors.messages.email }}
            </a>
          </li>
        </ul>
      {%- endif -%}
      <div class="contact__fields">
        <div class="field">
          <input
            class="field__input"
            autocomplete="name"
            type="text"
            id="ContactForm-name"
            name="contact[{{ 'templates.contact.form.name' | t }}]"
            value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
            placeholder="{{ 'templates.contact.form.name' | t }}"
          >
          <label class="field__label" for="ContactForm-name">{{ 'templates.contact.form.name' | t }}</label>
        </div>
        <div class="field field--with-error">
          <input
            autocomplete="email"
            type="email"
            id="ContactForm-email"
            class="field__input"
            name="contact[email]"
            spellcheck="false"
            autocapitalize="off"
            value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
            aria-required="true"
            {% if form.errors contains 'email' %}
              aria-invalid="true"
              aria-describedby="ContactForm-email-error"
            {% endif %}
            placeholder="{{ 'templates.contact.form.email' | t }}"
          >
          <label class="field__label" for="ContactForm-email">
            {{- 'templates.contact.form.email' | t }}
            <span aria-hidden="true">*</span></label
          >
          {%- if form.errors contains 'email' -%}
            <small class="contact__field-error" id="ContactForm-email-error">
              <span class="visually-hidden">{{ 'accessibility.error' | t }}</span>
              <span class="form__message">
                {%- render 'icon-error' -%}
                {{- form.errors.translated_fields.email | capitalize }}
                {{ form.errors.messages.email -}}
              </span>
            </small>
          {%- endif -%}
        </div>
      </div>
      <div class="field">
        <input
          type="tel"
          id="ContactForm-phone"
          class="field__input"
          autocomplete="tel"
          name="contact[{{ 'templates.contact.form.phone' | t }}]"
          pattern="[0-9\-]*"
          value="{% if form.phone %}{{ form.phone }}{% elsif customer %}{{ customer.phone }}{% endif %}"
          placeholder="{{ 'templates.contact.form.phone' | t }}"
        >
        <label class="field__label" for="ContactForm-phone">{{ 'templates.contact.form.phone' | t }}</label>
      </div>
      <div class="field">
        <textarea
          rows="10"
          id="ContactForm-body"
          class="text-area field__input"
          name="contact[{{ 'templates.contact.form.comment' | t }}]"
          placeholder="{{ 'templates.contact.form.comment' | t }}"
        >
          {{- form.body -}}
        </textarea>
        <label class="form__label field__label" for="ContactForm-body">Message</label>
      </div>
      <div class="contact__button">
        <button type="submit" class="button">Send Email</button>
      </div>
      {%- endform -%}
      </div>
    </div>
  </div>
</shopify-contact-form>
<script>
class ShopifyContactForm extends HTMLElement {
  constructor() {
    super();
    this.button = this.querySelector('.shopify-contact-form-btn')
    this.closeButton = this.querySelector('#contact-modal-exit');
 
    window.addEventListener("click", this.windowClicked.bind(this))   
    this.closeButton.addEventListener('click', this.closeModal.bind(this))
    this.button.addEventListener('click', this.buttonClicked.bind(this))
  }
 
  buttonClicked() {
    this.querySelector("#modal-contact-dark-overlay").style.display = "block";
    this.querySelector("#contact-modal-container").style.display = "flex";
  }
 
  closeModal() {
    this.querySelector("#modal-contact-dark-overlay").style.display = "none";
    this.querySelector("#contact-modal-container").style.display = "none";
  }  
 
   windowClicked() {
     if(event.target === document.querySelector('#contact-modal-container')) {
       this.closeModal()
    }
  }  
}
 
customElements.define('shopify-contact-form', ShopifyContactForm);
</script>

4. Let's open the theme editor. From your Admin page, go to themes, then click "Customize."

5. Go to your product template, and add a block called "Custom liquid."

6. Place the code below on the text area provided, then SAVE.

{% render "shopify-contact-form" % }

That's it (",)

Voltar para o blogue

Item adicionado ao seu carrinho

How to Add Shopify Contact Form to a Shopify Product Page

Log in or Sign up to ensure access to purchased code across multiple devices.

How to see the code

Deixe um comentário