Creating a custom Contact Form

Solved
Highlighted
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
Highlighted
Shopify Partner
644 131 152

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.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
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
Highlighted
Shopify Partner
644 131 152

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.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
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

Success.

Shopify Partner
644 131 152

You form code is here 

Snippets->include-contact-form.liquid

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