テキストエリア: ユーザーからの長いテキスト入力の収集
公開日: 更新日:
ClickFunnels の テキストエリア 要素は、コメント、フィードバック、自由回答形式の回答などの詳細なユーザー応答を収集できる複数行のテキスト フィールドです。このガイドでは、テキストエリア要素を追加およびカスタマイズして、フォームのデザインと機能にシームレスに適合するように説明します。
-
アクティブなClickFunnelsアカウント
-
ワークスペースで作成されたページ
ページエディタでのテキストエリア要素の追加
Section titled “ページエディタでのテキストエリア要素の追加”-
ページエディタ内で、要素を配置する セクション を追加します。
-
そのセクション内に 行 を追加します。
-
行内のオレンジ色の + プラス または 新しい要素を追加 ボタンをクリックして、新しい要素を挿入します。
-
フォーム カテゴリから、テキストエリア 要素を選択します。
テキストエリア 要素を追加すると、ページのデザインに合わせて外観をカスタマイズできます。
テキストエリア要素のカスタマイズ
Section titled “テキストエリア要素のカスタマイズ”要素にカーソルを合わせると、その境界線がオレンジ色で強調表示されます。要素の設定にアクセスするには、歯車 ⚙️アイコン をクリックするか、要素を直接クリックします。
上マージン
上マージン 設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。
デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。
入力タイプ
タイプの設定は テキストエリアタイプ セクションにあります。新しいテキストエリア要素は自動的に カスタムタイプ を使用するため、すぐに カスタムタイプ フィールドに入力できます。入力タイプ ドロップダウン (設定されていない または カスタムタイプ) は、タイプがまだ設定されていない古いテキストエリア要素にのみ表示されます。その場合は カスタムタイプ を選択します。
カスタムタイプ
バックエンドの追跡または統合のカスタム識別子を設定します。たとえば、「feedback」や「description」などのラベルを入力できます。
必須
ユーザーがフォームを送信するために入力する必要があるかどうかに応じて、テキストエリアを 必須 または 必須ではない に設定します。
テキストエリアタイポグラフィ設定
テキストエリアタイポグラフィ設定 セクションでは、以下を定義できます。
-
ラベルテキスト: テキストエリア内にプロンプトとして表示されるテキストを入力します (例: 「回答を書いてください…」)。
-
ラベル位置: ラベルの位置を、デフォルト (テキストエリア内) またはボーダーに揃えたラベルの場合は ボーダー上 から選択します。
ラベルの状態
ClickFunnels を使用すると、さまざまな状態に基づいてテキスト入力要素 (入力、テキストエリアなど) をカスタマイズできるため、よりインタラクティブで直感的なユーザー エクスペリエンスを作成できます。各状態が表すものは次のとおりです。
-
デフォルト: これは、ページが読み込まれたとき、操作の前にテキスト入力が最初に表示される方法です。この状態の ラベル などの要素をカスタマイズできます。
-
フォーカス中: ユーザーがテキスト入力フィールド内をクリックしたときの外観。この状態では、多くの場合、ボーダーの色など、さまざまなスタイルでフィールドが強調表示され、アクティブであることを示します。ラベル と プレースホルダー (入力内のヒントテキスト) の両方を設定できます。
-
値: これは、ユーザーがデータを入力した後のテキスト入力フィールドを表します。この状態の テキスト (入力した値を表示する) や ラベル などの設定をカスタマイズできるため、情報が入力された後もわかりやすくなります。
背景色
背景色 セクションでは、要素の背景色を設定できます。スタイルガイド から定義済みの色を選択するか、カスタム色を作成できます。カスタム カラーピッカーを使用する場合は、スライダーを使用して色を選択するか、特定のHEXコードを入力できます。
サイズ
-
幅: 幅設定では、要素の幅を制御できます。この幅は、配置されるコンテナのパーセンテージ (たとえば、全幅にするにはデフォルトの 100%)、または固定幅の場合はピクセル (px、最大 2500px) で指定できます。この設定を調整すると、要素をページ上の他のコンポーネントに揃えたり、バランスの取れたレイアウトを作成したりするのに役立ちます。
-
高さ: テキスト入力領域に割り当てる垂直方向のスペースをピクセルで指定します (デフォルト 120px、最大 2500px)。この設定は、より長いユーザー応答に対応する必要がある場合に役立ちます。
デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの幅と高さの値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。
パディング
パディング 設定は、コンテンツとそのコンテナの内側の端 (セクション、行、列、要素など) の間のスペースを制御します。この内部間隔により、コンテンツに余裕が生まれ、視覚的にバランスが取れているように見えます。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。
パディングオプション:
-
上: 要素コンテナの上部とそのコンテンツの間にスペースを追加します。
-
下: 要素コンテナの下部とそのコンテンツの間にスペースを追加します。
-
左 + 右: 要素コンテナとそのコンテンツの間の水平方向の間隔を調整します。
-
ギャップ: アコーディオン などの特定の要素では、コンテナ内のアイテム間の間隔を設定するために gap プロパティが追加されます。たとえば、上下にパディングを定義せずに、アコーディオン要素内の各アコーディオン項目間のギャップを調整できます。
デスクトップとモバイル (🖥️ & 📱) のカスタマイズ:
パディング設定を使用すると、デスクトップ ビューと モバイル ビューに別々の値を定義できます。パディングコントロールの上部にある デバイストグル を使用して、画面モードを切り替え、それに応じて間隔を調整します。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。
この機能により、レイアウトがさまざまな画面サイズに合わせて最適化された状態が維持され、モバイルとデスクトップのエクスペリエンスが向上します。
配置設定
入力整列 オプションは、コンテナ内のテキスト入力フィールドの水平方向の配置を制御します。デザインの好みとレイアウトのニーズに応じて、入力を左、中央、または右に揃えることができます。この設定は、フォーム要素全体で一貫した配置を維持して、プロフェッショナルな外観にするのに役立ちます。
デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルで個別に配置を設定できます。モバイル配置が指定されていない場合、デフォルトでデスクトップ配置が継承されます。
シャドウ
シャドウ の設定では、シャドウ効果を適用して要素に奥行きと強調を加え、視覚的な外観を向上させることができます。シャドウのプロパティをカスタマイズする方法は次のとおりです。
-
スタイル: ページのスタイルガイドから定義済みのシャドウスタイルの1つを選択します。番号付きのスタイル(1、2、または3)をクリックして、スタイルガイドで定義されているプリセットシャドウ設定を適用します。
-
シャドウ スタイル: インセット (要素内のシャドウ) と アウトセット (要素の外側のシャドウ) のいずれかを選択して、目的のシャドウ効果を実現します。
-
X方向: シャドウの水平方向の位置を調整します。正の値はシャドウを右に移動し、負の値を指定するとシャドウは左に移動します。
-
Y方向: シャドウの垂直方向の配置をコントロールします。正の値はシャドウを下に押し、負の値はシャドウを上に引っ張ります。
-
ぼかし: シャドウのエッジの柔らかさをコントロールします。値を大きくすると、より拡散した柔らかなシャドウが作成され、値を小さくすると、シャドウが鮮明に保たれます。
-
スプレッド: シャドウのサイズを調整します。正の値はシャドウを広げ、負の値はシャドウを狭くします。
-
色: カラーピッカーを使用して、シャドウの色を設定します。
ボーダー
ボーダー 設定を使用すると、要素の周囲にボーダーを追加してスタイルを設定し、ページ上の視覚的な定義と分離を強化できます。
-
スタイルプリセット(1、2、3): スタイルガイドで定義済みのボーダースタイルから選択します。これらのプリセットは、ページ全体で一貫したボーダースタイルを提供し、要素にすばやく適用できます。
-
スタイルを編集: スタイルガイドでプリセットのボーダースタイルを変更するには(そのスタイルを使用するすべての要素に影響します)、スタイルを編集 を選択して、グローバル設定でデザインを調整します。
-
オーバーライド: オーバーライド オプションを使用して、グローバルスタイルガイド設定に影響を与えることなく、この要素専用のボーダー設定をカスタマイズします。
-
ボーダー: 要素のどの辺にボーダーを表示するかを選択します。オプションには、上、下、左、右のボーダーの任意の組み合わせが含まれます。
-
ボーダースタイル: デザインの好みに合わせて、実線、破線、点線などのボーダーの線のスタイルを選択します。
-
色: カラーピッカーを使用して、ボーダーの色を選択します。スタイル ガイドから色を選択するか、カスタム色を選択して、ボーダーの色がデザイン スキームに一致するようにすることができます。
-
ストロークサイズ: ボーダーの太さは、ストロークサイズ スライダーを使用するか、特定のピクセル値を入力して調整でき、細い輪郭から太いフレームまであらゆるものを作成できます。
コーナー
コーナー 設定では、要素のコーナーの丸み(border-radius)を調整でき、丸みを帯びたエッジまたはシャープなエッジを柔軟に作成できます。
-
スタイルプリセット(1、2、3): スタイルガイドで設定されている定義済みのコーナースタイルから選択します。これらのプリセット (1、2、または 3) は、ページ全体のデザインに合わせたクイック スタイリング オプションを提供します。
-
スタイルを編集: スタイルガイドでスタイルを直接変更するには(そのスタイルを使用するすべての要素に影響します)、スタイルを編集 をクリックして、グローバル設定でプリセットを調整します。
-
オーバーライド: スタイルガイドを変更せずにカスタムコーナー設定を適用するには、オーバーライド をクリックします。これにより、この特定の要素に対してのみコーナー半径を調整できます。
-
すべてのコーナー: スライダーを調整するか、特定の値をピクセルまたはパーセンテージで入力して、4 つのコーナーすべてに均一な半径を設定します。
-
エッジを分離する: エッジを分離する (Separate Edges) を有効にして、各コーナーを個別に調整します。左上、右上、左下、右下 のコーナーに異なる値を設定して、独自の形状を実現できます。
コントロールパネル
コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。
-
すべて: コンテナはすべてのデバイス（デスクトップ、タブレット、モバイル）で表示されます。
-
デスクトップ (🖥️) アイコン: コンテナはデスクトップ表示（幅771px以上の画面）でのみ表示されます。
-
モバイル (📱) アイコン: コンテナはモバイル表示（幅770px以下の画面）でのみ表示されます。
-
目 (👁️) アイコン: すべてのデバイスでコンテナを非表示にします。コンテナは削除されません。再表示するには、このパネルで すべて、デスクトップ、または モバイル を選択するか、上部バーの レイアウト を開いて、そのコンテナのデスクトップまたはモバイルの切り替えをオンに戻します。
-
コード (
</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。 -
ごみ箱 (🗑️) アイコン: ページ エディターからコンテナーを完全に削除します。
詳細設定
コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリング ロジックを制御できる 詳細 設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。
-
詳細設定 - スタイルのカスタマイズ: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。
-
詳細設定 - アニメーションのカスタマイズ: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法 を学習 します。
-
詳細設定 - ロジックのカスタマイズ: 条件付きロジックを要素に適用し、カスタム属性を追加する方法を学習します。