Has anyone successfully implemented form validation in Webflow where an input must equal a specific value, displaying a success message if it matches and an error message if it doesn't?

Yes, you can implement custom form validation in Webflow where an input must equal a specific value using a combination of native Webflow structure and custom JavaScript. Here's how to do it.

​

1. Set Up the Form in Webflow

​

• Add a Form Block from the Add panel.
• Inside the form, include:
• A Text Input with a unique ID (e.g., “secret-code”).
• A Submit Button.
• Two Div Blocks: one for the success message and one for the error message. Give them unique class names like “success-msg” and “error-msg”.
• Hide both message Divs initially using Display: None.

​

2. Add Custom JavaScript

​

• Go to Page Settings or use an Embed element at the bottom of the page.
• Add script that:
• Prevents the default form submission.
• Checks if the input value matches a preset string.
• Shows the correct message depending on the result.

​

Example logic (in plain terms, not raw code):

• On form submit:
• Prevent default submission.
• Read value of input with ID "secret-code".
• If it equals your required value (e.g., "PASS123"):
  • Show the success message div.
  • Hide the error message div.
• Else:
  • Show the error message div.
  • Hide the success message div.

​

3. Keep Webflow Form Submission from Proceeding

​

• Make sure your script stops the default form submission using event.preventDefault();.
• If you need to later send data to Webflow or a third-party, use fetch or AJAX.

​

Summary

​

To validate an input against a specific value in Webflow:

• Create a custom form with hidden messages.
• Use JavaScript to intercept the form submission.
• Show the success or error message based on the input value.

This method works well and has been successfully implemented in many Webflow projects.