Create a Contact us Survey form using the contact us liquid code page

Store Design
, , ,
1

I need help to create a new Survey form,

  1. I created a new survey-form.liquid how to I link it to a page?

  2. Here is the code for the liquid file I want Select your Symptoms Section A and Select your Symptoms Section B checkbox to be two columns and as the user selects the check boxes the Label URL should be captured in the email form.

  3. The users should get CC’d along with all the info they selected including URL for each checkbox

  4. if its not too difficult maybe break this into two pages once they fill out instead of Submit it says Next page then on Page 2 we have the Submit button

attached is a visual

survey form.jpg
survey form.jpg888×750 36.6 KB

please style as default Dawn theme

Thanks

{{ ‘section-contact-form.css’ | asset_url | stylesheet_tag }}

{%- style -%}
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

{%- if section.settings.heading != blank -%}

{{ section.settings.heading | escape }}

{%- else -%}

{{ 'templates.contact.form.title' | t }}

{%- endif -%} {%- form 'contact', id: 'ContactForm', class: 'isolate' -%} {%- if form.posted_successfully? -%}

{% render 'icon-success' %} {{ 'templates.contact.form.post_success' | t }}

{%- elsif form.errors -%}

{% render 'icon-error' %} {{ 'templates.contact.form.error_heading' | t }}

{%- endif -%}
{{ 'templates.contact.form.name' | t }}*
{{ 'templates.contact.form.email' | t }} * {%- if form.errors contains 'email' -%} {{ 'accessibility.error' | t }} {% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }} {%- endif -%}

Select your Symptoms Section A

Oral thrush A
Oral thrush B
Oral thrush C
Oral thrush D
Oral thrush E
Oral thrush F

Select your Symptoms Section B

Oral thrush A
Oral thrush B
Oral thrush C
Oral thrush D
Oral thrush E
Oral thrush F

Radio Option?

Yes

No

I Dont Know

Radio Option?

Yes

No

I Dont Know

Radio Option?

Yes

No

I Dont Know

SUBJECT*
{{- form.body -}} {{ 'templates.contact.form.comment' | t }}*
{{ 'templates.contact.form.send' | t }}
{%- endform -%}

{% schema %}
{
“name”: “t:sections.contact-form.name”,
“tag”: “section”,
“class”: “section”,
“settings”: [
{
“type”: “text”,
“id”: “heading”,
“default”: “Contact form”,
“label”: “Heading”
},
{
“type”: “select”,
“id”: “heading_size”,
“options”: [
{
“value”: “h2”,
“label”: “t:sections.all.heading_size.options__1.label”
},
{
“value”: “h1”,
“label”: “t:sections.all.heading_size.options__2.label”
},
{
“value”: “h0”,
“label”: “t:sections.all.heading_size.options__3.label”
}
],
“default”: “h1”,
“label”: “t:sections.all.heading_size.label”
},
{
“type”: “select”,
“id”: “color_scheme”,
“options”: [
{
“value”: “accent-1”,
“label”: “t:sections.all.colors.accent_1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.all.colors.accent_2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.all.colors.background_1.label”
},
{
“value”: “background-2”,
“label”: “t:sections.all.colors.background_2.label”
},
{
“value”: “inverse”,
“label”: “t:sections.all.colors.inverse.label”
}
],
“default”: “background-1”,
“label”: “t:sections.all.colors.label”
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 36
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 36
}
],
“presets”: [
{
“name”: “t:sections.contact-form.presets.name”
}
]
}
{% endschema %}

2

Hey @danfar , get the solution you need for customizing your Shopify contact form with text, dropdowns, radio buttons, and checkboxes. Watch the step-by-step tutorial here: