入力: テキストフィールドからユーザー入力を収集します

ClickFunnels の Input 要素は標準の HTML <input> 要素を表し、訪問者データを収集するためにフォームにさまざまな入力フィールドを追加できます。柔軟なカスタマイズオプションを使用すると、事前定義された入力タイプから選択したり、カスタムタイプを作成して特定の情報を収集したりできます。この記事では、ClickFunnels での Input 要素の設定とスタイル設定の概要について説明します。

必要条件

アクティブなClickFunnelsアカウント
ワークスペースで作成されたページ

手記：

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

ページエディタでの入力要素の追加

ページエディタ内で、要素を 配置するセクション を追加します。
そのセクション内に行を追加します。
行内のオレンジ色の + プラスまたは [新しい要素を追加 ] ボタンをクリックして、新しい要素を挿入します。
[ フォーム] カテゴリから、[ 入力] 要素を選択します。

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

入力要素のカスタマイズ

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

上マージン

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

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

入力タイプ

[ 入力タイプ] で、収集するデータ型を選択できます。ClickFunnels には、次のようないくつかの事前定義されたオプションが用意されています。

フルネーム： 顧客のフルネームを収集します。
名前： 顧客の名のみを収集します。
名字： 顧客の姓のみを収集します。
アドレス： 顧客のメールアドレスを収集します。フォームに追加する場合は、常に電子メールの入力が必要です。
電話番号: 顧客の電話番号を収集します。
配送先住所: 顧客の住所を収集します。
配送先の市区町村/州/国/郵便番号: 顧客の配送先の 市区町村、州、国、 郵便番号を収集します。

カスタムタイプ

カスタム タイプオプション を使用すると、特定のデータ収集ニーズ、特に標準カテゴリに当てはまらない情報に合わせた独自の入力タイプを作成できます。たとえば、カスタムタイプを使用して、「イベント設定」や「お気に入りの食べ物」などの詳細を収集できます。 カスタムタイプを使用する場合は、識別のために一意の名前を指定する必要があります。この名前は、フォーム送信の入力値を区別するために不可欠です。

手記：
カスタムタイプ名は、文字、数字、ダッシュ、アンダースコアのみを受け入れます。単語の間にスペースは許可されていません。

連絡先で送信されたデータの検索

ユーザーがフォームを送信すると、カスタムタイプの入力値が名前と値のペアとしてコンタクトのプロファイルに保存されます。このデータを表示するには:

ClickFunnelsダッシュボードの[顧客]セクションの[連絡先]に移動します。
フォームを送信した連絡先を見つけて、そのプロフィールをクリックします。
[ 概要 ] タブで、[ カスタム属性] セクションに移動します。ここでは、カスタム入力データが名前と値のペアとしてリストされ、一意の名前 (例: 「お気に入りのワークアウト」) がキーまたは名前として保存され、選択したオプション (例: 「パワーリフティング」) が値として保存されます。

必須

必須 設定は 、ユーザーがフォームを送信する前にこの入力フィールドに入力する必要があるかどうかを決定します。[ 必須] に設定すると、訪問者はこのフィールドに入力するまでフォームを送信できません。これは、重要な情報を収集し、重要なデータを取得するのに役立ちます。選択しないままにすると、フィールドはオプションになり、ユーザーはこの入力に値を入力せずにフォームを送信できます。

入力タイポグラフィ設定

入力 タイポグラフィ設定 セクションでは、以下を定義できます。

ラベルテキスト:これは、入力フィールドの横または入力フィールド内に表示されるラベルで、入力内容(「電子メール」や「電話番号」など)をユーザーに案内します。
ラベルの位置: [デフォルト ] (入力の上にラベルが配置される) または [ 境界線上] (ラベルが入力境界線に表示される) を選択します。この配置により、ラベルがより見やすくなったり合理化されたりすることで、ユーザーエクスペリエンスが向上します。

ラベル状態

ClickFunnels を使用すると、さまざまな状態に基づいて入力要素をカスタマイズできるため、よりインタラクティブで直感的なユーザーエクスペリエンスを作成できます。各州が表すものは次のとおりです。

デフォルト状態: これは、ページが読み込まれたとき、操作の前に入力が最初に表示される方法です。この状態の ラベル などの要素をカスタマイズできます。
フォーカス状態: ユーザーが入力フィールド内をクリックしたときの外観。この状態では、多くの場合、境界線の色など、さまざまなスタイルでフィールドが強調表示され、アクティブであることを示します。ラベルとプレースホルダー(入力内のヒントテキスト)を設定できます。
値の状態: これは、ユーザーがデータを入力した後の入力フィールドを表します。この状態の テキスト( 入力した値を表示する)や ラベル などの設定をカスタマイズできるため、情報が入力された後もわかりやすくなります。

背景色

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

大きさ

幅：幅設定では、要素の幅を制御できます。この幅は、配置されるコンテナのパーセンテージ(たとえば、全幅にするには100%)、または固定幅の場合はピクセル(px)で指定できます。この設定を調整すると、要素をページ上の他のコンポーネントに揃えたり、バランスの取れたレイアウトを作成したりするのに役立ちます。
高さ：テキスト領域要素の [サイズ] で n 個の追加 h8 設定が使用でき、テキスト入力領域に割り当てられる垂直方向のスペースを指定できます。この設定は、より長いユーザー応答に対応する必要がある場合に役立ちます。

デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの幅と高さの値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。

心地

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

パディングオプション:

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

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

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

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

整列設定

align オプションは、コンテナ内のテキスト入力フィールドの水平方向の配置を制御します。デザインの好みとレイアウトのニーズに応じて、入力を左、中央、または右に揃えることができます。この設定は、フォーム要素全体で一貫した配置を維持して、プロフェッショナルな外観にするのに役立ちます。

デバイスアイコン( & 📱 )🖥️を使用して、デスクトップとモバイルで個別に配置を設定できます。モバイル配置が指定されていない場合、デフォルトでデスクトップ配置が継承されます。

影

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

スタイル: ページのスタイルガイドから定義済みのシャドウスタイルの1つを選択します。番号付きのスタイル(1、2、または3)をクリックして、スタイルガイドで定義されているプリセットシャドウ設定を適用します。
シャドウスタイル: インセット (要素内の影) と アウトセット (要素の外側のシャドウ) のいずれかを選択して、目的のシャドウ効果を実現します。
X方向: 影の水平方向の位置を調整します。正の値は影を右に移動し、負の値を指定すると影は左に移動します。
Y方向: シャドウの垂直方向の配置をコントロールします。正の値は影を下に押し、負の値は影を上に引っ張ります。
ぼかし: シャドウのエッジの柔らかさをコントロールします。値を大きくすると、より拡散した柔らかな影が作成され、値を小さくすると、影が鮮明に保たれます。
スプレッド: 影のサイズを調整します。正の値は影を広げ、負の値は影を狭くします。
色: カラーピッカーを使用して、影の色の設定を選択します。

境

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

スタイルプリセット(1、2、3): スタイルガイドで定義済みの境界線スタイルから選択します。これらのプリセットは、ページ全体で一貫した境界線スタイルを提供し、要素にすばやく適用できます。
スタイルを編集: スタイルガイドでプリセットの罫線スタイルを変更するには(そのスタイルを使用するすべての要素に影響します)、スタイル を編集 を選択して、グローバル設定でデザインを調整します。
オーバーライド： [ オーバーライド ]オプションを使用して、グローバルスタイルガイド設定に影響を与えることなく、この要素専用の境界線設定をカスタマイズします。
国境： 要素のどの辺に境界線を表示するかを選択します。オプションには、上、下、左、右の境界線の任意の組み合わせが含まれます。
ボーダースタイル: デザインの好みに合わせて、実線、破線、点線などの境界線の線のスタイルを選択します。
色：カラーピッカーを使用して、境界線の色を選択します。スタイルガイドから色を選択するか、カスタム色を選択して、境界線の色がデザインスキームに一致するようにすることができます。
ストロークサイズ: 境界線の太さは、[ ストロークサイズ] スライダーを使用するか、特定のピクセル値を入力して調整でき、細い輪郭から太いフレームまであらゆるものを作成できます。

隅

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

スタイルプリセット(1、2、3): スタイルガイドで設定されている定義済みのコーナースタイルから選択します。これらのプリセット (1、2、または 3) は、ページ全体のデザインに合わせたクイックスタイリングオプションを提供します。
スタイルを編集: スタイルガイドでスタイルを直接変更するには(そのスタイルを使用するすべての要素に影響します)、スタイル を編集 をクリックして、グローバル設定でプリセットを調整します。
オーバーライド： スタイルガイドを変更せずにカスタムコーナー設定を適用するには、[ オーバーライド]をクリックします。これにより、この特定の要素に対してのみコーナー半径を調整できます。
すべてのコーナー: スライダーを調整するか、特定の値をピクセルまたはパーセンテージで入力して、四隅すべてに均一な境界線の半径を設定します。
エッジを分離する: エッジ を分離(Separate Edges )を有効にして、各コーナーを個別に調整します。左上隅、右上隅、左下隅、右下隅に異なる値を設定して、独自の形状を実現できます。

コントロールパネル

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

ALL: コンテナはすべてのデバイス (デスクトップ、タブレット、モバイル) に表示されます。
デスクトップ (🖥️) アイコン: コンテナはデスクトップビューでのみ表示されます。
モバイル(📱)アイコン:コンテナはモバイルビューでのみ表示されます。
目 (👁️) アイコン: これを使用して、ページからコンテナを非表示にします。クリックすると、コンテナはエディターで非表示になりますが、削除されません。上部のナビゲーションバーの [レイアウト] メニューをクリックして、非表示のコンテナーを見つけることができます。[すべて]、[デスクトップ]、または[モバイル]アイコンを選択して、エディターで再表示します。
コード (</>) アイコン: このアイコンはコードエディターを開き、カスタム CSS または JavaScript コードを挿入してコンテナの動作やスタイルを変更できます。
ごみ箱 (🗑️) アイコン: ページエディターからコンテナーを完全に削除します。

詳細設定

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

Advanced Settings - Customize Styles: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。
Advanced Settings - Customize Animation: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法を学習します。
詳細設定 - ロジックのカスタマイズ: 条件付きロジックを要素に適用し、カスタム属性を追加する方法を学習します。