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

[danfar]

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 

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 -%}

<div class="color-{{ section.settings.color_scheme }} gradient">
<div class="contact page-width page-width--narrow section-{{ section.id }}-padding">
{%- if section.settings.heading != blank -%}
<h2 class="title title-wrapper--no-top-margin {{ section.settings.heading_size }}">{{ section.settings.heading | escape }}</h2>
{%- else -%}
<h2 class="visually-hidden">{{ 'templates.contact.form.title' | t }}</h2>
{%- endif -%}
{%- form 'contact', id: 'ContactForm', class: 'isolate' -%}
{%- if form.posted_successfully? -%}
<h2 class="form-status form-status-list form__message" tabindex="-1" autofocus>{% render 'icon-success' %} {{ 'templates.contact.form.post_success' | t }}</h2>
{%- elsif form.errors -%}
<div class="form__message">
<h2 class="form-status caption-large text-body" role="alert" tabindex="-1" autofocus>{% render 'icon-error' %} {{ 'templates.contact.form.error_heading' | t }}</h2>
</div>
<ul class="form-status-list caption-large" role="list">
<li>
<a href="#ContactForm-email" class="link">
{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}
</a>
</li>
</ul>
{%- endif -%}
<div class="contact__fields">
<div class="field">
<input class="field__input" autocomplete="name" type="text" id="ContactForm-name" name="contact[{{ 'templates.contact.form.name' | t }}]" value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}" placeholder="{{ 'templates.contact.form.name' | t }}" required>
<label class="field__label" for="ContactForm-name">{{ 'templates.contact.form.name' | t }}<span aria-hidden="true">*</span></label>
</div>
<div class="field field--with-error">
<input
autocomplete="email"
type="email"
id="ContactForm-email"
class="field__input"
name="contact[email]"
spellcheck="false"
autocapitalize="off"
value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
aria-required="true"
{% if form.errors contains 'email' %}
aria-invalid="true"
aria-describedby="ContactForm-email-error"
{% endif %}
placeholder="{{ 'templates.contact.form.email' | t }}"
>
<label class="field__label" for="ContactForm-email">{{ 'templates.contact.form.email' | t }} <span aria-hidden="true">*</span></label>
{%- if form.errors contains 'email' -%}
<small class="contact__field-error" id="ContactForm-email-error">
<span class="visually-hidden">{{ 'accessibility.error' | t }}</span>
<span class="form__message">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</span>
</small>
{%- endif -%}
</div>
</div>

<label for="contact-time">Select your Symptoms Section A</label><br>

<input type="checkbox" name="contact[Oral thrush A]" value="Oral thrush A">
<label for="Oral thrush A"><a href="https://google.com/">Oral thrush A </a></label><br>

<input type="checkbox" name="contact[Oral thrush B]" value="Oral thrush B">
<label for="Oral thrush B"><a href="https://ebay.com/">Oral thrush B </a></label><br>

<input type="checkbox" name="contact[Oral thrush C]" value="Oral thrush A">
<label for="Oral thrush C"><a href="https://amazon.com/">Oral thrush C </a></label><br>

<input type="checkbox" name="contact[Oral thrush D]" value="Oral thrush D">
<label for="Oral thrush D"><a href="https://google.com/">Oral thrush D </a></label><br>

<input type="checkbox" name="contact[Oral thrush E]" value="Oral thrush E">
<label for="Oral thrush E"><a href="https://ebay.com/">Oral thrush E </a></label><br>

<input type="checkbox" name="contact[Oral thrush F]" value="Oral thrush F">
<label for="Oral thrush F"><a href="https://amazon.com/">Oral thrush F </a></label><br>


<label for="contact-time">Select your Symptoms Section B</label><br>

<input type="checkbox" name="contact[Oral thrush A]" value="Oral thrush A">
<label for="Oral thrush A"><a href="https://google.com/">Oral thrush A </a></label><br>

<input type="checkbox" name="contact[Oral thrush B]" value="Oral thrush B">
<label for="Oral thrush B"><a href="https://ebay.com/">Oral thrush B </a></label><br>

<input type="checkbox" name="contact[Oral thrush C]" value="Oral thrush A">
<label for="Oral thrush C"><a href="https://amazon.com/">Oral thrush C </a></label><br>

<input type="checkbox" name="contact[Oral thrush D]" value="Oral thrush D">
<label for="Oral thrush D"><a href="https://google.com/">Oral thrush D </a></label><br>

<input type="checkbox" name="contact[Oral thrush E]" value="Oral thrush E">
<label for="Oral thrush E"><a href="https://ebay.com/">Oral thrush E </a></label><br>

<input type="checkbox" name="contact[Oral thrush F]" value="Oral thrush F">
<label for="Oral thrush F"><a href="https://amazon.com/">Oral thrush F </a></label><br>

<label for="contact-method">Radio Option?</label><br>
<input type="radio" name="contact[contact_method]" value="email" id="email"><label for="Yes">Yes </label><br>
<input type="radio" name="contact[contact_method]" value="phone" id="phone"><label for="No">No</label><br>
<input type="radio" name="contact[contact_method]" value="text message" id="text"><label for="I Dont know">I Dont Know</label>

<label for="contact-method">Radio Option?</label><br>
<input type="radio" name="contact[contact_method]" value="email" id="email"><label for="Yes">Yes </label><br>
<input type="radio" name="contact[contact_method]" value="phone" id="phone"><label for="No">No</label><br>
<input type="radio" name="contact[contact_method]" value="text message" id="text"><label for="I Dont know">I Dont Know</label>

<label for="contact-method">Radio Option?</label><br>
<input type="radio" name="contact[contact_method]" value="email" id="email"><label for="Yes">Yes </label><br>
<input type="radio" name="contact[contact_method]" value="phone" id="phone"><label for="No">No</label><br>
<input type="radio" name="contact[contact_method]" value="text message" id="text"><label for="I Dont know">I Dont Know</label>

<div class="field">
<input class="field__input" type="text" id="SUBJECT" name="contact[SUBJECT]" placeholder="SUBJECT"required>
<label class="field__label" for="SUBJECT">SUBJECT<span aria-hidden="true">*</span></label>
</div>

<div class="field">
<textarea
rows="10"
id="ContactForm-body"
class="text-area field__input"
name="contact[{{ 'templates.contact.form.comment' | t }}]"
placeholder="{{ 'templates.contact.form.comment' | t }}"
required>
{{- form.body -}}
</textarea>
<label class="form__label field__label" for="ContactForm-body">{{ 'templates.contact.form.comment' | t }}<span aria-hidden="true">*</span></label>
</div>
<div class="contact__button">
<button type="submit" class="button">
{{ 'templates.contact.form.send' | t }}
</button>
</div>
{%- endform -%}
</div>
</div>

{% 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 %}

[Jahid-KlinKode]

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: