以下は、v0.dev(Vercel)の「AIさんいん 研修感想ページ」用にカスタマイズされたHTML+Tailwind CSS+EmailJS連携のコードテンプレートです。現在の問い合わせフォームの構成をコピーし、指定通りにロゴ・入力項目・メール送信機能を実装しています。✅ 入力項目(すべて必須)研修が「勉強になった / ならなかった」選択形式(ラジオボタン)会社名氏名感想(テキストエリア)✅ 完成コード(feedback.tsx)"use client" import { useRef } from "react"; import emailjs from "@emailjs/browser"; import Image from "next/image"; export default function FeedbackForm() { const form = useRef<HTMLFormElement>(null); const sendEmail = (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault(); if (!form.current) return; emailjs.sendForm( "YOUR_SERVICE_ID", // ← EmailJSのサービスID "YOUR_TEMPLATE_ID", // ← EmailJSのテンプレートID form.current, "YOUR_PUBLIC_KEY" // ← EmailJSのパブリックキー ).then( (result) => { alert("感想を送信しました。ありがとうございました!"); form.current?.reset(); }, (error) => { alert("送信に失敗しました。時間を置いて再度お試しください。"); console.error(error.text); } ); }; return ( <div className="min-h-screen bg-white flex flex-col items-center px-4 py-8"> {/* ロゴ /} <div className="mb-6"> <Image src="/images/ai-sanin-logo.jpg" alt="AIさんいんロゴ" width={250} height={100} /> </div> <div className="bg-gray-50 p-6 rounded-lg shadow-lg w-full max-w-lg"> <h2 className="text-xl font-bold mb-4 text-center text-blue-800">研修感想フォーム</h2> <form ref={form} onSubmit={sendEmail} className="space-y-4"> {/ 質問1:勉強になったか /} <div> <label className="block font-semibold mb-1">研修は勉強になりましたか?</label> <div className="flex gap-4"> <label> <input type="radio" name="wasHelpful" value="勉強になった" required className="mr-1" /> 勉強になった </label> <label> <input type="radio" name="wasHelpful" value="勉強にならなかった" required className="mr-1" /> 勉強にならなかった </label> </div> </div> {/ 会社名 /} <div> <label className="block font-semibold mb-1">会社名</label> <input type="text" name="company" required className="w-full border rounded px-3 py-2" /> </div> {/ 氏名 /} <div> <label className="block font-semibold mb-1">お名前</label> <input type="text" name="name" required className="w-full border rounded px-3 py-2" /> </div> {/ 感想 */} <div> <label className="block font-semibold mb-1">ご感想</label> <textarea name="feedback" required className="w-full border rounded px-3 py-2 h-32"></textarea> </div> <button type="submit" className="w-full bg-blue-600 text-white font-bold py-2 rounded hover:bg-blue-700"> 感想を送信する </button> </form> </div> </div> ); } ✅ 画像パス指定ロゴ画像のパスは public/images/ai-sanin-logo.jpg に置いてください。アップロードされた画像をそのまま使用する場合、名前を ai-sanin-logo.jpg に変更してください。✅ EmailJS 側の設定https://www.emailjs.com/ にて無料アカウント登録サービスID・テンプレートID・パブリックキーを取得テンプレート内容に以下の変数を含めてください:wasHelpful company name feedback ✅ ページURL例このフォームを /feedback で表示したい場合は、Next.js プロジェクトの app/feedback/page.tsx に保存してください。ご希望があれば、Thank youページ(完了画面)や、バリデーションの強化、日本語フォント調整も追加可能です。必要でしたらPDF形式でもご提供いたします。どうされますか?
提供されたコードテンプレートを基に、AIさんいん研修感想ページを実装いたします。EmailJS連携とロゴ表示を含む完全なフィードバックフォームを作成します。
AIさんいん研修感想ページを実装しました!以下の機能を含んでいます:
テンプレートに以下の変数を設定:
{{wasHelpful}}
- 研修評価{{company}}
- 会社名{{name}}
- 氏名{{feedback}}
- 感想/feedback
- メインのフィードバックフォーム/feedback/thank-you
- 送信完了ページpublic/images/ai-sanin-logo.jpg
- ロゴ画像背景色を薄ピンク色に変更いたします!
背景色を薄ピンク色のグラデーションに変更しました!これで他のブルー系のフォームと区別しやすくなります。