今回はChatGPTで問い合わせフォームを作成してみました。
サイトに実装するには多少のカスタマイズが必要ですが、ゼロから作成するよりは格段に工数が削減されます。
以下に実際に作成をしたプロンプトをご紹介します。
用途に合わせてプロンプトをカスタムして使用してください。
プロンプト例
あなたはWebデザイナーです。
自社のWebサイトに問い合わせフォームを設置したいと思っています。
以下の{条件}を守った上で、HTMLの例を出力してください
#Webサイト
Web広告の運用代行会社
#取得したい必須情報
会社名
担当者名
電話番号
メールアドレス
#取得したい任意情報
現在広告出稿を行なっているか
行なっている場合、現在の月次の出稿予算
広告出稿をしていない場合、これから出稿する予定があるのか
連絡が取りやすい時間
#入力完了後は下記のメッセージのページに遷移させてください
お問い合わせいただきありがとうございました。
3営業日以内に担当者からご連絡させていただきます。ChatGPT回答
以下の条件を元に、お問い合わせフォームのHTMLを作成します。
html
Copy code
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>問い合わせフォーム</title>
</head>
<body>
<h2>お問い合わせフォーム</h2>
<form action=”thankyou.html” method=”post”>
<!– 必須情報 –>
<div>
<label for=”company_name”>会社名:</label>
<input type=”text” id=”company_name” name=”company_name” required>
</div>
<div>
<label for=”contact_name”>担当者名:</label>
<input type=”text” id=”contact_name” name=”contact_name” required>
</div>
<div>
<label for=”phone_number”>電話番号:</label>
<input type=”tel” id=”phone_number” name=”phone_number” required>
</div>
<div>
<label for=”email”>メールアドレス:</label>
<input type=”email” id=”email” name=”email” required>
</div>
<!– 任意情報 –>
<div>
<label>現在広告出稿を行なっていますか？:</label>
<input type=”radio” id=”yes” name=”advertising_now” value=”yes”>
<label for=”yes”>はい</label>
<input type=”radio” id=”no” name=”advertising_now” value=”no”>
<label for=”no”>いいえ</label>
</div>
<div>
<label for=”budget”>現在の月次の出稿予算:</label>
<input type=”number” id=”budget” name=”budget”>
</div>
<div>
<label>広告出稿をしていない場合、これから出稿する予定がありますか？:</label>
<input type=”radio” id=”plan_yes” name=”advertising_plan” value=”yes”>
<label for=”plan_yes”>はい</label>
<input type=”radio” id=”plan_no” name=”advertising_plan” value=”no”>
<label for=”plan_no”>いいえ</label>
</div>
<div>
<label for=”contact_time”>連絡が取りやすい時間:</label>
<input type=”text” id=”contact_time” name=”contact_time”>
</div>
<div>
<input type=”submit” value=”送信”>
</div>
</form>
</body>
</html>
そして、thankyou.html の内容は以下の通りです。
html
Copy code
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>お問い合わせ完了</title>
</head>
<body>
<h2>お問い合わせ完了</h2>
<p>お問い合わせいただきありがとうございました。</p>
<p>3営業日以内に担当者からご連絡させていただきます。</p>
</body>
</html>
上記はHTMLのみのサンプルで、実際にデータを処理するためのサーバーサイドのスクリプトやセキュリティ対策、バリデーションなどは含まれていません。実際に利用する際は、その点を考慮して設計・実装を行ってください。
まとめ
ChatGPTは特定の要件を元に、非常に効果的なHTMLコードを迅速に提案することができます。
この記事を通じて、読者の皆様にもChatGPTの可能性を感じていただけたら幸いです。
もちろん、これはあくまで一例に過ぎません。
ChatGPTにはさまざまな質問や要件を投げかけることができますので、是非ともその能力をテストしてみてください！
コメント