Simple Webflow Form Validation and Secure Submission

Learn how to easily validate Webflow forms using built-in browser features, display clear error messages, and safely send form data using a secure server endpoint. This guide covers basic code and best practices, with no advanced features or third-party libraries required.

Published April 14, 2026

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 message
    if (!email.checkValidity()) {
      email.setCustomValidity('Please enter a valid email address.');
    }
  });

  form.addEventListener('submit', function(e) {
    if (!form.checkValidity()) {
      e.preventDefault(); // Stop form from submitting
      form.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 submission

  fetch('/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.