Tutorial: How to create a customized contact form

If you need the ability to add custom form fields in Pipeline, this tutorial will help you setup a new page template with custom form fields.

Example form:

Example of custom form fields available:

NEW:

We've added the option to use the page content above, below or none with the form:

That content comes from your Page editor:

Position setting example:

NEW: 

We've add an additional captcha option. A simple math question to avoid bots from sending spam messages:

Setting example:

How-to

1

Create a new section file

Open your code editor:

https://shopify.com/admin/themes/current

 In the left search type in "page" to filter, scroll down to the " Sections" folder and choose "Add a new section" (Important - you must be in the Sections folder)

Call the new section:

page-contact-custom

Use the Create section button to complete.

Erase all the default code that's generated:

Replace all the code with the code from this file:

OPTION 1

Pipeline 5.0 and higher:
Click to view code

OPTION 2

Earlier versions of Pipeline:
Click to view code

'

Tip: If you have content on your page like an introduction and then the form, use Option 1. If you want to start with the form and then include a map or additional information, use Option 2. 

After you paste the code from the above link, press the Save button.

2

Create a new contact template file

Still in the code editor, scroll up to the Templates folder and choose Add a new template (Important - You must be in the Templates folder)

In the drop-down, choose page and call it:

contact-alternate

Use the Create template button to complete. 

Erase all the default code that's created:

Paste the following code (this replaces all the default code):

{% section 'page-contact-custom' %}

Example:

Save your changes.

3

Choose your new template on a page

In your page manager, create a new page or choose an existing page:

https://shopify.com/admin/pages/

Change the page template to  page.contact-alternate:

4

Customize your form page and add fields

Open your Theme Editor:

https://shopify.com/admin/themes/current/editor

Navigate to your page with the new template within the Theme Editor: 
The left sections options will change, you should see the Contact Form section there to configure.

Click on Contact Form and then "Add content":

The drop-down allows you to add custom form fields. Your form must have at least the "Email field" and one "Text area". The rest are optional. You can add multiple fields except for Email. 

You can customize the form label to provide a title:

You can drag and drop to sort the order of your fields by using six-squares icon on the right:

Save your changes and test your form. Emails are sent to the account setup in your Shopify account settings. 

Important notes to avoid errors when using your custom form

Be sure that you don't leave any label fields blank when adding your form elements in the Theme Editor. The labels are used to submit your form, a blank label will produce an error when trying to submit the form. 

Example:

If this Label field is left blank, it will cause an error.

Enter some default text:

We've seen some merchants leave this blank and using the Checkbox heading as a title. You can still use the Checkbox heading as a title but none of the label fields can be left empty.