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.

How to Prevent Form Submission with Enter in Webflow

Example

The script

Variation: allow Enter only on the last field

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

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials