フォームフィールドのレイアウトをカスタマイズする

フォームフィールドのレイアウトをカスタマイズして、訪問者に対してフォームがどのように表示され、機能するかを制御しましょう。フィールドの配置を調整したり、関連するフィールドをグループ化したりすることで、より整理されたフォーム画面を作成できます。たとえば、連絡先情報をまとめてグループ化したり、コンバージョンプロセスの流れに合わせてフィールドの順序を変更したりすることができます。

この記事では、の更新されたフォームエディタ（）を使用して、フォームフィールドのレイアウトをカスタマイズする方法について解説します。のレガシーフォームエディタ（）をご利用の場合は、レガシーフォーム（）でフォームフィールドのレイアウトをカスタマイズする方法（）をご確認ください。 

フォームフィールド間にコンテンツを追加する

フォームフィールドおよび追加のフォーム要素は、他のフィールドの上、下、または横に配置できます。

1. HubSpotアカウントで、［その他］をクリックし、［マーケティング］＞［フォーム］の順に進みます。アカウントに［その他］が表示されない場合は、［マーケティング］＞［フォーム］に直接移動します。
2. フォームの上にマウスポインターを置き、[ 編集]をクリックするか、 新しいフォームを作成します。
3. 左上の add 追加アイコンをクリックします。
   • 左側のパネルで 、[フィールド]、[ プロパティー ]、または [その他]をクリックします。
   • フィールドをフォームに追加するには、 フィールド をクリックして右側のフォームプレビューにドラッグします。

フォームフィールドでオプションの順序を変更する

ドロップダウン選択プロパティーなど、複数のオプションがあるフォームフィールドを使用している場合は、オプションを並べ替えることができます。利用可能な選択オプションの詳細をご確認ください。

1. HubSpotアカウントで、［その他］をクリックし、［マーケティング］＞［フォーム］の順に進みます。アカウントに［その他］が表示されない場合は、［マーケティング］＞［フォーム］に直接移動します。
2. フォームの上にマウスポインターを置き、[ 編集]をクリックして新しい フォームを作成します。
3. 右側のパネルで、オプションの順序を変更するフィールドをクリックします。
4. 左側のパネルの [フィールドオプション ]セクションで、フィールドオプションの左側にある dragHandle 点線 をクリックし、オプションをクリックして目的の位置までドラッグします。
5. オプションをアルファベット順に並べ替えるには、[ 並べ替え sortAlpAsc ]をクリックします。
6. 右上の［確認と更新］をクリックして、フォームの更新内容を公開します。

フォームフィールドを横に並べて配置する

1つのフォームに最大 3つの フィールドを並べて配置できます。

1. HubSpotアカウントで、［その他］をクリックし、［マーケティング］＞［フォーム］の順に進みます。アカウントに［その他］が表示されない場合は、［マーケティング］＞［フォーム］に直接移動します。
2. フォームの上にマウスポインターを置き、[ 編集]をクリックするか、 新しいフォームを作成します。
3. フォームフィールド をクリックしてドラッグすると、配置オプションが表示されます。
4. ある行のフィールドの隣に配置するには、その行の空いているスペースにドラッグする。
5. 右上の［確認と更新］をクリックして、フォームの更新内容を公開します。