ニュースレター登録（インライン）

解説

インライン型ニュースレターフォームは、メールアドレスの入力欄と登録ボタンが横一列にぴったり並んだ、省スペースなサブスク登録フォームです。CSS のみで作られ、JavaScript は不要です。display:flex で入力欄とボタンを横並びにし、入力欄に flex:1 を与えて余白いっぱいに広げ、外枠は border-radius と overflow:hidden で角丸の一体型にまとめています。控えめな box-shadow で浮き上がる質感を出しています。

置きどころ

• サイトフッターのメール購読欄
• 記事下や CTA セクションの登録導線
• キャンペーン LP の先行登録フォーム

入力には type="email" と required を指定しているため、空欄や形式違いはブラウザが送信前に教えてくれます。ボタンは :hover で背景色が切り替わり、押せることが伝わります。色みはボタンの background とホバー色を変えるだけでブランドに合わせられます。実際の登録処理はメール配信サービスなどとの連携が別途必要です。横幅が狭い画面では入力欄が窮屈になりやすいので、必要に応じて縦並びへの切り替えも検討してください。

使用例・適したシーン

• お問い合わせフォーム
• ニュースレター登録
• 資料請求フォーム
• ログイン・新規登録