チェックボックス入力: フォームで複数選択を有効にする

  • 更新日 Nov 11, 2025
  • 公開日 Nov 4, 2025
  • 1 分で読めます
Prev Next

ClickFunnels の Checkbox Input 要素は、フォームに追加できる標準の HTML チェックボックス (<input type="checkbox">) を表します。この要素は、フォームを送信する前に利用規約に同意するなど、ユーザー契約や設定を取得するのに役立ちます。この記事では、チェックボックス入力要素で使用できる設定およびカスタマイズオプションについて説明します。

必要条件

  • アクティブなClickFunnelsアカウント

  • ワークスペースで作成されたページ

手記：

ClickFunnels では、電子メール アドレスや電話番号なしでフォームを送信できます。ただし、電子メールまたは電話番号がないと、ワークスペースに連絡先レコードは作成されません。連絡先レコードを生成するには、ClickFunnels ではこれらの識別子の少なくとも 1 つが必要なため、フォームに電子メール アドレスまたは電話番号フィールドを含めます。メールアドレスのない連絡先は匿名として分類されます。さらに、ClickFunnels内のワークフローまたはブロードキャストを通じて通信を送信するには、電子メールアドレスを収集する必要があります。

ページエディタでのチェックボックス入力要素の追加

  1. ページエディタ内で、要素を 配置するセクション を追加します。

  2. そのセクション内に 行 を追加します。

  3. 行内のオレンジ色の + プラスまたは [新しい要素を追加 ] ボタンをクリックして、新しい要素を挿入します。

  4. [ フォーム] カテゴリから、[ チェックボックス入力 ] 要素を選択します。

チェックボックス入力要素を追加すると、ページ デザインに合わせて外観をカスタマイズできます。

テキストコンテンツの編集

テキスト要素を追加したら、テキスト ブロック内をクリックしてそのコンテンツを簡単に編集できます。この編集動作は、見出し、小見出し、段落、その他のテキスト要素全体で一貫しています。クリックするとテキストカーソルが表示され、コンテンツを直接入力または貼り付けることができます。

テキストクイックツールバー:

ClickFunnels ページ エディターでテキスト要素 (見出しや段落など) 内をクリックすると、編集領域のすぐ上に テキスト クイック ツールバー が表示されます。このツールバーは、コンテンツに便利な書式設定とパーソナライゼーションのオプションを提供します。利用可能なオプションは次のとおりです。

手記：

テキストクイックツールバーは、見出し、小見出し、段落、箇条書きリストなど、すべてのテキストベースの要素に対して一貫して表示されます。入力または編集すると自動的に表示され、書式設定オプションにすばやくアクセスできます。

  1. 太字、斜体、下線、取り消し線: これらのオプションを使用すると、選択したテキストに太字、斜体、下線、取り消し線のスタイルをすばやく適用して、テキストを目立たせたり、重要なポイントを強調したりすることができます。

  2. テキストの配置: テキストの配置を左、中央、または右に設定できます。

  3. ハイパーリンク: ハイパーリンクを作成および管理するには、次の手順に従います。

    • ハイパーリンクするテキストを選択し、表示されたフィールドに URL を貼り付け ます。

    • 矢印アイコンをクリックして、リンクを同じタブで開くか、新しいタブで開くかを選択します。

    • カラーピッカーを使用して、ハイパーリンクの色を変更し、デザインに合わせます。

    • 選択したテキストがリンクされている場合は、 リンク解除チェーンアイコン をクリックしてハイパーリンクを削除します。

    • ベルのアイコンをクリックして、クリックイベントリスナーのリンクを解除します。これは、リンクのクリックによって自動化がトリガーされているが、この特定のリンクをそれらのアクションのトリガーから除外する場合に便利です。コンテンツ内に外部参照、ボタン、または行動喚起を追加する場合に特に便利です。

  4. 動的連絡先属性: 矢印アイコンを使用すると、 購読者の名などの動的コンテンツを挿入できます。この機能は、注文確認やサンキューページなどのページをパーソナライズするのに役立ちます。たとえば、お礼のメッセージに連絡先の名を使用すると、パーソナライズされたタッチが追加されます。

  5. 設定: 設定アイコンをクリックすると、詳細な設定パネルが開き、さらにカスタマイズできます。

  6. AIテキスト生成: AI アイコンを使用すると、マーケティング AI を使用してコンテンツを生成できます。この機能を使用すると、見出し、行動喚起、またはその他のテキスト要素のコピーを作成する際にサポートが必要な場合に、ページのテキストをすばやく作成できます。

チェックボックス入力要素のカスタマイズ

要素にカーソルを合わせると、その境界線がオレンジ色で強調表示されます。要素の設定にアクセスするには、歯車⚙️アイコンをクリックするか、要素を直接クリックします。

上マージン

「上余白」設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。

デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。

チェックボックス設定の構成

チェックボックス入力要素には、その動作と機能を制御するためのいくつかの設定が含まれています。

  • 入力タイプ: タイプを [カスタムタイプ] として選択します。カスタムタイプオプションを使用すると、「用語」や「ニュースレターサインアップ」など、特定の目的に一意の名前を割り当てることができます。

  • カスタムタイプ: [カスタムタイプ] を選択した場合は、チェックボックスに一意の名前を入力します。この名前は、特に複数のチェックボックスが追加されている場合に識別に使用されます。

    手記：

    チェックボックス入力要素に カスタムタイプ を使用すると、チェックボックスステータスがブール値 (true/false) としてコンタクトレコードに保存されます。ユーザーがチェックボックスを選択すると、システムはカスタム型名とともに値を true として保存します (例: "terms": true)。チェックボックスがオフでフォームが送信された場合、値は false として保存されます。ただし、チェックボックスが 必須に設定されている場合、チェックボックスがオンになっていない限り、フォームを送信できず、重要な選択または合意が確実にキャプチャされます。

  • 必須: この設定を切り替えて、チェックボックスを必須にします。「必須」オプションが有効になっている場合、ユーザーはフォームを送信する前にチェックボックスをオンにする必要があります。

  • [開始] チェック: このチェックボックスをオンにすると、ページの読み込み時にチェックボックスがデフォルトで選択されます。これは、更新プログラムのサブスクライブなど、ユーザーに同意を推奨するオプションに役立ちます。

チェックボックススタイルのカスタマイズ

チェックボックス入力要素には、視覚的なカスタマイズのためのさまざまなスタイル設定が用意されています。

  • アイコンスタイル: チェックボックスが選択されている場合のチェックアイコンのスタイルを選択します。オプションには、さまざまなチェックマークのスタイルを含めることができます。

  • チェック色: チェックマークの色をカスタマイズして、まとまりのあるデザインにします。

  • ギャップ: チェックボックスアイコンと関連するラベルテキストの間の間隔を調整して、バランスのとれた配置を行います。

  • サイズ: チェックボックス アイコンのサイズを制御して、他のフォーム要素とシームレスにフィットできるようにします。

  • 罫線スタイル: チェックボックスの罫線スタイルを選択して、視認性を高めたり、ページのデザインと統合したりします。

  • ストロークサイズ: チェックボックスの周りの境界線の幅を調整します。

  • コーナー: コーナーの半径をカスタマイズして、正方形または丸みを帯びたチェックボックスの外観にします。

チェックボックスの状態

チェックボックス入力要素には、さらにカスタマイズできる 2 つの状態が含まれています。

  1. デフォルト状態: この状態は、チェックボックスが選択されていないときの外観を表します。背景、罫線、およびテキストの色をスタイル設定して、選択されていないときにチェックボックスのデフォルトのデザインに収まるようにすることができます。

  2. チェック状態: この状態は、チェックボックスが選択されている場合を表します。背景、境界線、テキストの色をカスタマイズして、チェックボックスをオンにしたときにデザインに合うようにします。

ラベル

ラベル設定では、要素内のテキストの外観を制御できます。

  • フォント ファミリ: このオプションを使用すると、テキストのフォント タイプを選択できます。ClickFunnels は、Google Fonts ライブラリからさまざまな人気のあるフォントを提供します。さらに、ワークスペース設定 > マイアセット > フォント に移動して、独自のカスタムフォントをアップロードして使用できます。アップロードすると、カスタムフォントが選択リストに表示され、使用できるようになります。

  • 太さ: このオプションは、テキストの太さを定義します。 希望する強調に応じて、[薄型]、[規則]、または[太字]オプションを選択できます。細いフォントは微妙な外観を提供し、太字のフォントはより視覚的なインパクトを生み出します。

  • フォントサイズ: スライダーを使用するか、特定の値を手動で入力してテキスト サイズを調整できます。さらに、サイズ測定には 2rem や 32px など、rem または px から選択できます。また、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルのフォントサイズ値を個別に設定することもできます。

    • Rem は、スタイルガイドで定義されている基本フォントサイズに基づく相対単位です。たとえば、テキストサイズを 2rem に選択し、スタイルガイドでデスクトップ用の基本フォントサイズを 16px に指定した場合、結果のテキストサイズはデスクトップビューで 32px になります (つまり、2rem × 16px = 32px)。

    • Px は絶対測定値であり、テキスト サイズを正確に制御できます。

  • 行の高さ: テキストの行間の垂直方向のスペースを制御します。これは通常、フォント サイズのパーセンテージとして表されます。パーセンテージを大きくすると、行間のスペースが増え、特に大きなテキストブロックの場合、読みやすさが向上します。 また、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルで行の高さの値を個別に設定することもできます。

コントロールパネル

コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。

  • ALL: コンテナはすべてのデバイス (デスクトップ、タブレット、モバイル) に表示されます。

  • デスクトップ (🖥️) アイコン: コンテナはデスクトップ ビューでのみ表示されます。

  • モバイル(📱)アイコン:コンテナはモバイルビューでのみ表示されます。

  • 目 (👁️) アイコン: これを使用して、ページからコンテナを非表示にします。クリックすると、コンテナはエディターで非表示になりますが、削除されません。上部のナビゲーションバーの [レイアウト] メニューをクリックして、非表示のコンテナーを見つけることができます。[すべて]、[デスクトップ]、または[モバイル]アイコンを選択して、エディターで再表示します。

  • コード (</>) アイコン: このアイコンはコード エディターを開き、カスタム CSS または JavaScript コードを挿入してコンテナの動作やスタイルを変更できます。

  • ごみ箱 (🗑️) アイコン: ページ エディターからコンテナーを完全に削除します。

詳細設定

コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリング ロジックを制御できる 詳細 設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。

関連記事