コンテンツにスキップ
ClickFunnels Help CenterClickFunnels Help CenterClickFunnels Help CenterCF クラシックヘルプセンター

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

公開日: 更新日:

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

必要条件

Section titled “必要条件”

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

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

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

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

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

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

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

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

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

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

Section titled “テキストコンテンツの編集”

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

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

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

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

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

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

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

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

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

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

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

    • 公開ページでは、チェックボックスのラベル内のリンクをクリックすると、チェックボックスのオン/オフは切り替わらずにリンクが開きます。そのため、利用規約などのドキュメントにリンクできます。

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

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

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

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

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

上マージン

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

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

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

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

  • 入力タイプ: 新しいチェックボックスは自動的に カスタムタイプ を使用するため、すぐに カスタムタイプ フィールドに入力できます。入力タイプ ドロップダウン (設定されていない または カスタムタイプ) は、タイプがまだ設定されていない古いチェックボックスにのみ表示されます。その場合は カスタムタイプ を選択します。カスタムタイプオプションを使用すると、「terms」や「newsletter-signup」など、特定の目的に一意の名前を割り当てることができます。

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

  • 必須: このドロップダウンで 必須 または 必須ではない を選択します。必須 を選択すると、ユーザーはフォームを送信する前にチェックボックスをオンにする必要があります。

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

チェックボックス入力要素には、視覚的なカスタマイズのためのさまざまなスタイル設定が用意されています。チェックボックススタイル セクションには次の設定があります。
チェックボックススタイル: チェックされた状態で開始、アイコンスタイル、チェックの色、ギャップ、サイズ、ボーダースタイル、ストロークサイズ、コーナー

  • チェックされた状態で開始: このチェックボックスをオンにすると、ページの読み込み時にチェックボックスがデフォルトで選択されます。これは、最新情報の購読など、ユーザーに同意を推奨するオプションに役立ちます。

  • アイコンスタイル: チェックボックスが選択されたときにボックス内に表示されるものを、チェックマークまたは塗りつぶしの正方形から選択します。

  • チェックの色: チェックマークの色をカスタマイズして、まとまりのあるデザインにします。このオプションは、チェックマークのアイコンスタイルを選択したときに表示されます。

  • 正方形の色 と 正方形の角: 塗りつぶしの正方形の色をカスタマイズし、そのコーナーを丸くします (0〜10px)。これらのオプションは、塗りつぶしの正方形のアイコンスタイルを選択したときに表示されます。

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

チェックボックス設定 セクションでは、ボックス自体を制御します。

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

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

  • ストロークサイズ: チェックボックスの周りのボーダーの幅を調整します (0〜50px)。

  • コーナー: コーナーの半径 (0〜10px) をカスタマイズして、四角いまたは丸みを帯びたチェックボックスの外観にします。

チェックボックスの状態

チェックボックス入力要素には、さらにカスタマイズできる 2 つの状態が含まれています。
チェックボックスの状態: デフォルト/チェック済みタブと背景、ボーダーの色、テキストカラー

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

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

ラベル

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

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

  • ウェイト: このオプションは、テキストの太さを定義します。選択できるウェイトは、選択したフォントによって異なります。細いフォントは控えめな外観を提供し、太字のフォントはより視覚的なインパクトを生み出します。

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

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

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

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

コントロールパネル

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

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

  • デスクトップ (🖥️) アイコン: コンテナはデスクトップ表示（幅771px以上の画面）でのみ表示されます。

  • モバイル (📱) アイコン: コンテナはモバイル表示（幅770px以下の画面）でのみ表示されます。

  • 目 (👁️) アイコン: すべてのデバイスでコンテナを非表示にします。コンテナは削除されません。再表示するには、このパネルで すべて、デスクトップ、または モバイル を選択するか、上部バーの レイアウト を開いて、そのコンテナのデスクトップまたはモバイルの切り替えをオンに戻します。

  • コード (</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。

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

詳細設定

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