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

アンケート: アンケートでユーザーフィードバックを収集する

公開日: 更新日:

ClickFunnels の アンケート 要素を使用すると、ユーザー向けのインタラクティブなアンケートを作成できるため、情報、好み、フィードバックを簡単に収集できます。この要素は、視聴者の目標、興味、または特定のニーズについて詳しく知るのに最適で、ファネルのデザインに合わせてカスタマイズできます。この記事では、アンケート要素を使用してページにアンケートを表示する方法を学習します。

必要条件

Section titled “必要条件”

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

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

  • アンケートワークフローアプリで作成されたアンケート

ページエディタでのアンケート要素の追加

Section titled “ページエディタでのアンケート要素の追加”

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

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

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

  4. フォーム カテゴリから、アンケート 要素を選択します。

アンケート 要素を追加すると、ページ デザインに合わせて外観をカスタマイズできます。

アンケート要素のカスタマイズ

Section titled “アンケート要素のカスタマイズ”

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

上マージン

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

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

アンケートを選択

このドロップダウンメニューでは、ファネルに表示するアンケートを選択できます。ここでのオプションは、アンケートワークフローアプリで以前に作成したアンケートです。事前に作成されたアンケートをファネル内のこの特定の要素にリンクするには、ここでアンケートを選択します。アンケートを選択するまで、ドロップダウンには アンケートが選択されていません と表示され、エディターには アンケートのエラー：調査を選択する必要があります というエラーが表示されます。

アンケートワークフローアプリでアンケートを作成する方法については、記事 How to Create and Manage Survey Workflowsを参照してください。

確定時

確定時:

この設定は、ユーザーがアンケートを完了したときに何が起こるかを決定します。オプションは ボタン要素のアクション と同じですが、注文/フォームを送信、1クリックアップセル、完了をマーク… は使用できません。ファネルステップ以外のページでは、リンクなし と 次のステップにリダイレクト も使用できません。オプションには次のものがあります。
ファネルステップで確定時のドロップダウンを開き、「次のステップにリダイレクト」を選択した状態

  • 何も起こらない: アンケートは追加のアクションなしで完了します。

  • リンクなし (ファネルステップのみ): ユーザーをファネルの次のステップに移動します。

  • 移動先…: 完了後にユーザーを送信する特定の URL を指定できます。

  • スクロール先…: ページビューを現在のページの特定のセクションに移動します。

  • 表示または非表示…: アンケートの完了に基づいて、ページ上の他の要素を表示または非表示にします。

  • ポップアップを開く…: アンケートの終了後にポップアップウィンドウを開きます。

  • ポップアップを閉じる…: アンケートの完了時に開いているポップアップウィンドウを閉じます。

  • 次のレッスンへ進む…、前のレッスンに戻る…、レッスンを再スタート…: コースのレッスンページに配置したアンケート用のレッスン移動です。

  • 次のステップにリダイレクト (ファネルステップのみ): ユーザーをファネルの次のステップに自動的に移動します。

  • ファイルをダウンロード…: 選択したファイルをダウンロードするか開きます。

アンケート終了:

アンケート終了 セクションの テキスト フィールドでは、回答者がアンケートを完了したときに表示されるメッセージをカスタマイズできます。デフォルトのテキストは Survey finalized です。

書体

アンケート要素のテキストのフォントカテゴリを選択します。このオプションを使用すると、アンケートのテキストをページのスタイルガイドのタイポグラフィ(見出し、コンテンツなど)と一致させることができます。

質問

アンケートの各質問の表示方法をカスタマイズします。

  • 質問のテキスト: 質問タイトルのテキストのサイズを調整します (8〜64px)。

  • 質問の色: 質問タイトルテキストの色を選択します。

  • 回答のテキスト: 回答オプションのフォントサイズを設定します (8〜64px)。

  • 回答の色: 回答テキストの色を選択します。

  • アクティブな回答の色: アクティブな(選択した)回答の色を選択します。

  • ホバー時のテキストの色: ホバーしたときの回答オプションの色を設定します。

  • ホバーBG: ユーザーが回答オプションにカーソルを合わせたときに表示される背景色を選択します。

進捗バー

アンケートの進み具合をユーザーに表示する進捗バーを有効または無効にします。
アンケートの進捗バー設定: トグル、背景色、未完成の色、角

  • 背景色: 進捗バーの背景色を設定します。

  • 未完成の色: 未完了の進捗を表す色を選択します。

  • 角: 進捗バーのコーナーを、四角にする場合は なし、丸くする場合は 丸みを帯びた から選択します。

ボタン

ユーザーが次の質問に進んだり、アンケートを完了したりできるボタンをカスタマイズします。
アンケートのボタン設定: 背景色、テキストカラー、テキストサイズ、フル幅

  • 背景色: ボタンの背景色を選択します。

  • テキストカラー: ボタンのテキストの色を選択します。

  • テキストサイズ: ボタンテキストのフォントサイズを設定します (8〜32px)。

  • フル幅: 有効 または 無効 を選択して、ボタンの全幅表示をオンまたはオフにします。

入力

入力フォント サイズ、色、背景を、ユーザー入力を必要とする特定のアンケート タイプに合わせてカスタマイズします。
アンケートの入力設定: 入力フォントサイズ、テキストカラー、背景色、ボーダーの色、角

  • 入力フォントサイズ: アンケート内のユーザー入力のフォントサイズを設定します (8〜32px)。

  • テキストカラー: 入力テキストの色を選択します。

  • 背景色: 入力フィールドの背景色を選択します。

  • ボーダーの色: 入力フィールドの周囲のボーダーの色を選択します。

  • 角: 入力フィールドのコーナースタイルを なし (四角)、丸みを帯びた、または 丸い に設定します。

アンケートのテキスト

アンケートが訪問者に表示するテキストは、翻訳するなどの目的で変更できます。要素の設定の 高度な タブを開き、スタイル サブタブを選択します。次のテキストを編集できます。
アンケートの高度なタブのスタイルで、名前から次へまで編集できるテキスト（回答を入力してくださいを含む）

  • 連絡先フィールドのラベル: 名前、名、姓、メール、電話番号。

  • エラーメッセージ: 少なくとも1つのオプションを選択してください、1つのオプションを選択してください、提供された回答が長すぎます、回答を入力してください。回答を入力してください は、アンケートワークフローで 回答を必須にする をオンにした 入力 の質問を、訪問者が空欄のまま進もうとしたときに表示されます（アンケートワークフローを作成および管理する方法 を参照）。このメッセージが追加される前に配置したアンケート要素では、変更するまで英語（Please provide an answer）で表示されます。

  • 次へ ボタンのテキスト。

マージン

マージン設定を使用すると、要素またはコンテナ(セクション、行、フレックスなど)の外側のスペースを制御して、要素またはコンテナと周囲のコンテナとの間に間隔を作成できます。上、下、左 + 右 のマージンを調整して、コンテナを必要に応じて配置します。

  • 上: 要素またはコンテナの上のスペースを設定します。

  • 下: 要素またはコンテナの下のスペースを設定します。

  • 左 + 右: 要素またはコンテナの両側に等しい間隔を設定します。

パディング

パディング 設定は、コンテンツとそのコンテナの内側の端 (セクション、行、列、要素など) の間のスペースを制御します。この内部間隔により、コンテンツに余裕が生まれ、視覚的にバランスが取れているように見えます。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。

パディングオプション:

  • 上: 要素コンテナの上部とそのコンテンツの間にスペースを追加します。

  • 下: 要素コンテナの下部とそのコンテンツの間にスペースを追加します。

  • 左 + 右: 要素コンテナとそのコンテンツの間の水平方向の間隔を調整します。

  • ギャップ: アコーディオン などの特定の要素では、コンテナ内のアイテム間の間隔を設定するために gap プロパティが追加されます。たとえば、上下にパディングを定義せずに、アコーディオン要素内の各アコーディオン項目間のギャップを調整できます。

デスクトップとモバイル (🖥️ & 📱) のカスタマイズ:

パディング設定を使用すると、デスクトップ ビューと モバイル ビューに別々の値を定義できます。パディングコントロールの上部にある デバイストグル を使用して、画面モードを切り替え、それに応じて間隔を調整します。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。

この機能により、レイアウトがさまざまな画面サイズに合わせて最適化された状態が維持され、モバイルとデスクトップのエクスペリエンスが向上します。

背景

背景 セクションでは、要素の背景色を設定できます。スタイルガイド から定義済みの色を選択するか、カスタム色を作成できます。カスタム カラーピッカーを使用する場合は、スライダーを使用して色を選択するか、特定のHEXコードを入力できます。

シャドウ

シャドウ の設定では、シャドウ効果を適用して要素に奥行きと強調を加え、視覚的な外観を向上させることができます。シャドウのプロパティをカスタマイズする方法は次のとおりです。

  1. スタイル: ページのスタイルガイドから定義済みのシャドウスタイルの1つを選択します。番号付きのスタイル(1、2、または3)をクリックして、スタイルガイドで定義されているプリセットシャドウ設定を適用します。

  2. シャドウ スタイル: インセット (要素内のシャドウ) と アウトセット (要素の外側のシャドウ) のいずれかを選択して、目的のシャドウ効果を実現します。

  3. X方向: シャドウの水平方向の位置を調整します。正の値はシャドウを右に移動し、負の値を指定するとシャドウは左に移動します。

  4. Y方向: シャドウの垂直方向の配置をコントロールします。正の値はシャドウを下に押し、負の値はシャドウを上に引っ張ります。

  5. ぼかし: シャドウのエッジの柔らかさをコントロールします。値を大きくすると、より拡散した柔らかなシャドウが作成され、値を小さくすると、シャドウが鮮明に保たれます。

  6. スプレッド: シャドウのサイズを調整します。正の値はシャドウを広げ、負の値はシャドウを狭くします。

  7. 色: カラーピッカーを使用して、シャドウの色を設定します。

ボーダー

ボーダー 設定を使用すると、要素の周囲にボーダーを追加してスタイルを設定し、ページ上の視覚的な定義と分離を強化できます。

  1. スタイルプリセット(1、2、3): スタイルガイドで定義済みのボーダースタイルから選択します。これらのプリセットは、ページ全体で一貫したボーダースタイルを提供し、要素にすばやく適用できます。

  2. スタイルを編集: スタイルガイドでプリセットのボーダースタイルを変更するには(そのスタイルを使用するすべての要素に影響します)、スタイルを編集 を選択して、グローバル設定でデザインを調整します。

  3. オーバーライド: オーバーライド オプションを使用して、グローバルスタイルガイド設定に影響を与えることなく、この要素専用のボーダー設定をカスタマイズします。

  4. ボーダー: 要素のどの辺にボーダーを表示するかを選択します。オプションには、上、下、左、右のボーダーの任意の組み合わせが含まれます。

  5. ボーダースタイル: デザインの好みに合わせて、実線、破線、点線などのボーダーの線のスタイルを選択します。

  6. 色: カラーピッカーを使用して、ボーダーの色を選択します。スタイル ガイドから色を選択するか、カスタム色を選択して、ボーダーの色がデザイン スキームに一致するようにすることができます。

  7. ストロークサイズ: ボーダーの太さは、ストロークサイズ スライダーを使用するか、特定のピクセル値を入力して調整でき、細い輪郭から太いフレームまであらゆるものを作成できます。

コーナー

コーナー 設定では、要素のコーナーの丸み(border-radius)を調整でき、丸みを帯びたエッジまたはシャープなエッジを柔軟に作成できます。

  1. スタイルプリセット(1、2、3): スタイルガイドで設定されている定義済みのコーナースタイルから選択します。これらのプリセット (1、2、または 3) は、ページ全体のデザインに合わせたクイック スタイリング オプションを提供します。

  2. スタイルを編集: スタイルガイドでスタイルを直接変更するには(そのスタイルを使用するすべての要素に影響します)、スタイルを編集 をクリックして、グローバル設定でプリセットを調整します。

  3. オーバーライド: スタイルガイドを変更せずにカスタムコーナー設定を適用するには、オーバーライド をクリックします。これにより、この特定の要素に対してのみコーナー半径を調整できます。

  4. すべてのコーナー: スライダーを調整するか、特定の値をピクセルまたはパーセンテージで入力して、4 つのコーナーすべてに均一な半径を設定します。

  5. エッジを分離する: エッジを分離する (Separate Edges) を有効にして、各コーナーを個別に調整します。左上、右上、左下、右下 のコーナーに異なる値を設定して、独自の形状を実現できます。

コントロールパネル

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

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

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

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

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

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

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

詳細設定

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