インライン購読フォーム
「インライン購読フォーム」は、見出し・説明文・メール入力欄・登録ボタンを 1 本の横並びにまとめたメルマガ登録 CTA です。 display:flex と justify-content:space-between で左にメッセージ、右に入力フォームを配置し、画面が狭くなると flex-wrap で自然に縦積みへ…
このパーツの使いどころと実装ポイント
「インライン購読フォーム」は、見出し・説明文・メール入力欄・登録ボタンを 1 本の横並びにまとめたメルマガ登録 CTA です。display:flex と justify-content:space-between で左にメッセージ、右に入力フォームを配置し、画面が狭くなると flex-wrap で自然に縦積みへ切り替わります。濃紺の背景に紫のボタンを置くことで、本文中に差し込んでも視線が止まりやすい構成です。
向いている場面
ブログ記事の途中や末尾、サービス紹介ページの区切り、ウェビナー告知ページなど、本文の流れを止めずに登録を促したい場所に向きます。専用の登録ページへ飛ばさず、その場で完結させたいときに効果的です。
カスタマイズと実装の注意
inputにはtype="email"とrequired、labelを付けると入力ミスを減らせて、スクリーンリーダー利用者にも親切です。- 送信先はメール配信サービスの埋め込みコードに置き換えます。プライバシーポリシーへのリンクを添えると信頼感が増します。
- 狭い画面では入力欄が窮屈になりやすいので、
min-widthの値を見直して指で押しやすいボタンサイズを保ちます。
よくある質問
実際にメール登録を動かすにはどうすればいいですか？
このパーツは見た目だけなので、formの送信先を配信サービスの埋め込みコードに差し替える必要があります。サービス側が発行するフォームのactionや埋め込みスクリプトを使うと登録が機能します。
スマホで横並びが崩れませんか？
flex-wrapを指定しているため、画面幅が足りなくなると自動的にメッセージとフォームが縦に並びます。崩れではなく意図したレスポンシブ動作です。