成功
お問い合わせフォーム
柔軟な見出し、ボタン、背景、モバイル表示のコントロールを備えた、ブランドに合ったお問い合わせフォームを作成します。
このブロックを使用して、顧客メッセージをすっきりとしたブランドに合ったレイアウトで収集します。任意の見出しコンテンツでフォームの導入を行い、送信ボタンのスタイルを調整し、デスクトップとモバイル全体でブロックの表示を微調整できます。テーマエディターでブロックがどのように機能するかの詳しい概要については、セクションとブロックに関するShopifyドキュメント をご覧ください。
基本設定は、フォームの主な行動喚起を形づくります。ブロックをより目立たせたい場合や、小さな画面で使いやすくしたい場合は、ここから始めてください。
- ページに合ったボタンスタイルを選択します。メッセージ送信が主な操作である場合は、塗りつぶしスタイルが通常最適です。一方、フォームが他のコンテンツの横にある場合は、プレーンスタイルのほうが軽やかに見えます。
- モバイルでボタンを全幅にする設定を有効にします。スマートフォンでの使いやすさが重要な場合に役立ちます。これにより、狭いレイアウトでも送信操作が見つけやすく、タップしやすくなります。
ヘッダー設定
Section titled “ヘッダー設定”ヘッダー設定は、フォームの目的を説明し、ブロックにより強い構造を与えるのに役立ちます。任意ですが、ページをより分かりやすく、見やすくできます。共有のヘッダーパターンについては、ヘッダー設定 をご覧ください。
- 見出しとサブ見出しを追加します。フォームの用途、訪問者が問い合わせできる内容、または期待される返信内容を伝えられます。
- キャプションとアイコンは慎重に使用します。少し個性や強調を加えたい場合に適しています。よりフォーマルなレイアウトでは、シンプルなテキストのみのヘッダーがよりすっきりした選択肢になることがよくあります。
- ページ構造に合わせて見出しタイプを設定します。メインのページタイトルと競合せず、ブロックが自然に組み込まれて見えます。
- レイアウトに合うようにテキストを配置します。通常は左揃えが最も読みやすく、中央揃えはより販促的なデザインやミニマルなデザインでうまく機能します。
このブロックがメインのページタイトルを担うものではない限り、ここで最上位のページ見出しレベルは使用しないでください。
標準ブロック設定
Section titled “標準ブロック設定”ブロック背景設定
Section titled “ブロック背景設定”これらの設定を使うと、フォームを色、グラデーション、画像、または動画の背景の上に配置できます。周囲のコンテンツと分けたい場合や、よりブランド感のある機能エリアにしたい場合に便利です。共有の動作については、セクション背景設定 をご覧ください。
- 読みやすさを優先する場合は、単色または控えめなグラデーションを使用します。フォームでは、通常これが最も安全な選択です。
- 画像や動画の上にオーバーレイを追加します。そうすると、見出し部分が情報量の多いメディアの上でも読みやすく保たれます。
- 必要な場合のみモバイル専用メディアを設定します。デスクトップ用の画像や動画が小さな画面で不自然に切り抜かれる場合に有効です。
- 動画背景は控えめに使用します。動きがフォーム入力の妨げにならないようにするためです。
これらの設定は、ブロックのアイコンとテキストコンテンツのデフォルトカラーを上書きします。フォームをカスタム背景の上に置く場合や、特定のキャンペーンやページスタイルに合わせる必要がある場合に使用します。共有の色の動作については、カラー設定 をご覧ください。
- 見出しと補足テキストの色をまとめて調整します。ブロック全体に一貫性が生まれます。
- アイコンの色は主役ではなくアクセントとして使用します。
- 背景を変更した後はコントラストを再確認します。テキストを読みやすく保つためです。
表示設定は、ブロックをデスクトップ、モバイル、またはその両方に表示するかを制御します。よりシンプルなモバイルレイアウトにしたい場合や、デバイスごとに異なるお問い合わせ体験を提供したい場合に便利です。共有の動作については、表示設定 をご覧ください。
- 別のレイアウトでその閲覧者に十分対応できる場合にのみ、片方のデバイスでブロックを非表示にします。
- モバイルのみ、またはデスクトップのみの表示は意図的に使用します。重要なお問い合わせ導線をなくすためではなく、不要な要素を減らすためです。
使用上の注意
Section titled “使用上の注意”- 目的を明確に保ちます。 見出しとサブ見出しを使って、フォームの用途と訪問者が送る内容を説明してください。
- 操作を見つけやすくします。 ページに十分目立つボタンスタイルを選び、特にモバイルではわかりやすくしてください。
- 読みやすさを守ります。 背景画像、グラデーション、または動画を追加する場合は、テキストとコントロールが一目で明確に見えるようにしてください。
- ページ階層に合わせます。 ページの他の要素に合う見出しタイプを選び、ブロックがレイアウトを支えるようにします。競合させないようにしてください。
- 意図を持って表示設定を使います。 訪問者が引き続き明確な連絡手段を持てる場合にのみ、デスクトップまたはモバイルでブロックを非表示にしてください。
- 両方の表示領域を確認します。 レイアウト、配置、表示、またはメディアを変更した後は、デスクトップとモバイルの両方でブロックを確認してください。2つの表示では挙動が異なる場合があります。
- 代替スタイルを使える状態にしておきます。 テーマの組み込みスタイルを維持したい場合は、色とメディアをデフォルトまたは空欄のままにしてください。ブロックをより独立した見た目にしたい場合のみ、明示的な上書きを使用します。
- メディアはわかりやすさを基準に選びます。 デスクトップ用とモバイル用で異なるメディアを使う場合は、両方の表示で切り抜き、読み込み、テキストの読みやすさが問題なく機能することを確認してください。
- 状態メッセージを読みやすくします。 成功メッセージやエラーメッセージは、訪問者が混乱せずにフォームを完了できるよう、見やすく保ってください。