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.
Disabling the enter key
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.
Reference Action
FAQ
Q: How can I disable the Next button when using Page Breaks?
A: To disable the Next and Previous buttons when using the WPForms Page Break field, use this snippet.
/**
* Disable the enter key from going to the next page of a multi page form
*
* @link https://wpforms.com/developers/how-to-stop-the-enter-key-from-submitting-the-form/
*/
function wpf_dev_stop_enter_submit_pagination( ) {
?>
<script type="text/javascript">
jQuery(document)
.off('keydown', '.wpforms-form input')
.on('keydown', '.wpforms-form input', function(e) {
if (e.keyCode === 13) {
e.preventDefault();
e.stopPropagation();
}
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_stop_enter_submit_pagination', 30 );
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( 'wp_footer', 'wpf_dev_disable_enter_key_any_form', 30 );
Q: Can I disable the Space and Enter key from submitting the form?
A: Absolutely! Just use this snippet instead.
/**
* Disable the Enter and Space key on all WPForms forms
*
* @link https://wpforms.com/developers/how-to-stop-the-enter-key-from-submitting-the-form/
*/
function wpf_dev_disable_enter_space_keys_all_wpforms( ) {
?>
<script type="text/javascript">
// Run this snippet on all WPForms forms
jQuery( 'form.wpforms-form' ).bind( 'keypress keydown keyup', function(e) {
// 13 is to prevent the Enter key from submitting the form
// 32 is to prevent the Space bar from submitting the form
if ( e.keyCode == 13 || e.which == 13 || e.which == 32 ) {
e.preventDefault();
return false;
}
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_enter_space_keys_all_wpforms', 30 );