Enterキーでフォームを送信しないようにする方法

フォームのEnterキーを無効にしたいですか?このキーを無効にすべきか否かについては多くの議論がありますが、もしあなたがこのキーを無効にすることがあなたのサイトにとって最善であると判断したのであれば、この記事ではフォームのEnterキーを無効にするために必要なコードを提供します。

エンターキーを無効にする

送信ボタン、次ページ/前ページボタン、フォームのフィールドを移動するためのEnterキーを含むフォームでこのキーを無効にするには、このコードをコピーしてサイトに追加するだけです。

あなたのサイトにスニペットを追加する方法と場所についてサポートが必要な場合は、こちらのチュートリアルをご覧ください。

このコードは会話型フォームには 使えませんのでご注意ください。

標準的なキーボードのEnterキーを表す数字を配置する必要がある。この数字が13で表されることはすでに知っているが、これらの数字とそれが表すものについてもっと知りたい場合は、こちらのドキュメントを参照されたい。

特定のWPFormsフォームに対して

/**
 * 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 );

上記のコードはフォームIDwpforms-form-721をターゲットにしています。自分のフォームIDに合わせてこのコードを変更する必要があります。

フォームIDの見つけ方についてヘルプが必要な場合は、こちらのチュートリアルをご覧ください。

すべての WPForms フォーム

ただし、すべてのWPFormsフォームにこの機能を追加したい場合は、以下のコードを使用してください。

/**
 * 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 );

このキーを無効にするのに必要なのはこれだけです。送信ボタンの色も変更したいですか？送信ボタンの色を変更する方法のチュートリアルをご覧ください。

参考アクション

wpforms_wp_footer_end

よくあるご質問

Q: 改ページ時に「次へ」ボタンを無効にする方法を教えてください。

A:WPFormsのPage Breakフィールドを使用しているときにNextとPreviousボタンを無効にするには、次のスニペットを使用してください。

/**
 * 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: 自分のサイトのすべてのフォームでEnterキーを無効にしたい場合はどうすればよいですか？

A:このスニペットは、WPFormsフォームかWordPressコメントフォームかに関係なく、キーを無効にします。

/**
 * 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: SpaceキーとEnterキーでフォームを送信できないようにできますか？

A: もちろんです！代わりにこのスニペットを使ってください。

/**
 * 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 );