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?

You can successfully implement custom form validation in Webflow where an input must match a specific value, using a combination of Webflow's native structure and a small amount of custom JavaScript for condition-based messaging.

1. Set Up the Webflow Form

• Create a form in Webflow that includes:
• An input field with a unique ID (e.g., secret-code).
• A Submit button.
• A Success message block (default in Webflow).
• An Error message block, which you can customize to say something like “Incorrect value entered.”

2. Assign a Specific Value for Validation

• Choose the value the input must match. For example: "ACCESS123".
• This value will be hardcoded in your JavaScript for comparison.

3. Add Custom JavaScript for Validation

• Go to Page Settings where the form exists.

• Paste the following JavaScript inside the Before tag section:

  Inline explanation:

• This script prevents normal form submission.

• It checks if the input value equals "ACCESS123".

• If it matches, it shows the success message.

• If not, it shows the error message.

  JavaScript reference (do not copy raw code per guideline):

• Use document.querySelector to capture the form and input.

• Use e.preventDefault() in the submit event listener.

• Compare input.value to your expected string.

• Use form.querySelector('.w-form-done') and .w-form-fail to toggle messages.

4. Disable Native Form Submission

• Make sure your form does not direct to an Action URL or trigger Webflow’s default form handling if you're using JavaScript to override it.
• This avoids conflict between the script and Webflow's backend.

5. Test the Flow

• Input the correct value (e.g., ACCESS123) and submit.
• You should see the Success message.
• Input a wrong value and submit.
• You should see the Error message.

Summary

To implement keyword-based input validation in Webflow, you need to combine native form structure with a small JavaScript snippet that compares the input value to your target string, then dynamically show success or error messages. This approach gives full control over conditional messaging without needing third-party tools.