Creating a custom Contact Form

[me-moringa-usa]

Is it possible to build a Custom Contact Form - with custom fields, etc - separate from the default Theme contact form? I'm using the Responsive theme. 

[Guleria]

Hello me-moringa-usa,

Yes its possible, more about custom fields you can find here https://help.shopify.com/en/themes/customization/forms/add-fields-to-your-contact-form

Thanks

[me-moringa-usa]

@Guleria thanks for the prompt response !

I should have mentioned, I already checked out that post and I am unable to find any of that code on my end. I don't know how to modify to reflect that. 

[Guleria]

Your existing code is here 

1. From your Shopify admin, go to Online Store > Themes.

2. Then click Actions > Edit code. (active theme)

3.  In the Templates directory, click page.contact.liquid

To create separate form for new page, first create new template under Templates then copy page.contact.liquid code and paste it in newly created template.
After that you can follow reference post and put custom code there.

[me-moringa-usa]

That's the issue ... the code in my page.contact.liquid looks like this: 

{% comment %}
The contents of the page.contact.liquid template can be found in /sections/contact-template.liquid
{% endcomment %}

{% section 'contact-template' %}

That's all there is. And when I reference /sections/contact-template.liquid it doesn't reflect the code as shown in the example. It looks like this: 

<div class="container">

<div class="sixteen columns">
<div class="section clearfix">
<h1>{{ page.title }}</h1>
</div>
</div>

{% include 'include-contact-form' %}

{% if section.settings.wide_display %}
</div>
</div>
{% endif %}

{% if section.settings.map_address != blank %}
{% include 'include-map' %}
{% endif %}

{% unless section.settings.wide_display %}
</div>
{% endunless %}

{% schema %}

{
"name": "Contact form",
"class": "contact-section",
"settings": [
{
"type": "richtext",
"id": "newsletter_richtext",
"label": "Text"
},
{
"type": "header",
"content": "Image"
},
{
"type": "image_picker",
"id": "contact_image",
"label": "Image"
},
{
"type": "select",
"id": "contact_image_position",
"label": "Image position",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "header",
"content": "Map"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Come and visit!"
},
{
"type": "richtext",
"id": "address_and_hours",
"label": "Address and hours",
"default": "<p>123 Fake Street</p><p>Toronto, Canada</p><p>Mon - Fri, 10am - 9pm</p><p>Saturday, 11am - 9pm</p><p>Sunday, 11am - 5pm</p>"
},
{
"type": "text",
"id": "map_address",
"label": "Map address",
"info": "Google Maps will find the exact location"
},
{
"type": "text",
"id": "button_label",
"label": "Map link label",
"default": "Get directions",
"info": "Requires use of API key"
},
{
"type": "select",
"id": "text_alignment",
"label": "Text alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "select",
"id": "map_position",
"label": "Map position",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "range",
"id": "zoom_level",
"min": 1,
"max": 20,
"step": 1,
"unit": "x",
"label": "Map zoom level",
"default": 12
},
{
"type": "checkbox",
"id": "store_hours",
"label": "Show store hours",
"default": true
},
{
"type": "checkbox",
"id": "show_pin",
"label": "Show pin",
"info": "Requires use of API key",
"default": true
},
{
"type": "color",
"id": "info_color",
"label": "Background",
"default": "#ffffff"
},
{
"type": "color",
"id": "info_text_color",
"label": "Text",
"default": "#000000"
},
{
"type": "checkbox",
"id": "wide_display",
"label": "Wide display",
"default": false
},
{
"type": "header",
"content": "Background"
},
{
"type": "text",
"id": "api_key",
"label": "Google Maps API key",
"info": "You’ll need to [register a Google Maps API Key](https://help.shopify.com/manual/using-themes/troubleshooting/map-section-api-key) to display the map"
},
{
"type": "select",
"id": "map_style",
"label": "Map color scheme",
"options": [
{
"value": "default",
"label": "Default"
},
{
"value": "aubergine",
"label": "Aubergine"
},
{
"value": "night",
"label": "Night"
},
{
"value": "retro",
"label": "Retro"
},
{
"value": "silver",
"label": "Silver"
}
],
"default": "default",
"info": "Requires use of API key"
},
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "Displayed if the map isn’t loaded"
}
]
}

{% endschema %}

That said, what is the code I need to include in my new page.contact.liquid template in order to follow the instructions in the article ?

[Guleria · Accepted solution]

You form code is here 

Snippets->include-contact-form.liquid

[MariaStef111]

I have the same request and my page-contact-template.liquid is in Sections.

Does that mean that I need to create a new section, copy-paste the old form and customise then?

[Guleria]

Hello @MariaStef111 ,

Yes but it's not necessary. If you don't  want to make new section then you can make it condition.
Like if page == default contact page include default form fields else include other form which have custom fields.

Thanks

[MariaStef111]

Thank you, I already created the new asset on my duplicated theme. Is there any way I can test it before applying to my live theme?

[Guleria]

Yes click on 
Action => Preview 
or from code editor click on Preview.

[MariaStef111]

I am aware of this way, however first i have to apply the new-contact-template to a page in order to preview it.

If I try to amend from Pages the new asset doesn't appear as the store is linked to the original theme. 

[MariaStef111]

Hi Guleria,

Please, would you be able to tell me what is wrong with the code here and how to fix it?

[dongfull]

nice