// contact.jsx — お問い合わせフォーム（3ステップ: 入力→確認→完了） // Web3Forms（https://web3forms.com）で実際にメール送信。 // WEB3FORMS_KEY に発行されたアクセスキーを設定してください。 // （無料・1000件/月）https://web3forms.com から取得 // ★ここにWeb3Formsのアクセスキーを入れてください★ const WEB3FORMS_KEY = 'YOUR_ACCESS_KEY_HERE'; // 送信先メールアドレス（Web3Formsアカウントに紐付いています） const { useState: useStateC, useRef: useRefC } = React; function Contact() { const [step, setStep] = useStateC('form'); // form | confirm | done const [form, setForm] = useStateC({ type: '', company: '', name: '', kana: '', email: '', tel: '', message: '', agree: false, }); const [errors, setErrors] = useStateC({}); const update = (k, v) => { setForm((f) => ({ ...f, [k]: v })); setErrors((e) => ({ ...e, [k]: undefined })); }; const validate = () => { const e = {}; if (!form.type) e.type = 'お問い合わせ種別を選択してください'; if (!form.name.trim()) e.name = 'お名前を入力してください'; if (!form.email.trim()) e.email = 'メールアドレスを入力してください'; else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = 'メールアドレスの形式が正しくありません'; if (form.tel && !/^[\d\-+()\s]{6,}$/.test(form.tel)) e.tel = '電話番号の形式が正しくありません'; if (!form.message.trim()) e.message = 'お問い合わせ内容を入力してください'; else if (form.message.trim().length < 10) e.message = '10文字以上で入力してください'; if (!form.agree) e.agree = 'プライバシーポリシーへの同意が必要です'; setErrors(e); return Object.keys(e).length === 0; }; const [sending, setSending] = useStateC(false); const [sendError, setSendError] = useStateC(''); const onSubmit = (ev) => { ev.preventDefault(); if (validate()) { setStep('confirm'); window.scrollTo({ top: document.getElementById('contact').offsetTop - 60, behavior: 'smooth' }); } else { const first = document.querySelector('[data-error="true"]'); first?.focus?.(); } }; const onConfirm = async () => { setSending(true); setSendError(''); try { const payload = { access_key: WEB3FORMS_KEY, subject: `【古窯グループ お問い合わせ】${form.type}`, from_name: form.name, reply_to: form.email, '種別': form.type, '会社名': form.company || '（なし）', 'お名前': `${form.name}${form.kana ? ` (${form.kana})` : ''}`, 'メール': form.email, '電話番号': form.tel || '（なし）', '内容': form.message, }; const res = await fetch('https://api.web3forms.com/submit', { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify(payload), }); const data = await res.json(); if (data.success) { setStep('done'); } else { setSendError('送信に失敗しました。しばらく経ってから再度お試しください。'); } } catch (err) { setSendError('ネットワークエラーが発生しました。接続を確認してください。'); } finally { setSending(false); } }; const types = [ 'ご宿泊・お料理のご相談', 'ブライダル・KOYO Weddingについて', '法人・団体でのご利用', '取材・メディア', '採用について', 'その他のお問い合わせ', ]; return (
Contact お問い合わせ

古窯グループへのご相談・ご質問は、こちらのフォームよりお気軽にお寄せください。営業日2日以内に、担当よりご連絡いたします。

※ ご宿泊の予約は、各施設の予約ページから直接お申し込みください。

TEL
023-672-5454
平日 9:00 — 17:30
EMAIL
info@koyo-gr.com
24時間受付・営業日内に返信
ADDRESS
山形県上山市葉山 5-20
〒999-3292 ／ 日本の宿 古窯 内
{step === 'form' && (
{types.map((t) => ( ))}
{errors.type &&
{errors.type}
}
update('company',e.target.value)} />
update('name',e.target.value)} /> {errors.name &&
{errors.name}
}
update('kana',e.target.value)} />
update('tel',e.target.value)} placeholder="03-1234-5678" /> {errors.tel &&
{errors.tel}
}
update('email',e.target.value)} placeholder="name@example.com" /> {errors.email &&
{errors.email}
}