Your Cart is currently empty!
Product update
Coupon
add
Coupon code invalid! Please re-enter!
AJAX loader
You are here: HomeJ! ExtensionsCommercial ExtensionsShopifyHow to Create Contact Us Page & Add Custom Fields to Contact Form in Shopify

Understanding the important of Contact Us page, website developers already made it in any website templates. However, if you want to create by your own or customize the available one, you should learn how to create a Contact Us page. In this article, we concern on creating Contact Us page for Shopify websites, Shopify themes.

How to Create Contact Us Page & Add Custom Fields to Contact Form in Shopify

A contact page can convince clients that you're running a legitimate company that cares about them, especially, if other contact information, such as your email address, phone number or address, are included on the website. Clients will feel safe and secure about placing an order if they know they can reach you if they have any difficulties with the order if you have a Contact Us page.

How to Create Contact Us Page

1. Login to your Shopify theme admin panel and go to Pages, click Add a page:

Install

2. In the Online Store / Pages, find and click button "Add a page"

Install

3. Write in the Title field page name => Select Visible => Select Template: page.contact => Click Save

Install

Setting Customize

After you create Contact Us page successfully, please go to Themes > Customize theme > Click Contact us which you just created at navigation to show Section for this.

At this Section, you can start adjusting like in this image below:

Install

Then, paste the embedded code of Google Map into the field Google Map Code and put the content that you'd like to show as the below image.

Install

Add/Edit Custom Fields to Contact Form

This is the contact form we are going to add/ edit:

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

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

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

3. Tap contact-form.liquid located in the directory.

4.  Look for the Liquid tags below in the code:

{%- form 'contact', id: 'ContactForm' -%}

and


{%- endform -%}

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

5. The contact form code may be located between the Liquid tags that discovered in the previous stage. The default form fields are located here. Each Shopify template is unique, however a contact form field should look somewhat like this:

b

Depending on your selection, the code for your custom fields will be put after, before, or even in between the standard fields. The code you enter will be determined by the sort of form field you wish to produce.

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

Check your front store to view the result

Thanks for reading


See Our Best-selling Shopify Themes 2021:


BROWSE ALL SHOPIFY THEMES

Love all our templates?

Join our membership clubs starting at $49 only for access to all of our templates

Join Now
Home Pricing
Your Cart is currently empty!
Product update
Coupon
add
Coupon code invalid! Please re-enter!
AJAX loader
SearchSupport
Magento Themes Magento Extensions Free Magento Extensions Prestashop Themes Prestashop Modules Magento 2 Themes