チェックボックスフィールドの使用

フォームのチェックボックスフィールドの外観を変更しますか? WPForms は、公開されたフォームでこのフィールドの外観と動作をカスタマイズするための多くのオプションを提供します。

注意: WPForms で可能なすべてのフィールドカスタマイズについて知りたいですか?詳細については、フィールドオプションの完全ガイドをご覧ください。

このフォームデモをお試しください!
どのクラブに興味がありますか?
最大2つのクラブを選択できます
ニュースレターサインアップ

注意: チェックボックスフィールドでは、ユーザーは一度に複数のオプションを選択できます。1つのオプションを選択すると自動的に他のオプションが選択解除されるようにしたい場合は、代わりにラジオボタンフィールドを使用することをお勧めします。


以下のオプションを確認する前に、WPForms が WordPress サイトにインストールされ有効化されていることを確認してください。次に、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーを開きます。

ここで、**標準フィールド**セクションの下にある**チェックボックス**を探します。

フォームにチェックボックスフィールドを追加するには、それをクリックするか、フォームビルダーのプレビューエリアにドラッグアンドドロップします。次に、それをクリックしてフィールドオプションを開きます。

checkboxes-field-add

注: WPForms で可能なすべてのフィールド カスタマイズについて知りたいですか? 詳細については、フィールド オプションの完全ガイドをご覧ください。

フィールドラベルと説明の編集

最初に検討すべきフィールドオプションは、ラベルと説明です。

フィールドラベルの変更

デフォルトでは、フィールドのラベルは「チェックボックス」になります。ただし、フィールドオプションパネルに独自のカスタムラベルを入力することで、このテキストを好きなように簡単に変更できます。

チェックボックスフィールドのラベルの編集

説明の追加

フィールドの説明は、チェックボックスフィールドでの選択方法に関する指示など、ユーザーに情報を提供するために役立ちます。

説明を追加するには、フィールドオプションパネルの関連フィールドに入力するだけです。

チェックボックスフィールドに説明を追加する

注意: フォームにテキストを組み込む他の方法について知りたいですか?WPForms に追加テキストを追加するチュートリアルをご覧ください。

選択肢の編集、追加、削除

チェックボックスフィールドの主な機能の1つは、ユーザーが複数の選択肢を選択できることです。フォームで提示する選択肢をカスタマイズする方法は次のとおりです。

チェックボックスの選択肢の編集

チェックボックスのラベルを編集するには、提供されたフィールドに目的のテキストを入力するだけです。

チェックボックスフィールドの選択肢の編集

ラベルの左側にあるチェックボックスをクリックすることで、任意の選択肢を事前選択できます。

チェックボックス項目の事前選択

注意: チェックボックスの事前選択の詳細については、WPForms でフィールドのデフォルト値を設定するチュートリアルを参照してください。

チェックボックスの選択肢の順序を変更したい場合は、アイテムをドラッグアンドドロップして、表示したい順序にします。

チェックボックスの選択肢の追加と削除

チェックボックスフィールドに選択肢を追加するには、既存のオプションの隣にある青い プラス (+) ボタンをクリックします。

新しいチェックボックスの選択肢を追加する

新しい選択肢は、プラス (+) ボタンをクリックしたオプションのすぐ下に表示されます。

注: 選択するとテキストフィールドが表示される「その他」チェックボックスの設定方法を知りたいですか? 条件付きロジックでこれを実現する方法のチュートリアルをご覧ください。

一括追加をクリックすると、複数の選択肢を一度に追加できます。

チェックボックスフィールドのバルク追加オプションを開く

含めたい新しいオプションをそれぞれ新しい行に入力し、新しい選択肢を追加をクリックします。

チェックボックスフィールドに選択肢をバルク追加する

新しい選択肢は、既存の項目のリストの末尾に追加されます。

注: チェックボックスフィールドへの選択肢の追加について、さらにヘルプが必要ですか? 選択フィールドへのオプションの一括追加のチュートリアルをご覧ください。

チェックボックスフィールドから選択肢を削除したい場合は、フィールドオプションパネルでその横にある赤いマイナス(-)ボタンをクリックします。

チェックボックス項目の削除

注: チェックボックスフィールドをボタンのような外観にしたいですか? 開発者向けドキュメントには、CSSを使用してこのフィールドを変換する方法が記載されています。

画像選択肢の使用

必要であれば、チェックボックスフィールドの各選択肢に画像を追加できます。これを行うには、画像を選択肢として使用オプションをオンにします。

チェックボックスフィールドの画像選択肢を有効にする

これにより、チェックボックスフィールドの各選択肢に画像をアップロードボタンが表示されます。ボタンをクリックして、サイトのメディアライブラリまたはコンピューターからそのオプションの画像を選択します。

チェックボックスの画像選択肢の画像アップロードボタン

注意: 画像選択肢は、フォームに追加されるときにトリミングまたはリサイズされません。最適な表示のためには、250px平方以下の画像を使用し、すべての画像サイズが同じであることを確認してください。

画像ファイルを選択すると、そのプレビューがフィールドオプションパネルに表示されます。

チェックボックスの画像選択肢のプレビュー

注: WPFormsで画像を選択肢として使用する方法について、さらに詳しい情報が必要ですか? この機能の完全ガイドをご覧ください。

アイコン選択の使用

チェックボックスフィールドでは、選択肢にアイコンを追加することもできます。この機能を有効にするには、アイコンを選択肢として使用オプションをオンにします。

チェックボックスフィールドのアイコン選択を有効にする

アイコンを選択肢として有効にすると、チェックボックスフィールドの各選択肢にデフォルトのアイコンが追加されます。準備ができたら、デフォルトのアイコンのいずれかをクリックして、好みのアイコンに置き換えます。

チェックボックスフィールドのデフォルトアイコン

次に、アイコンピッカーが表示され、2,000以上のアイコンを閲覧および検索できます。気に入ったアイコンを見つけたら、クリックしてフォームに追加してください。

アイコンピッカーからアイコンを選択

アイコンピッカーからアイコンを選択すると、フォームビルダーに表示されます。

チェックボックスフィールドにアイコンが追加されました

注意: アイコンの選択肢についてさらに詳しく知りたいですか? 詳細については、アイコンの選択肢の使用方法に関するステップバイステップガイドをご覧ください。

WPForms AIによる選択肢の生成

WPForms AIを使用してチェックボックスフィールドに選択肢を追加することもできます。この機能を使用すると、プロンプトに基づいて関連する選択肢をすばやく生成できます。WPForms AIを使用するには、選択肢セクションの下にある選択肢を生成ボタンをクリックするだけです。

選択肢を生成ボタン

注意: WPForms AIで選択肢を生成する方法の詳細については、AI選択肢の使用方法に関するチュートリアルをご覧ください。

フィールドを必須にする

フォームを送信する前にユーザーがチェックボックスフィールドに入力するようにしたい場合は、必須にする必要があります。

一般的なフィールドオプションの下部にある必須設定をオンにするだけです。

チェックボックスフィールドを必須にする

フロントエンドでは、ユーザーがチェックボックスフィールドから選択せずにフォームを送信しようとすると、「このフィールドは必須です」というメッセージが表示されます。

必須チェックボックスフィールド

注: フォームで必須フィールドをスキップした場合にユーザーに表示されるテキストをカスタマイズしたいですか? 検証メッセージの変更に関するチュートリアルをご覧ください。

選択肢のランダム化

フォームが読み込まれるたびにチェックボックスの選択肢をランダムな順序で表示すると、エントリの順序バイアスを防ぐことができます。

チェックボックスの選択肢をランダム化するには、フィールドオプションパネルの高度な設定タブをクリックします。

チェックボックスフィールドの詳細フィールドオプションにアクセスする

次に、ランダムな選択肢設定をオンにします。

チェックボックスフィールドの選択肢をランダム化する

注意: 詳細については、チェックボックスおよび複数選択フィールドの選択肢をランダム化する方法に関する完全なチュートリアルをご覧ください。

チェックボックスを複数列レイアウトで表示する

チェックボックスフィールドに多くの選択肢が含まれている場合、それらを複数列レイアウトで整理すると、スペースをあまり取らなくなるため便利です。

選択肢のレイアウトドロップダウンを使用して、チェックボックスを1列、2列、または3列に配置できます。

2列のチェックボックス選択肢レイアウトを選択する

または、インラインオプションを選択して、すべての選択肢を1行に表示することもできます。1行に収まらないほどの選択肢がある場合は、次のように新しい行に折り返されます。

チェックボックスフィールドのインラインスタイル

注意: 詳細については、チェックボックスフィールドの複数列レイアウトの作成に関するチュートリアルをご覧ください。

チェックボックスの選択肢を制限する

デフォルトでは、チェックボックスフィールドではユーザーは好きなだけ多くの選択肢を選択できます。ユーザーが選択できるオプションの数を制限したい場合は、フィールドオプションの詳細設定にある選択肢の制限フィールドに数値を入力できます。

チェックボックスフィールドの選択肢制限を設定する

注意: このフィールドオプションの詳細については、チェックボックスの選択肢の制限に関するチュートリアルをご覧ください。

チェックボックスの動的選択肢を使用する

チェックボックスフィールドは、サイトのデータ(タクソノミーや投稿タイトルなど)を使用して、選択肢を動的に設定できます。

このオプションを有効にするには、動的な選択肢ドロップダウンから投稿タイプまたはタクソノミーのいずれかを選択します。

チェックボックスフィールドの動的選択肢を設定する

注意: 動的な選択肢の設定方法について、さらにガイダンスをお探しですか?WPFormsで動的な値を使用する方法に関するステップバイステップのチュートリアルですべての詳細をご覧ください。

フィールドラベルを非表示にする

最後に、チェックボックスフィールドのラベルをフロントエンドに表示したくない場合は、フィールドオプションパネルの詳細タブにあるラベルを非表示設定をオンにします。

チェックボックスフィールドのラベルを非表示にする

注意: フロントエンドでフィールドのラベルを非表示にする場合でも、一般的なフィールドオプションにラベルを含めることをお勧めします。これにより、フォームのエントリでフィールドを識別するのに役立ちます。

免責事項または利用規約の表示を有効にする

多くのフォームでは、ユーザーに利用規約を読んだこと、または免責事項を認識したことを確認するように求めているため、WPFormsを使用すると、ユーザーがクリックして確認するためのチェックボックスを簡単に追加できます。

この機能をオンにするには、免責事項/利用規約表示を有効にするオプションを「オン」の位置に切り替えます。

チェックボックスフィールドの利用規約オプションを有効にする

一般的なフィールドオプションの説明フィールドを使用して、規約をリストしたり、免責事項を共有したりします。次に、「利用規約に同意します」または「以下の免責事項を認識します」のようなラベルの付いた単一の選択肢を追加します

フロントエンドでは、フィールドの説明のテキストが、単一のチェックボックスの下にある白いボックスに表示されます。

利用規約チェックボックスの例

注意: 利用規約または免責事項チェックボックスの設定方法の詳細については、この機能に関する完全なチュートリアルをご覧ください。

よくある質問

これらは、チェックボックスフィールドに関して受けるトップの質問の一部への回答です。

チェックボックスのラベルに動的なデータを表示するにはどうすればよいですか?

スマートタグを使用して、チェックボックスのラベル内に動的なデータを含めることができます。これには、チェックボックスのラベルでスマートタグの処理を直接有効にするPHPスニペットが必要です。実装方法の手順については、開発者ドキュメントを参照してください。

WPFormsのチェックボックスフィールドで選択肢の最小数を設定するにはどうすればよいですか?

チェックボックスフィールドで選択肢の最小数を強制するには、JavaScriptスニペットを利用できます。これにより、フォームを送信する前にユーザーが選択する必要がある選択肢の最小数を指定できます。これは、最低限のエンゲージメントが必要なアンケートやフォームに特に役立ちます。

この機能の実装手順については、開発者ドキュメントを参照してください。

これで、WPFormsのチェックボックスフィールドで利用可能なすべてのオプションがわかりました。

次に、チェックボックスフィールドでのユーザーの選択に基づいて、フォームの他のフィールドを表示または非表示にしますか?WPFormsでのスマート条件付きロジックの使用について必ずお読みください。

最高のWordPressドラッグアンドドロップフォームビルダープラグイン

簡単、高速、安全。WPFormsを信頼する600万人以上のウェブサイト所有者に加わりましょう。