フォーム・お問い合わせコード生成用
1行で完結するメール登録フォーム
入力欄とボタンを一体にした、コンパクトな登録フォーム。
用途・説明
メールアドレスの入力欄と登録ボタンを横1行にまとめた、ニュースレターや事前登録用のフォームを作成します。フッターや記事の末尾に置いても場所を取りません。送信後のメッセージやエラー表示まで含めて指定しています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：最新情報をメールで受け取る
[補足文]- 例：月に1〜2回、お役立ち情報をお届けします。
[ボタン文言]- 例：登録する
[送信先]- フォームのaction。未定なら「#」のまま
[使用技術]- 例：HTML/CSS/JavaScript、React + Tailwind CSS
プロンプト全文
あなたはフォームのUXに詳しいフロントエンドエンジニアです。 以下の条件で「1行で完結するメール登録フォーム」を実装してください。 ## 表示内容 - 見出し：[見出し] - 補足文：[補足文] - メールアドレス入力欄（プレースホルダー：you@example.com） - 登録ボタン：[ボタン文言] - 注記：「登録はいつでも解除できます。」とプライバシーポリシーへのリンク ## レイアウト・デザイン - 入力欄とボタンを1つの枠の中に横並びで収める（枠：背景 #FFFFFF、1px solid #DCE4F0、角丸 9999px、内側の余白 4px） - 入力欄は枠線なしで残りの幅いっぱい、文字 16px（スマホでの自動ズームを防ぐ） - ボタン：高さ 44px、角丸 9999px、背景 #1463F0、文字 #FFFFFF、font-weight 700 - 枠全体の最大幅 480px - 画面幅 400px 未満では入力欄とボタンを縦に並べ、それぞれ幅100%にする ## 状態 - 入力欄にフォーカスしたら、外側の枠の色を #1463F0 に変え、薄いリングを表示（:focus-within） - 送信中：ボタンを無効化し、文言を「送信中…」に - 成功：フォームを「登録ありがとうございます。確認メールをお送りしました。」に置き換える - エラー：枠を赤系にし、枠の下に具体的なメッセージを表示（例：メールアドレスの形式が正しくありません） ## 入力チェック - 未入力と形式の誤りを送信時にチェックする - input は type="email"、autocomplete="email"、inputmode="email"、required ## アクセシビリティ - プレースホルダーをラベル代わりにしない。視覚的に隠した label を用意する - エラーメッセージは aria-describedby で入力欄と関連付け、role="alert" で通知する - 成功メッセージは role="status" の要素に表示する ## 出力形式 - [使用技術]のコードを1つ出力（送信先：[送信先]） - 送信処理は仮の関数にし、差し替える箇所をコメントで明示
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。