Make contact fields mandatory in Dawn 15.0

[crosbyaudio]

Looking to make the contact fields mandatory in Dawn 15.0. Thanks!

https://crosbyaudio.com/pages/contact

[BSSCommerce-B2B]

Hi @crosbyaudio , 

To make the contact form fields mandatory in the Dawn theme (version 15.0), you can do this by modifying the form code. Here's how you can implement this:

1. Go to your Shopify Admin:
• Navigate to Online Store > Themes.
• Find your Dawn theme and click Actions > Edit code.
2. Locate the contact form code: In the Sections folder, find and click on contact-form.liquid (or main-contact.liquid).
3. Add " required " attributes: Find the input fields for the contact form. These fields usually look like this:

<input type="text" name="contact[name]" id="ContactFormName" placeholder="Name">

      4. Make fields mandatory: Add the required attribute to each input field that you want to make mandatory. For example:

<input type="text" name="contact[name]" id="ContactFormName" placeholder="Name" required>
<input type="email" name="contact[email]" id="ContactFormEmail" placeholder="Email" required>
<textarea name="contact[body]" id="ContactFormMessage" placeholder="Message" required></textarea>​

Save the changes: Click Save to apply the changes.

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[crosbyaudio]

My code looks different and I'm not sure where to add it.

<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">

[BSSCommerce-B2B · Accepted solution]

Hi @crosbyaudio , 

Thanks for share your code.

To make fields mandatory in this version of the contact form, you just need to add the required attribute to each relevant <input> tag.

Here’s how you can modify your code:

1. Locate the input tag in each field section.
2. Add the required attribute inside the input tag.

In your case, for the "Name" field, it would look like this:

<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 }}</label>
  </div>
  <div class="field field--with-error">
  ...

Do this for each field you want to make mandatory by adding the required attribute to the corresponding input or textarea tag.

Hope it helps!!