// ContactFormRight.jsx const { useState, useEffect } = React; const ContactFormRight = () => { const [currentStep, setCurrentStep] = useState(1); const [isSubmitting, setIsSubmitting] = useState(false); const [formData, setFormData] = useState({ budget: '', deadline: '', purpose: [], referenceVideo: '', message: '', name: '', nameKana: '', company: '', email: '', phone: '' }); // reCAPTCHA v3用のhandleSubmit関数 const handleSubmit = () => { // バリデーション（簡易版） if (!formData.name || !formData.email || !formData.phone) { alert("必須項目を入力してください"); return; } setIsSubmitting(true); // reCAPTCHA v3を実行 grecaptcha.ready(function() { grecaptcha.execute('6LfV3PAqAAAAALjtwxbE6NTJduzTH0k-JWc-7YVp', {action: 'submit'}) .then(function(token) { // フォーム送信処理 submitForm(token); }); }); }; // フォーム送信関数 const submitForm = (captchaToken) => { // 実際のフォーム要素を作成 const form = document.createElement('form'); form.method = 'POST'; form.action = '/lp/send_mail.php'; form.style.display = 'none'; // フォームデータを追加 Object.entries(formData).forEach(([key, value]) => { const input = document.createElement('input'); input.type = 'hidden'; input.name = key; if (Array.isArray(value)) { input.value = value.join(', '); } else { input.value = value; } form.appendChild(input); }); // reCAPTCHAの応答を追加 const recaptchaInput = document.createElement('input'); recaptchaInput.type = 'hidden'; recaptchaInput.name = 'g-recaptcha-response'; recaptchaInput.value = captchaToken; form.appendChild(recaptchaInput); // リダイレクト先の設定 const redirectInput = document.createElement('input'); redirectInput.type = 'hidden'; redirectInput.name = 'redirect'; redirectInput.value = 'thanks.html'; form.appendChild(redirectInput); // フォームを本文に追加して送信 document.body.appendChild(form); form.submit(); };; // ステップ1: 動画の内容 const renderStep1 = () => (

{"3STEPで簡単入力！"}

{/* ステップインジケーター */}
1
2
3
{/* 予算 */}

{"検討ご予算"}

{/* {"必須"} */}
{["~20万円", "20~40万円", "40~60万円", "60~100万円", "100万円以上", "未定"].map((budget) => ( ))}
{/* 納期 */}

{"ご希望の納期"}

{"必須"}
{["1ヶ月以内", "2ヶ月以内", "3ヶ月以内", "3ヶ月以上", "未定"].map((deadline) => ( ))}
{/* 用途 */}

{"動画の用途"}

{"必須"}
{[ "企業PR動画", "商品・サービス紹介", "採用動画", "研修・教育動画", "イベント記録", "オンライン配信", "WEBサイト用動画", "SNS用動画", "その他" ].map((purpose) => ( ))}
{/* 参考動画 */}

{"参考動画"}

setFormData({...formData, referenceVideo: e.target.value})} style={{width: "100%", padding: "10px", border: "1px solid #ccc", borderRadius: "4px"}} />
{/* お問い合わせ内容 */}

{"お問い合わせ内容"}

{/* 次へボタン */}
); // ステップ2: お客様情報 const renderStep2 = () => (

{"3STEPで簡単入力！"}

{/* ステップインジケーター */}
1
2
3
{/* お客様情報フォーム */}
{/* 名前 */}

{"ご担当者名"}

{"必須"}
setFormData({...formData, name: e.target.value})} style={{width: "100%", padding: "10px", border: "1px solid #ccc", borderRadius: "4px"}} />
{/* ふりがな */}

{"ふりがな"}

{/* {"必須"} */}
setFormData({...formData, nameKana: e.target.value})} style={{width: "100%", padding: "10px", border: "1px solid #ccc", borderRadius: "4px"}} />
{/* 会社名 */}

{"会社名"}

{"必須"}
setFormData({...formData, company: e.target.value})} style={{width: "100%", padding: "10px", border: "1px solid #ccc", borderRadius: "4px"}} />
{/* メールアドレス */}

{"メールアドレス"}

{"必須"}
setFormData({...formData, email: e.target.value})} style={{width: "100%", padding: "10px", border: "1px solid #ccc", borderRadius: "4px"}} />
{/* 電話番号 */}

{"お電話番号"}

{"必須"}
setFormData({...formData, phone: e.target.value})} style={{width: "100%", padding: "10px", border: "1px solid #ccc", borderRadius: "4px"}} />
{/* reCAPTCHAのdivを削除 */} {/*
*/} {/* ボタンエリア */}
); // ステップ3: 完了画面 const renderStep3 = () => { // useEffect でコンポーネントがマウントされた時に一度だけ実行 useEffect(() => { // フォーム送信完了イベントをDataLayerにプッシュ window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'form_completion', 'form_name': 'contact_form', 'conversion_type': 'lead' }); console.log('コンバージョンイベントを送信しました'); // デバッグ用 }, []); // 空の依存配列で一度だけ実行 return (

{"3STEPで簡単入力！"}

{/* ステップインジケーター */}
1
2
3

{"お問い合わせありがとうございます"}

{"内容を確認次第、担当者よりご連絡いたします。"}

); }; // 表示するステップの決定 const renderContent = () => { if (currentStep === 1) { return renderStep1(); } else if (currentStep === 2) { return renderStep2(); } else { return renderStep3(); } }; return (
{renderContent()}
); }; // レンダリング処理 ReactDOM.render( , document.getElementById('contact-form') );