How to Stop the Enter Key From Submitting the Form

Overview

Would you like to stop the Enter key from submitting 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 tutorial will give you the code necessary to disable the Enter key on your forms.

Setup

To disable this key on your forms, just copy this code and add it to your site.

function wpf_dev_stop_enter_submit( ) {
?>
<script type="text/javascript">
  jQuery('form#wpforms-form-721 button').keydown(function (e) {
    if (e.keyCode == 13) {
        var inputs = jQuery(this).parents("form").eq(0).find(":button");
        if (inputs[inputs.index(this) + 1] != null) {                    
            inputs[inputs.index(this) + 1].focus();
        }
        e.preventDefault();
        return false;
    }
});
    </script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_stop_enter_submit', 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.

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

function wpf_dev_stop_enter_submit( ) {
?>
<script type="text/javascript">
  jQuery('form.wpforms-form button').keydown(function (e) {
    if (e.keyCode == 13) {
        var inputs = jQuery(this).parents("form").eq(0).find(":button");
        if (inputs[inputs.index(this) + 1] != null) {                    
            inputs[inputs.index(this) + 1].focus();
        }
        e.preventDefault();
        return false;
    }
});
    </script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_stop_enter_submit', 30 );

And that’s it! You’ve now stopped the Enter key from submitting your form. 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 forms for all fields?

A: You can easily do that by using this code snippet instead.

function wpf_dev_disable_enter_key( ) {
?>
<script type="text/javascript">
    jQuery(function($){
		$("form").keypress(function(e) {
		  //Enter key
		  if (e.which == 13) {
			return false;
		  }
		});        
});
    </script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_enter_key', 30 );