How to Prevent Form Submission with Enter in Webflow

Learn how to prevent accidental Webflow form submissions when someone hits Enter.

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to prevent accidental form submissions in Webflow when someone hits Enter.

Example

Press Enter in the fields: nothing happens. The textarea still accepts Enter as usual.

Try Enter in the inputs above

Use case	Problem	Solution
Multi-field form	Enter in the first field submits everything	Block Enter on text inputs
Search form	Enter triggers an unwanted search	Handle Enter manually
Multi-step form	Enter skips steps	Block it and manage progression

The script

document.querySelectorAll('form').forEach(function(form) {
  form.addEventListener('keydown', function(e) {
    if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA') {
      e.preventDefault();
    }
  });
});

Variation: allow Enter only on the last field

To allow submission with Enter only from the last input in the form:

document.querySelectorAll('form').forEach(function(form) {
  var inputs = form.querySelectorAll('input, select');
  var last = inputs[inputs.length - 1];
  form.addEventListener('keydown', function(e) {
    if (e.key === 'Enter' && e.target !== last && e.target.tagName !== 'TEXTAREA') {
      e.preventDefault();
    }
  });
});

good to know

The textarea is excluded from the block because the Enter key should create line breaks in multi-line fields. Make sure your tagName !== 'TEXTAREA' check is included in the script. Without this exception, the user won't be able to create paragraphs in longer responses.

Conclusion

This snippet prevents accidental submissions on complex forms. See also: design frictionless forms.

Good to know

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Let's discuss