フォーム・お問い合わせコード生成用
見積もり依頼フォーム
予算・納期・依頼内容を、選びながら伝えられる。
用途・説明
制作や工事、サービス導入の見積もりを依頼するためのフォームを作ります。依頼内容の種類、予算の目安、希望の納期を選択式にして、文章を書くのが苦手な人でも送りやすくします。制作会社、工務店、士業、BtoBサービスのサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[依頼内容の種類]- 例：新規サイト制作、リニューアル、ロゴ制作
[予算の選択肢]- 例：〜30万円、30〜100万円、100万円〜、未定
[返信の目安]- 例：2営業日以内
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはフォームのUIに詳しいフロントエンドエンジニアです。 以下の条件で「見積もり依頼フォーム」を実装してください。 ## 入力項目 1. ご依頼内容（複数選択可）：[依頼内容の種類] 2. ご予算の目安（1つ選択）：[予算の選択肢] 3. ご希望の納期（1つ選択）：1か月以内／3か月以内／半年以内／未定 4. 会社名・お名前（必須） 5. メールアドレス（必須） 6. 詳しい内容（任意・テキストエリア） 7. 参考資料の添付（任意） ## レイアウト - 「ご依頼について」「お客様について」の2つのまとまりに分け、それぞれに小見出しを付ける - 選択式の項目は、ボタン型のチップを横に並べる（折り返す） - 項目の間隔 24px、まとまりの間隔 40px ## デザイン - チップ：高さ 40px、左右padding 16px、枠線 1px solid #CBD5E1、角丸 999px、文字 14px - 選択中のチップ：枠線 #1463F0、背景は #1463F0 の9%の淡い色、文字 #1463F0・font-weight 700 - 入力欄：高さ 48px、枠線 1px solid #CBD5E1、角丸 8px、文字 16px - 送信ボタン：幅 100%（最大 320px）、高さ 52px、背景 #1463F0、文字 #FFFFFF・font-weight 700 - ボタンの下に「[返信の目安]にご返信します」と小さく表示する ## 動作 - 予算と納期は「未定」を選べるようにし、決まっていなくても送れるようにする - 詳しい内容の欄には、「例：会社案内のサイトを10ページほどで作りたい」のような記入例を下に表示する ## アクセシビリティ - 選択式の項目は fieldset と legend でまとめ、input type="checkbox" / "radio" と label で実装する - 必須・任意は色だけでなく文字のラベルで示す - エラー文は該当する項目の下に表示し、aria-describedby で関連付ける ## 出力形式 - [使用技術]のコードを1つ出力（送信処理そのものは含めない）
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。