How to add contact form to Shopify store?

Each client expects to have an opportunity to contact the seller in order to clarify any issue on specific goods or services. To do that you need to add contact form to Shopify store.

This is an easy process that any Shopify user can perform on the basis of a few nuances. Read below to find out what they are.

A modern website cannot function properly without a contact form. It is an integral part of any site, regardless of its subject matter. Through the contact form you get feedback, complaints, and suggestions from visitors that will help you make the sale and purchase process more convenient. This is, undoubtedly, one of the best ways for the Shopify store owner to better communicate with his/her customers.

What you should do to add Shopify contact form

It is quite easy to add this feature to your Shopify store. All themes have a Shopify custom contact form, which you can apply to the pages you create. You can do it in two ways.

Step 1: special fields form setting

1. Create Shopify contact page

In order to add a Shopify contact form to your online store, you need to create a contact page. If you create a page without any content, then just the contact form and nothing else will appear on the page.

To create a contact page:

1. You need to go to the Shopify admin panel and select Online Store> Pages.
2. Click Add page.
3. In the Title field, enter the name of your contact page, for example, “Contact us” or “Get in touch”.
4. In the Content field, add any text that you want to display above the contact form. It is desirable that the text should be concise, friendly and calling for action. Here you can specify your contact details, for example, the address of your store, phone numbers, etc.
   

1. In the Template block, select page.contact in the Template suffix drop-down menu:
   

1. And click Save.

Now your contact form will be on the contact page. You can add a contact page in the navigation menu so that your visitor always could have access to it. All messages from the contact form are sent to the email address specified in the general settings of your Shopify store. If necessary, you can easily change this address in your admin panel.

2. Add a field to the contact form

Often, there are not enough standard fields of the contact form, and you may need to collect more detailed user information when working with your clients. In this case, you can add more fields to your contact form. To do that, you will need to add these fields in the code.

To add additional fields to the contact form in the code you need to do the following :

• In your Shopify admin panel go to the Online Store> Themes.
• Next, select the theme you want to edit, and in the Actions drop-down menu, click Edit code.
• Now you have the entire list of your theme files. In the Templates folder, you must select the page.contact.liquid file.
• The code of contact us form for Shopify is inside the following tags:
  {% form 'contact'%}
  and
  {% endform%}
  Each theme is different, but approximately it looks like this:
  

• In the rectangle, a form field is selected for the name, for instance: contact.form.name. Below you can see: contact.form.email, contact.form.phone, contact.form.message
• You can add code for your additional fields before, after or between the existing fields, depending on your preferences. The code you add will depend on the type of form field you want to create.
• After adding the fields you need, remember to click Save.

3. Select Shopify contact form field types

Below you can see the examples of form fields,  so you can add a contact form to Shopify as well as change the form fields to your needs.

Тext field

Think about what data you want to receive from your client, which fields should be required and which ones should not. You can customize all these features by yourself. To create a text field for your contact form, paste and configure the following code:

<label for="ContactFormCountry">Country</label>
<input type="text" id="ContactFormCountry" name="contact[Country]" placeholder="Country">

Drop-down menu

To create a drop-down menu for contact us form for Shopify, insert and configure the following code:

<label for="ContactFormFlavor">Choose a flavor</label>
<select id="ContactFormFlavor" name="contact[Flavor]">
<option>Chocolate</option>
<option>Vanilla</option>
<option>Strawberry</option>
</select>

4.Set up Shopify contact form fields

To customize the form fields you added, edit the code from the above-mentioned examples before saving them in the contact form template. Then add the attributes you need to the Shopify form, such as: name, value, placeholder and label. After adding these fields, you should get a contact form:

And when the client fills this contact form, you will receive a report of the following type via email:

Step 2: creating a contact form to Shopify with the help of the app

To create a contact form in Shopify, you can use one of the Shopify applications. They are equipped with useful features such as adaptive layouts, drop-down lists, checkboxes, date pickers, anti-spam filters, multi-language support, simple color setting, as well as font and background settings, etc.

Best Shopify Contact Form Apps 2023

1. Easy Contact Form

Easy Contact Form is a free application developed by Zotabox to create an unlimited number of contact forms. It has a responsive design, so your forms will look nice and they will work on mobile devices, such as cell-phones and tablets. You can easily customize the appearance of the forms in accordance with the existing brand of your store. The Easy Contact Form app is very simple in installation and configuration processes. It also includes Ajax and HTML5 code and allows you to download background images.

★★★☆☆

2. Form Builder

POWr Form Builder allows you to create free professional, easy-to-use and versatile forms for collecting any information you need for your business. The application is equipped with numerous handy features, such as automatic email replies to the form filled by customers, anti-spam protection, the ability to download a file, a multi-page form and much more.

★★★★☆

3. Improved Contact Form

Improved Contact Form is the application developed by awio. It will allow you to easily add a pop-up contact form to your website or a traditional form on the page of your store. In addition, you can also customize which field you want to display in your contact forms, for example, name, email address or phone number. The application has built-in spam protection. The Improved Contact Form will also provide you with useful information about the visitors who filled out and sent your contact form, such as their location, IP address, which pages they viewed before they contacted you, and most importantly, how they found your site. These details will help you deeper understand your customers, and as a result, you will be able to better meet their needs.

★★★★★

4. Contact Form by POWr

Contact Form by POWr offers its customers many customization options, so you can choose the background, color, and font you want in your form, and include support for several input options, including dates, text, email addresses, drop-down lists, and checkboxes. In addition, this app can assist you in gathering contact information about your clients, which you may want to use later. Also, Contact Form by POWr can effectively manage all your contacts from your personal POWr control panel.

★★★★☆

5. Form Builder for Custom Forms

Form Builder for Custom Forms is an application developed by AAAeCommerce Inc. It is on a fee-paying base only, but there is a two-day free trial. You get access to a variety of user forms, such as a registration form, a customer profile update form, an order form, a feedback form, a donation collection form, and others. With a few mouse clicks, you can easily create any form you need. It will have the ability to upload files, as well as custom fields, advanced customer reporting, MailChimp / Klaviyo integration and the ability to accept payments in the form using Stripe / PayPal.

★★★★☆

How to add contact form to Shopify?

1. Enter Shopify app store.
2. Select the app from the above-mentioned list.
3. Click "Add App" button.

That's all for now.

If you want to change the information in the Shopify contact form, log into your store's admin panel, click "Apps" in the menu, then click on "Improved Contact Form". After that, you can change form fields, customize text and colors as well as add background images and more.

Conclusions

We have described you two possible ways how to add a contact form to your Shopify store, but the choice is up to yours. You can either create it yourself or use one of the applications from Shopify app store. The most important thing is to have a contact form in your online store since this is one of the main types of information exchange with your customers and a powerful marketing tool for a successful business.