How to add a product selection field to your contact form

Michal17
Shopify Partner
820 73 144

How to add a product selection field to your contact form

How to know more easily which products your customers are talking about when they write to you? A product name selection field in your contact form will allow your customers to select the product they want to talk about when they contact you. To add such a selection field, you should edit the contact form of your online store.

So how to edit the contact form…

It is not complicated to edit the contact form, so find out in the following how to do it.

  • From your Shopify admin, go to Online Store > Themes.
  • Find the theme you want to edit, and then click Actions > Edit code.
  • Click on page.contact.liquid file (under templates folder).

Contact form source code – Shopify theme code editorContact form source code – Shopify theme code editor

After opening the above file, you need to determine where to place the code below in the file for the input field. In my case, I would like to place the products’ selection field just after the email address field. This code will display the product selection field in the contact form of your online store.

 

 

<div>
    <label for="ContactFormProductNameField">Products</label>
    <select id="ContactFormProductNameField" name="contact[Product]" required>
        <option selected disabled>Choose your product</option>
        <option value="Others - No product-related concerns">Others - No product-related concerns</option>
        {% for product in collections.all.products %}
            <option value="{{ product.title }}">{{ product.title }}</option>
        {% endfor %}
    </select>
</div>

 

 

Then copy the code above and paste it as shown in the following screenshot and hit Save:

Contact form updated with products’ selection fieldContact form updated with products’ selection field

Now, go checking the contact page in your browser. What did you find? Find below a screenshot of the updated contact form:

Products name field added to the contact formProducts name field added to the contact form

Products name field added to the contact formProducts name field added to the contact form

It’s time to test your code

Finally, your contact form is updated and ready. It’s time to test it. Here is the test result of my new contact form:

The test result of the updated contact formThe test result of the updated contact form

Being a Shopify eCommerce development Company in Melbourne, sometimes our experts take the time to help the brave merchants in the Shopify community. A while back, a wonderful merchant wanted to know how she could add a product selection field to her contact form, so here’s a comprehensive tutorial that will be very helpful, not only for her but for many other merchants in the same need as her.

If you have any questions, don’t hesitate to contact us, either from the contact section or by leaving a comment.

0 Likes