How to modify the Contact Form in Dawn Theme?

sabtsmith · June 21, 2022, 10:11pm

Hello,

How can I make the following changes to my Contact Form?

Make ‘Name’ and ‘Comment’ fields required.
Remove ‘Phone Number’ field.

Thank you!

AvadaCommerce · June 22, 2022, 12:52am

In order to achieve these, you need to edit the contact form code. To be on the safe side, I suggest you make a duplication of your theme before making any changes to it.

Please go to your Online Stores > Themes > Edit code > Sections > Contact-form.liquid

1. Remove ‘Phone Number’ field.

Remove this code from the file:

2. Make “name” filed required

Find the line that contains id=“ContactForm-name”
Replace this code

with the following code:

3. Make “comment” field required

Find the line with ‘templates.contact.form.comment’

Replace this code

with this one

I tested it in my store and it worked. Hope it helps.

KetanKumar · June 22, 2022, 3:57am

@sabtsmith

oh sorry for that issue if possible to share your contact form code so i will update

sabtsmith · June 22, 2022, 10:30pm

Sure! It’s here ----

{%- 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: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

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

{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}

{%- endif -%}

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

{%- 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”: “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 %}

KetanKumar · June 23, 2022, 6:08am

@sabtsmith

thanks can you please try this code

{{ '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: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

## {{ section.settings.heading | escape }}
{%- 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 }}

- {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}

{%- endif -%}

{%- if form.errors contains 'email' -%}
<small>
{{ 'accessibility.error' | t }}
{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}
</small>
{%- endif -%}

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

sabtsmith · June 23, 2022, 2:23pm

Thank you! That appeared to work. Two follow-up questions:

How do I add the asterisk to show that the ‘Name’ and ‘Comment’ fields are required, similar to how the ‘Email’ field appears?
How can I change the label from ‘Comment’ to ‘Message’?

Thank you!

mmarce · October 26, 2022, 2:49pm

Would love to see this answered as well, as I’m trying to figure out how to achieve the same. Did you manage to do it, @sabtsmith ? Thks in advance!

sabtsmith · October 29, 2022, 8:02pm

Yes! To make sure I give you the right answer, are you asking about the initial questions below…

Make ‘Name’ and ‘Comment’ fields required.
Remove ‘Phone Number’ field.

…or the follow up questions below:

How do I add the asterisk to show that the ‘Name’ and ‘Comment’ fields are required, similar to how the ‘Email’ field appears?
How can I change the label from ‘Comment’ to ‘Message’?

mmarce · November 2, 2022, 9:17pm

Hi and thank you for getting back to me. I meant the two follow up questions. Thanks!

sabtsmith · November 4, 2022, 5:42am

Here you go!

From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Actions > Edit languages.
Click the tab that includes the text that you want to change.
Edit the text.
Click Save.

More info is here

mmarce · November 4, 2022, 12:42pm

Thank you so much, it worked!

Do happen to know how I can add/remove the asterisks from the fields, depending on whether they’re mandatory or not?

Thank you once again!

Shayan94 · August 31, 2023, 6:48pm

Hello Ketan, I Would like to ask you the same. I have created a custom contact form. but I am unable to get a notification of the fields. I just got “name”, “email”, “country code” and “phone”

My code is this

{%- 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: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

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

{%- else -%}

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

{{ form.errors.translated_fields.email | capitalize }} {{ form.errors.messages.email }}

{%- endif -%}

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

Indoor/Outdoor Sign

Indoor

Outdoor

Approximate size (length/height)

Tell us as much as you can about your new Custom Neon sign

Budget Idea

US Dollars

Canadian Dollars

Upload File

{% comment %}

{% endcomment %}

{%- 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”: “background-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 %}

sophaff · September 1, 2023, 5:59am

Hello! I was wondering if you might be able to help me format the button on the contact form the say ‘SUBMIT’ and be in a heading font, not paragraph. I’m using the Dawn theme. Thanks in advance

Topic		Replies	Views
Add Required Fields to Contact Form Dawn Theme Store Design	6	33	January 24, 2024
How to change 'Comment' to 'Message' in Dawn theme contact form? Store Design	21	50	April 29, 2022
How can I customize the contact form on the Dawn theme? Store Design design , shopify-themes	6	20	June 10, 2023
Dawn Theme - Contact Us Form (Urgent Help needed) Technical Q&A css , html , shopify-theme	2	6	September 4, 2023
Contact Form Dawn Theme - new fields not in theme design Store Design	11	21	September 16, 2022

How to modify the Contact Form in Dawn Theme?

{{ section.settings.heading | escape }}

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

{{ section.settings.heading }}

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

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

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

How to modify the Contact Form in Dawn Theme?

{{ section.settings.heading | escape }}

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

{{ section.settings.heading }}

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

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

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

Related topics