Solved

Can you create a custom Contact Form separate from the default in Shopify?

me-moringa-usa
Tourist
13 0 1

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. 

Accepted Solution (1)
Developer-G
Shopify Partner
3046 596 848

This is an accepted solution.

You form code is here 

Snippets->include-contact-form.liquid

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

View solution in original post

Replies 12 (12)

Developer-G
Shopify Partner
3046 596 848

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

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
me-moringa-usa
Tourist
13 0 1

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

Developer-G
Shopify Partner
3046 596 848

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.


- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
me-moringa-usa
Tourist
13 0 1

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 ?

Developer-G
Shopify Partner
3046 596 848

This is an accepted solution.

You form code is here 

Snippets->include-contact-form.liquid

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
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?

 

 

Developer-G
Shopify Partner
3046 596 848

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

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
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?

 

 

Developer-G
Shopify Partner
3046 596 848

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

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
MariaStef111
Tourist
21 0 3

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
Tourist
21 0 3

Hi Guleria,

 

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

Screenshot 2021-01-27 at 10.17.48.png

dongfull
Tourist
7 0 4

nice