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.

How-to

1

Create a new section file

From the Shopify admin dashboard you will want to edit the code of your theme.

Open your code editor:

084777276399e9b71c8403de4e545d2f.png

 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"

Press the " Create section" button to continue.

Erase all the default code that's on your new page-contact-custom.liquid file:

Replace all the code with this code (click the link to view all the code):

https://gist.githubusercontent.com/whistlerbrad/de0d6a0f06949f6d95456f9a1580da66/raw/4074a40e79cce940e8be0839be0cb32d20bb45f3/page-contact-custom.liquid

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":

Click on the "Create template" button to continue. 

Erase all the default code that's created:

Paste the following code:

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


Example:

Press the  Save button

3

Choose your new template on a page

In your page manager, create a new page or choose an existing page, then change the page template to " page.contact-alternate":

https://myshopify.com/admin/pages/

4

Customize your form page and add fields

Now, use the Theme Editor - Customize theme

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

beb5141fb42bbf46425dd9ad42ffa90a.pngNavigate to your page with the new template within the Theme Editor: 
The left sections options will change, you should see the Banner option 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. 

Still need help? Contact Us Contact Us