How to Insert Custom Fields into Your Shopify Contact Form

Contact forms are a great way to collect information from customers or leads on your website. You can use them to gather feedback, sign up for newsletters, or request more information about a product or service. By default, Shopify’s contact form includes fields for the customer’s name, email address, and message, which may force you to add custom fields if you need to collect more data.

To insert custom fields into your Shopify contact form, go to the Themes page on your Shopify dashboard and select Edit code in the Actions menu. Click the “page.contact.liquid file”, and then add a line of code for each new field you want to add.

Read on for a step-by-step guide on how to add custom fields to your Shopify contact form.

Best practices for inserting custom fields into a contact form on Shopify

• Keep it simple: While it may be tempting to add lots of custom fields to your contact form, it’s important to keep it simple. Only include fields that are necessary for your business to effectively respond to customer inquiries. Too many fields can overwhelm users and reduce the likelihood that they will complete the form.
• Label fields clearly: Make sure that the labels for each field are clear and easy to understand. Use plain language and avoid using technical jargon that may be confusing to customers.
• Use validation to ensure data quality: Use validation to ensure that users enter data in the correct format for each field. For example, if you are asking for a phone number, use validation to ensure that users enter a valid phone number format.
• Test the form: Make sure to test the form thoroughly before making it live on your website. This will help you identify any issues or errors with the form and ensure that it works as intended.
• Consider the user experience: When designing your contact form, consider the user experience. Make sure the form is easy to use, visually appealing, and optimized for mobile devices.

By following these best practices, you can ensure that your custom fields are seamlessly integrated into your Shopify contact form and provide a positive user experience for your customers.

Creating your custom fields – Step-by-step guide

1. Go to Themes on your Shopify dashboard

The first step to adding custom fields to your Shopify contact form is to go to Themes on the Shopify dashboard. Here are the steps to take:

1. Go to Shopify’s website and log in to your account.
2. Click the “Online Stores” option in the sidebar menu on the left-hand side of the screen.
3. Click the Themes option to open the Themes library. From there, you’ll see all the themes installed in your store.

2. Select Edit Code in the Themes window

After you’ve opened the Themes page, follow these steps:

1. Find and click on the “Actions (…)” button. It should be located next to the “Customize” button.
2. In the dropdown menu, select “Edit code“. This will take you to the Edit code page for your themes, where you can change the HTML, CSS, and JavaScript files that control their appearance and behavior.

3. Create a new template for your contact form

Now that you’re on the Edit code page, you’ll need to create a new template to add your custom fields. I recommend creating a new template to revert to the original contact form quickly. Besides, you’ll only be adding lines of code to your new template, so there’s no need to create a new one from scratch.

Here are the steps to follow:

1. Click “Add a new template” on the Edit code page under the Templates tab.
2. Select “Page” from the Template type dropdown menu in the pop-up window and enter Custom Contact in the Name field.
3. Click on “Done“.

4. Paste the original contact form’s code to the new page

Now that you’ve created a new template for your contact form, you need to paste the code for the original form into it. Here’s how to do that:

1. Go back to the “Edit code” page.
2. Under the Theme templates, find the file named “page.contact.json” and click on it to open it in the code editor.
3. Copy all of the code from this file and paste it into your new contact template (page.custom-contact.json). We’ve highlighted what you need to copy within the big red square in the image below.
4. Click “Save“.
5. Go back to “Pages” > “Contact” > “Theme template” > “Select custom-contact“.
6. Click “Save“.

5. Add the new field’s label and input code 

The last step is to add the label and input code for your new field in the HTML of your contact template (page.contact.liquid). For example, if you wanted to add a field for people to enter their age, you would add the following code:

<label for=”age”>Enter your age</label>

<input type=”text” name=”age” id=”age”>

Don’t forget to replace “age” with whatever label you want people to see next to your new field.

Once you’re done adding all your new fields, save your changes by clicking on “Save” at the top of the page.   

If you’re stuck at any step of the process, watch the following YouTube video for additional help and guidance:

Here are a few tips to keep in mind when adding custom fields to your Shopify contact form:

• Ensure you only include the information you need. Adding extra fields can clutter your contact form and make it more difficult for customers to use.
• Save a copy of the original contact form’s code. This will allow you to revert to the initial contact form without starting from scratch.
• Test and iterate as needed. It’s essential to test your new contact form on different platforms and devices and make any necessary adjustments based on user feedback.

FAQ

Conclusion

Adding custom fields to your Shopify contact form is a great way to collect additional information from your customers or website visitors. Following the instructions above, you can easily add custom fields to your Shopify contact form without coding experience.

And if you run into any issues, consult a professional Shopify developer for help.