Shopify has a default contact page option to add a contact form where your visitor can fill out the form and submit it to send a message. But if you want to add a contact form to a product page in your store then It’s will be hard before following this tutorial.
A contact form is a short web-based form published on a website. Any visitor can fill out the form and submit it to send a message to the site owner.
In this Shopify video tutorial, I am going to show you How to add a contact form to a product page in Shopify without hiring any developer.
Don’t worry, You do need to learn to code or write any code for that. I make this video super easy and cool for you. Just follow this video and use the code from below by copy and paste.
Step: 1 Open Sections Folder
Step 2: Find product-template.liquid file and open it
Step 3: Add the following code to this file.
<div class="contact-form form-vertical pcf-ui"> {%- assign formId = 'ContactForm' -%} {% form 'contact', id: formId %} {% include 'form-status', form: form, form_id: formId %} <div class="grid grid--half-gutters"> <div class="grid__item medium-up--one-half"> <label for="{{ formId }}-name">{{ 'contact.form.name' | t }}</label> <input type="text" id="{{ formId }}-name" name="contact[{{ 'contact.form.name' | t }}]" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}"> </div> <div class="grid__item medium-up--one-half"> <label for="{{ formId }}-email">{{ 'contact.form.email' | t }} <span aria-hidden="true">*</span></label> <input type="email" id="{{ formId }}-email" name="contact[email]" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}" aria-required="true" {%- if form.errors contains 'email' -%} class="input--error" aria-invalid="true" aria-describedby="{{ formId }}-email-error" {%- endif -%} > {%- if form.errors contains 'email' -%} <span id="{{ formId}}-email-error" class="input-error-message"> <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span> {% include 'icon-error' %} <span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span> </span> {%- endif -%} </div> </div> <label for="{{ formId }}-phone">{{ 'contact.form.phone' | t }}</label> <input type="tel" id="{{ formId }}-phone" name="contact[{{ 'contact.form.phone' | t }}]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}"> <label for="{{ formId }}-message">{{ 'contact.form.message' | t }}</label> <textarea rows="10" id="{{ formId }}-message" name="contact[{{ 'contact.form.message' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea> <input type="submit" class="btn" value="{{ 'contact.form.submit' | t }}"> {% endform %} </div>
