I've followed tutorials and set up a custom contact form with the fields I'd like on there, but when I went to test it I got an error page saying:
This page isn’t working
If the problem continues, contact the site owner.
And the message obviously wont send! I'm using the shopify Origin theme.
Would be really grateful if someone could tell me if I've done something wrong with the code.
This is the code below:
{{ 'section-contact-form.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 800px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
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 inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{{ section.settings.heading }}
</h2>
{%- else -%}
<h2 class="visually-hidden">{{ 'templates.contact.form.title' | t }}</h2>
{%- endif -%}
{%- liquid
assign contact_form_class = 'isolate'
if settings.animations_reveal_on_scroll
assign contact_form_class = 'isolate scroll-trigger animate--slide-in'
endif
-%}
{%- form 'contact', id: 'ContactForm', class: contact_form_class -%}
{%- 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 }}"
>
<label class="field__label" for="ContactForm-name">{{ 'templates.contact.form.name' | t }}</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>
<div class="contact__fields">
<div class="field">
<input
class="field__input"
type="text"
id="ContactForm-Company Name"
name="contact[]"
placeholder="Company Name"
>
<label class="field__label" for="ContactForm-Company Name">Company Name</label>
</div>
<div class="field">
<input
type="text"
id="ContactForm-Job Title"
class="field__input"
name="contact[]"
placeholder="Job Title"
>
<label class="field__label" for="ContactForm-Job Title">Job Title</label>
</div>
</div>
<div class="contact__fields">
<div class="field">
<input
class="field__input"
type="text"
id="ContactForm-Company Registration Number"
name="contact[]"
placeholder="Company Registration Number"
>
<label class="field__label" for="ContactForm-Company Registration Number">Company Regristration Number</label>
</div>
<div class="field">
<input
type="text"
id="ContactForm-UK VAT Number"
class="field__input"
name="contact[]"
placeholder="UK VAT Number"
>
<label class="field__label" for="ContactForm-UK VAT Number">UK VAT Number</label>
</div>
</div>
<div class="contact__fields">
<div class="field">
<input
class="field__input"
type="text"
id="ContactForm-Company Address"
name="contact[]"
placeholder="Company Address"
>
<label class="field__label" for="ContactForm-Company Address">Company Address</label>
</div>
<div class="field">
<input
type="text"
id="ContactForm-City"
class="field__input"
name="contact[]"
placeholder="City"
>
<label class="field__label" for="ContactForm-City">City</label>
</div>
</div>
<div class="contact__fields">
<div class="field">
<input
class="field__input"
type="text"
id="ContactForm-Country"
name="contact[]"
placeholder="Country"
>
<label class="field__label" for="ContactForm-Country">Country</label>
</div>
<div class="field">
<input
type="text"
id="ContactForm-Postcode"
class="field__input"
name="contact[]"
placeholder="Postcode"
>
<label class="field__label" for="ContactForm-Postcode">Postcode</label>
</div>
</div>
<div class="field">
<textarea
rows="10"
id="ContactForm-Trade References"
class="text-area field__input"
name="contact[]"
placeholder="Please list two trade references here"
>
{{- form.body -}}
</textarea>
<label class="form__label field__label" for="ContactForm-Trade References">Please list two trade references here</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",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "inline_richtext",
"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": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"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 %}
