お問い合わせフォームをデザインする

お問い合わせフォームを追加した後、その外観をカスタマイズできます。このガイドでは、サイトのフォームのスタイル、色、レイアウトを変更する方法について説明します。

フォームブロックには、選択可能なさまざまなデザインスタイルのフォームが含まれます:

1. エディターの左上にある「リスト表示」を選択します。3本の横線が上下に並んでいる形のアイコンです。
2. 「フォームブロック」を見つけ、クリックします。

3. 右サイドバーの「ブロック設定」で、「スタイル」タブ (白と黒の円形アイコンで表示) をクリックします。

4. 次のスタイルを選択します。
   • 「デフォルト」では、入力フィールドの外側にフィールド名がアニメーションなしで表示されます。
   • 「アニメーション付き」では、入力フィールド内のフィールド名、短いアニメーションが表示され、訪問者がクリックしたフィールドが強調表示されます。
   • 「枠線付き」では、入力フィールド内のフィールド名、短いアニメーション表示、フォームブロック設定周囲の枠線が常に表示されます。
5. 画面上部の「保存」ボタンをクリックします。

プレースホルダーテキストとは、訪問者がクリックするまでフォームフィールドに表示されるサンプルテキストです。訪問者がクリックするとこのテキストは表示されなくなり、自分のテキストを入力できるようになります。フォームに入力して欲しいコンテンツのタイプの例を訪問者に示すのに役立ちます。

お問い合わせフォームにプレースホルダーテキストを追加するには、次の手順を実行します。

1. フォーム内の任意のフィールドをクリックします。
2. サイドバーでブロック設定を開きます。
3. 「プレースホルダーテキスト」設定まで下にスクロールします。
4. 表示されたボックスにプレースホルダーテキストを入力します。そのテキストがフォームフィールドに表示されます。
5. 画面上部の「保存」ボタンをクリックします。

デフォルトでは、フォーム内のフィールドはフォームのコンテナの幅に合わせて表示されます。個々のフィールドの幅を変更するには、次の手順を実行します。

1. フォーム内の任意のフィールドをクリックします。
2. サイドバーでブロック設定を開きます。
3. 「幅」設定まで下にスクロールし、幅を25%、50%、75%、または100% に設定します。
   • 2つのフィールドを並べて表示する場合は、それぞれを50% に設定します。余裕がある場合は、1行に複数のフィールドを表示できます。
4. 画面上部の「保存」ボタンをクリックします。

フォームフィールドごとに色とテキストの表示方法を個別に編集するか、各フォームフィールドですべて同じ色とテキストの設定を使用するかを選択できます。

個々のフォームフィールドをクリックすると、ブロック設定に「フィールドのスタイルを同期」トグルが表示されます。これをオンの位置に設定すると、このフィールドに対して行った変更がすべてのフィールドに反映されます。そのフィールドの設定のみを変更する場合は、クリックしてオフの位置にします。

フォーム全体で一貫した外観になるように、すべてのフィールドで、次の変更を同期させることができます。

• 色: 次の色を設定します。
  • ラベルテキスト: フォームフィールドの上に表示されるテキスト。
  • フィールドテキスト: プレースホルダーテキスト (オプション) と、フィールド内の入力テキスト。
  • フィールドの背景: フォームフィールドの入力セクションの背景。
  • 枠線: フォームフィールドを囲む枠線。
• 入力フィールドのスタイル: フィールドのテキストサイズ、行の高さ、枠線のスタイルを設定します。
• ラベルのスタイル: フィールドラベルのテキストサイズと行の高さを設定します。

フォームの色を調整するには、次の手順を実行します。

1. リスト表示を開き、フォームブロックとその中の個々のフィールドを見つけます。

2. フォームブロック全体を選択した状態で、サイドバーのブロック設定を開き、「スタイル」タブ (白と黒の円形アイコン) をクリックします。
3. 色設定を使用して、フォーム内のテキストの色、背景色、フォーム内で使用するリンクの色を制御できます。

4. 次に、個々のフォームフィールドをクリックして、もう一度ブロック設定を開きます。
5. ここでは、フォームフィールドごとに次の色を制御できます。
   • ラベルテキスト: フォームフィールドの上に表示されるテキスト。
   • フィールドテキスト: プレースホルダーテキスト (オプション) と、フィールド内の入力テキスト。
   • フィールドの背景: フォームフィールドの入力セクションの背景。
   • 枠線: フォームフィールドを囲む枠線。
6. 「フィールドのスタイルを同期」トグルを有効にすると、すべてのフィールドに変更が適用され、無効にすると各フィールドを個別に制御できます。
7. 画面上部の「保存」ボタンをクリックします。