How do I make additional fields required in the Contact form?

[Marianna_YTTG]

Hello Shopify Community!

It seems that the validation for the email field in Contact form happens server side in Dawn. Is there an easy way to extend that to other form fields? I would like to make other form fields required. I need to make this happen on a 3rd-party theme, but if there is a way to tap into server-side validation, I imagine it would be the same for any theme. I already reached out to the theme support, but they don't have any front-end validation built in

I know I could add “required” attribute to the input fields, but that would use built in browser validation, which looks different than the existing email field validation. I'd like to have a similar look and feel for other fields validation errors. Is there a way to achieve this without adding custom JS / CSS?

Thank you for your thoughts,

Marianna

[_Ecom_Boss]

Yes, you can extend the server-side validation appearance to other standard fields by checking form.errors in Liquid and adding error messages/styling like Dawn does, no JS needed. But for full control or custom fields, minimal JS would still give the best UX.

[Marianna_YTTG]

Thanks for responding _Ecom_Boss,

The docs say that only email field is required for the contact form. So I am assuming that  form.errors  will not contain errors for other form fields.

https://shopify.dev/docs/storefronts/themes/customer-engagement/add-contact-form#required-input

Seems like using built in browser validation or adding some JS is the way to go. Thought that there might be a way to tap into the existing Shopify form validation mechanism.

[_Ecom_Boss]

You’re right Shopify only validates the email field server-side, so form.errors won’t catch other fields.
To handle validation for fields like name and message, you can add the required attribute directly in your form inputs for basic browser validation. If you want stronger checks (like minimum length), you can add a simple JavaScript function to validate before submission.

Are familiar with coding?

[_Ecom_Boss]

You can drop this into your shopify theme to make extra fields like name and message

<form method="post" action="/contact#contact_form" id="contact_form">
<input type="text" name="contact[name]" placeholder="Your Name" required>
<input type="email" name="contact[email]" placeholder="Your Email" required>
<textarea name="contact[body]" placeholder="Your Message" required></textarea>
<button type="submit">Send</button>
</form>

[Marianna_YTTG]

Thanks _Ecom_Boss!

Yes, I am familiar with coding. Yes, this is what I did, but not 100% happy with how it looks.

I just need the basic required validation. I guess the only way to achieve the same look and feel is to add JS and CSS to display those additional errors. Thought maybe there is an easier way to achieve this with Shopify, but I guess not...

[_Ecom_Boss]

Do you need a helping hand?