2 ステップ CTA フォーム

このパーツの使いどころと実装ポイント

このパーツは、見出しの直下にメールアドレス入力欄と送信ボタンを横並びにした、最短2ステップの行動喚起フォームです。display:flex の親を border-radius:999px のピル型枠で囲み、input と button を一体のカプセルに見せます。overflow:hidden で角を丸く切り抜くため、内側の入力欄に境界線を持たせない設計が要点です。

向いている場面

メルマガ登録、ウェイトリスト受付、資料ダウンロードの入口など、まずメールアドレスだけ取得して後続フローへ送りたい場面に向きます。個人情報を最小限しか求めないため、入力途中の離脱を抑えやすく、LPの中段や記事末尾に差し込んでも圧迫感が出ません。

カスタマイズと実装上の注意

• input には type="email" が付いており、ブラウザの簡易検証が効きます。送信前の必須チェックは required を足すと確実です。
• スマホでは横並びが窮屈になります。メディアクエリで flex-direction:column に切り替え、入力欄とボタンを縦積みにすると押しやすくなります。
• ピル枠の border 色を変えるだけでブランドに馴染ませられます。入力欄のプレースホルダは薄くなりがちなので、label を視覚的に併用するとアクセシビリティが上がります。