Creating a custom Contact Form

Solved
me-moringa-usa
Tourist
13 0 0

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. 

0 Likes
Guleria
Shopify Partner
1254 263 344

Hello 

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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate Click here (Its my paypal)
0 Likes
me-moringa-usa
Tourist
13 0 0

@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. 

0 Likes
Guleria
Shopify Partner
1254 263 344

Your existing code is here 

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.


Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate Click here (Its my paypal)
0 Likes
me-moringa-usa
Tourist
13 0 0

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 ?

0 Likes
Guleria
Shopify Partner
1254 263 344

This is an accepted solution.

You form code is here 

Snippets->include-contact-form.liquid

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate Click here (Its my paypal)
MariaStef111
Tourist
21 0 3

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?

 

 

0 Likes
Guleria
Shopify Partner
1254 263 344

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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate Click here (Its my paypal)
0 Likes
MariaStef111
Tourist
21 0 3

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?

 

 

0 Likes
Guleria
Shopify Partner
1254 263 344

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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate Click here (Its my paypal)
0 Likes