First things first, log in to your Webflow account. Then, open up the project where you want to add some custom form validation magic.

Head over to the page where you want your form. Just drag and drop the Form element from the Add Elements panel right into the spot you want on the canvas. Easy peasy.

Now, let's make that form yours. Customize the fields to fit your needs. Add input fields, checkboxes, radio buttons, whatever you need. And don't forget to name them properly.

Time to give your form an ID. This makes it easier to reference in your custom validation script. Click on the form wrapper, go to the Settings panel, and under Form Settings, add an ID like customForm.

Before you close the project, open the Page Settings by clicking the gear icon next to your page name. Scroll down to the "Custom Code" section and pop in your custom JavaScript for validation.

Here's a little snippet to get you started:

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const form = document.getElementById('customForm');

    form.addEventListener('submit', (event) => {
      let valid = true;

      // Example: Check if a field with ID 'requiredField' is empty
      const requiredField = document.getElementById('requiredField');
      if (requiredField.value.trim() === '') {
        valid = false;
        // Show your custom error message (e.g., by adding a class to display an error)
        requiredField.classList.add('error');
      } else {
        requiredField.classList.remove('error');
      }

      // Prevent the form from submitting if validation fails
      if (!valid) event.preventDefault();
    });
  });
</script>

Swap out the IDs and conditions with whatever your specific validation needs are.

You can style error messages or the input fields that didn't pass validation by adding some custom CSS. For example:

<style>
  .error {
    border: 2px solid red;
  }
</style>

Make sure to either include this CSS in the Style section of your page or add it to the global CSS file.

Publish your website and give that form a whirl. Test it out with different inputs to make sure the validation is working as it should.

If you run into any issues, use the console in your browser's Developer Tools to debug the JavaScript. Tweak the validation logic as needed to cover all edge cases and make the user experience as smooth as butter.