Simple Webflow Form Validation and Secure Submission

Webflow forms can be made more reliable and user-friendly with simple validation and secure handling of form submissions.

1. Basic Form Validation

Use standard HTML attributes for instant, browser-based validation. This helps check if required fields are filled in and if emails are valid, without any extra code.

Example:

<form data-form="contact">  <label for="email">Email:</label>  <input id="email" name="email" type="email" required>  <button type="submit">Send</button>  <div id="form-message" aria-live="polite"></div></form>
  • type="email": Checks for valid email format.
  • required: Makes the field mandatory.

Try this out in different browsers to see how each browser handles these native validations.

2. Show Simple Error Messages

To provide a friendlier message if the email is not valid, add a small script:

const form = document.querySelector('[data-form="contact"]');if (form) {const email = form.querySelector('input[type="email"]');email.addEventListener('input', function() {email.setCustomValidity(''); // Clear any custom messageif (!email.checkValidity()) {email.setCustomValidity('Please enter a valid email address.');    }  });form.addEventListener('submit', function(e) {if (!form.checkValidity()) {e.preventDefault(); // Stop form from submittingform.reportValidity(); // Show errors    }  });}

What this does:

  • Shows a helpful message if the email is invalid.
  • Prevents the form from submitting if there are errors.

3. Securely Submit Form Data (Optional)

For extra security, send form data to a server endpoint instead of directly from the browser. This keeps sensitive information safe.

form.addEventListener('submit', function(e) {e.preventDefault();if (!form.checkValidity()) {form.reportValidity();return;  }const button = form.querySelector('button[type="submit"]');button.disabled = true; // Prevent double submissionfetch('/api/contact', {    method: 'POST',    headers: { 'Content-Type': 'application/json' },    body: JSON.stringify({ email: email.value })  })    .then(response => {if (!response.ok) throw new Error('Network error');      document.getElementById('form-message').textContent = 'Thanks! Your message has been sent.';form.reset();    })    .catch(() => {      document.getElementById('form-message').textContent = 'Sorry, something went wrong. Please try again.';    })    .finally(() => {button.disabled = false;    });});

Tips:

  • Do not include private keys or secrets in your browser code.
  • Make sure your server endpoint checks for spam and handles requests securely.

4. Accessibility and User Experience

  • Pair each input with a clear label.
  • Use aria-live="polite" on a message area to read out results to screen readers.
  • Disable the submit button while sending.

5. Frequently Asked Questions

Can I keep using Webflow's normal form submission?

  • Yes, use Webflow's built-in form handling if you don't need special integrations.

How do I prevent spam?

  • Use server-side checks (like timers or simple hidden fields) and never share secret tokens in your client code.

Will this stop browser validation?

  • No, unless you use preventDefault() in your script, the browser will still check the form for you.
Jared Malan