Customized Contact Form submission not sending / error page appearing

Store Design
,

Topic summary

A user is experiencing an HTTP 400 error when testing a customized contact form on their Shopify store using the Origin theme. The form fails to submit and displays an error message stating “This page isn’t working / If the problem continues, contact the site owner.”

Key Details:

  • The user followed tutorials to create custom form fields
  • Error occurs during form submission testing
  • Code snippet provided shows reversed/corrupted HTML markup

Technical Issue Identified:
The HTML code for the custom fields appears to be written backwards (reversed character order). For example, <label class="field__label" for="ContactForm-City">City</label> is displayed as /<ytiC>"ytiC-mroFtcatnoC"=rof "lebal__dleif"=ssalc lebal<

This reversed markup would prevent the form from functioning properly and likely causes the 400 error. The user is seeking help to identify what went wrong with their code implementation.

Status: Unresolved - awaiting community assistance to fix the code structure.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

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.

HTTP ERROR 400’

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

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

{{ section.settings.heading }}

{%- else -%}

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

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

{% 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 -%}
Company Name
Job Title
Company Regristration Number
UK VAT Number
Company Address
City
Country
Postcode
{{- form.body -}} Please list two trade references here
{{ 'templates.contact.form.send' | t }}
{%- endform -%}

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