How to Stop the Enter Key From Submitting the Form

Overview

Would you like to stop the Enter key on your forms? There are many debates if you should or shouldn’t disable this key but if you’ve done your research and have determined it’s best for your site to disable this key, this article will give you the code necessary to disable the Enter key on your forms.

Setup

To disable this key on your forms, which include the submit button, next/previous page buttons as well as using the enter key to navigate through the fields of the form, just copy this code and add it to your site.

If you need any assistance with how and where to add snippets to your site, please check out this tutorial.

Please note that this code will not work for Conversational Forms.

We need to place the numerical number that represents the Enter key on a standard keyboard. we already know that this is represented by the number 13 if you would like to find out more about these numbers and what they represent, take a look at this documentation.

For a specific WPForms form

/**
 * Disable the Enter key on a specific form 
 *
 * @link https://wpforms.com/developers/how-to-stop-the-enter-key-from-submitting-the-form/
 */

function wpf_dev_disable_enter_specific_form( ) {
?>

    <script type="text/javascript">
        
        // Only run this snippet on the form ID 721
        jQuery( 'form#wpforms-form-721' ).bind( 'keypress keydown keyup', function(e) {
            if (e.keyCode == 13) {
                e.preventDefault();
            }
        });
        
    </script>

<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_enter_specific_form', 30 );

The above code is targeting specifically the form ID wpforms-form-721. You’ll need to change this code to match your own form ID.

If you need help in where to find your form ID, please review this tutorial.

For all WPForms forms

However, if you’d like to add this for all WPForms forms, use the code shown below.

/**
 * Disable the Enter key WPForms forms
 *
 * @link https://wpforms.com/developers/how-to-stop-the-enter-key-from-submitting-the-form/
 */

function wpf_dev_disable_enter_all_wpforms( ) {
?>

    <script type="text/javascript">
        
        // Run this snippet on all WPForms forms
        jQuery( 'form.wpforms-form' ).bind( 'keypress keydown keyup', function(e) {
            if (e.keyCode == 13) {
                e.preventDefault();
            }
        });
        
    </script>

<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_enter_all_wpforms', 30 );

And that’s all you need to disable this key. Would you like to also change the color of the Submit button? Take a look at our tutorial on How to Change the Submit Button Color.

Action Reference: wpforms_wp_footer_end

FAQ

Q: What if I want to disable the Enter key on all of my site forms?

A: This snippet would disable the key regardless if it’s a WPForms form or the WordPress comment form.

/**
 * Disable the enter key from submitting the form for all forms on this WordPress site
 *
 * @link https://wpforms.com/developers/how-to-stop-the-enter-key-from-submitting-the-form/
 */

function wpf_dev_disable_enter_key_any_form( ) {
?>

    <script type="text/javascript">
        
        // Run this snippet on all WPForms forms
        jQuery( 'form' ).bind( 'keypress keydown keyup', function(e) {
            if (e.keyCode == 13) {
                e.preventDefault();
            }
        });
        
    </script>

<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_enter_key_any_form', 30 );