Form Validation
Webflow forms work great, but sometimes you need instant feedback — like showing an error the moment someone skips a required field, or checking that an email looks valid before they submit.
The conversation
You: I have a contact form on my site. I want it to show an error if someone leaves a field empty or enters a bad email address. The form class is .contact-form_component and the input fields are .contact-form_input. The email field is .contact-form_email.
Claude: I’ve added real-time validation to your contact form. Here’s what it does:
- If someone clicks into a field and leaves it empty, a red border and “This field is required” message appear
- The email field also checks for a valid format — it’ll show “Please enter a valid email” if it doesn’t look right
- As soon as someone starts typing a correction, the error disappears
Check your staging site to see it in action.
You: Nice! Can you change the error color to match my brand? It should be a softer red, more like a coral.
Claude: Updated the error styling to a coral tone. Refresh your staging site.
You: Can you also prevent the form from submitting if there are still errors?
Claude: Done. The form now checks all fields on submit. If any are invalid, it stops the submission and scrolls to the first error.
What you get
- Instant feedback when someone leaves a field or enters invalid data
- Errors disappear as the user corrects them
- Works alongside Webflow’s built-in form submission
- Doesn’t change anything in your Webflow design — errors appear dynamically only when needed
Variations you can ask for
“Add phone number validation — only allow numbers and dashes”
“Show a success message when all fields are valid”
“Instead of text below the field, shake the field slightly when it’s invalid”
“Add a character counter to the message textarea”
Webflow setup
Just make sure you know the class names of your form, input fields, and email field. Claude handles everything else.