チェックボックスフォームフィールドに「すべて選択」オプションを追加する方法

はじめに

チェックボックスフォームフィールドにすべて選択オプションを追加しますか？ 一部のフォームでは、訪問者が選択できるオプションがいくつかあり、ユーザーがすべてのオプションをすばやく選択できるように簡単なオプションを提供したい場合があります。

デフォルトでは、チェックボックスフォームフィールドを使用する場合、好きなだけ多くのオプションを選択できます。ただし、手動で選択する必要があります。チェックボックスですべてのオプションを一括選択するオプションを提供することで、フォームの完了時間を節約できます。

このチュートリアルでは、小さなコードスニペットを使用して、これがどれほど簡単であるかを示します。

フォームの作成

まず、新しいフォームを作成し、すべてのオプションを含むチェックボックスフォームフィールドをフォームに追加する必要があります。フォームの作成にヘルプが必要な場合は、このドキュメントを参照してください。

このチュートリアルでは、すべてのものの最初のチェックボックスオプションをフォームの上部に配置します。

すべて選択オプションのスニペットを追加する

次に、特定のオプションがクリックされたときに、すべてのチェックボックスオプションを選択できるようにするスニペットをサイトに追加する時間です。

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

/**
 * Add a select all option to the checkbox
 *
 * @link https://wpforms.com/developers/how-to-add-a-select-all-option-to-a-checkbox-form-field/
 */
 
function wpf_dev_select_all() {
    ?>
    <script type="text/javascript">
		
		// Look for the form ID (-3535-), field ID (_8), and the first option inside the checkbox (_1)
		// Find these ids by viewing this tutorial https://wpforms.com/developers/how-to-locate-form-id-and-field-id/
        jQuery( "#wpforms-3535-field_8_1" ).change(function(){
            var $this = jQuery(this),
                $list = $this.closest( 'ul' );
            if ( $this.is( ':checked' ) ) {
                $list.find( 'li' ).addClass( 'wpforms-selected' );
                $list.find( 'input' ).prop( 'checked', true );
            } else {
                $list.find( 'li' ).removeClass( 'wpforms-selected' );
                $list.find( 'input' ).prop( 'checked', false );
            }
        });
		
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_select_all', 10 );

上記のコードスニペットでは、#wpforms-3535-field_8_1に気づくでしょう。この行は、フォームとフィールドのIDだけでなく、すべて選択を表すオプションも表します。

各番号が何を表すかを示すために、そのコード行を分解しましょう。

• #wpforms-3535。3535はフォームIDを表します。
• -field_8。8はフィールドIDを表します。
• _1。最後の番号は、リスト内のすべて選択オプションが表示される場所です。それを最初のオプションとして追加した場合、それは常に1になります。チェックボックスに20個のオプションを追加し、すべて選択オプションを最後のオプションにした場合、この番号は20になります。

フォームまたはフィールドIDの検索にヘルプが必要な場合は、このチュートリアルを確認してください。

これで、訪問者はフォームのすべてのオプションを簡単に選択できるようになりました。

チェックボックスオプションに画像を使用しますか？ CSSを使用してチェックボックスラベルに画像を適用する方法のチュートリアルをご覧ください。

関連

アクション参照: wpforms_wp_footer_end

よくある質問

Q: チェックボックスフィールドの画像選択を使用する場合、このスクリプトを使用できますか？

A:もちろんです！これは、画像と非画像のチェックボックスフォームフィールドの両方で機能します。

Q: フォーム通知で、すべて選択オプションを除外するにはどうすればよいですか？

A:すべて選択オプションを除外するには、追加のコードスニペットを追加する必要があります。

/**
 * Exclude select all option from the email notifications
 *
 * @link https://wpforms.com/developers/how-to-add-a-select-all-option-to-a-checkbox-form-field/
 */

function wpf_dev_process_filter( $fields, $entry, $form_data ) {
	
    // Only run on my form with ID = 3535
    if( $form_data[ 'id' ] != 3535 ) {
        return $fields;
    }
	
	// Enter the text for the select all option
	$select_all_option = 'ALL THE THINGS';
	
	// Enter the field ID for the checkbox with the select all option
	$checkboxes_field_id = 8;
	
	if( strpos(  $fields[ $checkboxes_field_id ][ 'value' ], $select_all_option ) !== false ){

		$fields[ $checkboxes_field_id ][ 'value' ] = str_replace( $select_all_option, '', $fields[ $checkboxes_field_id ][ 'value' ] ); 
		
		$fields[ $checkboxes_field_id] [ 'value_raw' ] = str_replace( $select_all_option, '', $fields[ $checkboxes_field_id] [ 'value_raw' ] ); 
	}
	
	return $fields;
}

add_filter( 'wpforms_process_filter', 'wpf_dev_process_filter', 10, 3 ); 

他のスニペットと同様に、ALL THE THINGS のテキストを、すべて選択オプションに設定したテキストに合わせて変更する必要があることを覚えておいてください。また、$checkboxes_field_id はチェックボックスに使用されるフィールドIDです。フィールドIDの見つけ方がわからない場合は、こちらのチュートリアルをご覧ください。