Enter Button on Form Submissions

Community resources Getting started
1

Hi, when i’m typing in a form text field i want to be able to hit the “enter” button without sending the form. I’ve created a short example: https://crazy-form-submission.webflow.io/. Also it would be great to design the text field, so that you can start typing at the top, not the middle.

Would be great if anyone can help me :slight_smile:

Thats my read only link: Webflow - Emil Wessolowski's Initial Project

2

Welcome to the forum Dire!

This piece of code will make is so that the forms goes to the next field instead of submitting:

<script>
    $(document).ready(function() {
      $('form input').keydown(function(event) {
        if (event.keyCode === 13) { // Enter key
          event.preventDefault(); // Prevent form submission

          // Get the current input index
          var currentIndex = $('form input').index(this);

          // Focus on the next input field
          $('form input').eq(currentIndex + 1).focus();
        }
      });
    });
  </script>

Be aware that I haven’t selected any class specifically with jQuery, so you might want to narrow that down in the future.

Make sure to place it here:

image
image1122×1199 64 KB

Is for the text field starting at the middle, I’d recommend using a text area instead!

image
image2539×1056 144 KB

3

Using the textarea component should fix the implicit submit as well.
Textareas are designed to be multiline so they process the ENTER key differently.

4

Hey, thanks. Looks like I wasn’t familiar with the text area field :slight_smile: