How to insert custom fields to your theme's contact form in Shopify

Drive 20-40% of your revenue with Avada

Get Started

The Shopify Contact Form is essential for visitor engagement, but it’s often limited to basic fields. However, customization is possible, allowing you to gather more in-depth information from your audience. This guide will walk you through the steps to add custom fields to your Shopify contact form, providing a richer experience for your visitors and valuable insights for your business.

How to insert custom fields to your theme’s contact form

Step 1:

Go to Online Store > Themes from your Shopify Admin panel.

Step 2:

Look for the theme you want to edit and click Actions > Edit code.

Step 3:

Tap page.contact.liquid located in the Templates directory.

• Step 4: Look for the Liquid tags below in the code:

{% form 'contact' %}

and

{% endform %}

Step 5:

You can find the contact form code between the Liquid tags that you found in the former step. This is the place the dafault form fields are found, with every field divided by an empty line. Each theme is different from each other but in general, a contact form field looks like this:

The code will be pasted for your custom fields after, before, or even in between the available fields, it depends on your preference. The code you add will rely on the form field’s type that you want to generate.

Step 6:

Tap Save after adding the code for the custom form fields.

Benefits of using a Contact form

A contact form can be used for so many reasons that you may understand, as an online store administratore. Here are some reasons we listed below to use a contact form:

- Information/Service Request: You customers are able to use this to ask for more information about your products or services.

- Feedback: The contact form is used to get review and feedback from your customers.

- Questions: The form give visitors permission to immediately contact you with many different questions relating to your products and so on.

On top of that, we would like to introduce to you some of great advantages you can take from using contact forms:

- Reduce Spam: When contact forms are handled serverside and your email address is not available, spammers are completely not able to harvest it in an easy way. It is so much safer than using the mailto: tag.

- Consistency: The emails from the contact form are consistant and able to help your website stay well-organized when all the information is supplied in the similar way.

- Information Control: You are allowed to capture the accurate information that you want from the customer when you you find any interesting or necessary information.

How do Shopify contact forms work

When a visitor lands on your contact page, a form is displayed to collect their information and message. Upon submission, the filled data is automatically sent to your email via server-side scripts like Perl or PHP.

Each submission generates an email link with the same subject line, making it easy to filter and organize. Additionally, you can customize where visitors are redirected after submission, typically back to the contact page with a confirmation message.

Troubleshooting Custom Contact Form Fields in Shopify

While editing your contact form fields, you may encounter some major issues. Here are some of the main problems and their solutions to support your editing process:

Fields Not Showing:

• Double-check that you’ve saved your theme customizations after adding the code.
• Clear your browser cache and refresh the page.

Ensure the Liquid code is placed correctly within the {% form 'contact' %} block in your page.contact.liquid template.

Data Not Being Submitted:

• Verify the name attributes in your input fields are correctly formatted (e.g., name=”contact[YourFieldName]”).
• Check your Shopify notification settings to make sure the form submissions are being sent to the correct email address.
• If using a third-party contact form app, consult their documentation or support for specific troubleshooting steps.

Styling Issues:

• Inspect the generated HTML using your browser’s developer tools to identify the CSS classes or IDs applied to your custom fields.
• Add custom CSS to your theme’s stylesheet to style the fields to match your store’s design.

App Conflicts:

• If you have other apps that modify the contact form, they might be conflicting with your custom fields.
• Temporarily disable other apps to see if the issue resolves. If it does, contact the app developers for support.

General Tips:

• Always make a backup of your theme files before making any code changes.
• If you’re unsure about coding, consider using a third-party app to add custom fields or consult a Shopify expert.
• Reach out to Shopify support if you need further assistance with troubleshooting.

Conclusion

Adding custom fields to your Shopify contact form empowers you to collect valuable customer information and tailor their experience. With our instructions above, you can insert customer fields and edit the Shopify contact form effectively.

Feel free to leave any questions or feedback in the comments below!