【Next.js】お問い合わせセクションの作り方を解説

LP の問い合わせは、社内の汎用フォームを埋め込む場所ではありません。名前、メール、用件の3つまでです。増やすほど完了率が落ちます。

見た目は、左に短い理由、右にフォーム、または1カラムで十分です。動きは入場だけです。

送信 API やメール配送は、この記事の範囲外です。先に見た目と文言を固め、接続はあとでも間に合います。

1つ目は、必須が多すぎることです。電話番号は、本当に必要になってから足します。

2つ目は、ボタンが「送信」だけのことです。「デモを予約する」のように、直後に起きることが分かる語にします。

3つ目は、エラーがボタンの下にしか出ないことです。各欄の下に出します。

見出し、1行の理由、「カード不要」などのマイクロコピー、3欄、ボタン。label はプレースホルダだけで代用しないでください。

左に所要時間、次に起きること、プライバシーの一文。右にフォーム。BtoB のデモ予約向きです。

余白、欄の高さ、ボタンのホバーまで揃った塊は、素の form では出ません。

DesignLayer でライブ確認し、action と欄名だけ自分の API に合わせてください。https://design-layer.com/components

無料コピーは1日3回です。プレースホルダのメールアドレスを公開しないでください。

運用で繰り返し出る質問です。