/contact のお問い合わせフォーム送信がCORSでブロックされているため、
fetchを no-cors モードで送信するように修正してください。
【送信先URL（固定）】
https://script.google.com/macros/s/AKfycbxPqOi8W2ZvaSxRNvDi4hAG473n5rkn9zL0GUvYu3V6ozgwXb6AnQFhXRPAneFV-aC9/exec
【修正内容】
修正ファイル: /app/contact/page.tsx
handleSubmit の fetch 周りのコード:
try {
await fetch(GAS_ENDPOINT, {
method: "POST",
mode: "no-cors",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
})
// no-cors mode: レスポンスは読めないため、例外が発生しなければ成功扱い
setSubmitStatus("success")
setFormData({
name: "",
company: "",
email: "",
phone: "",
message: "",
})
} catch (error) {
setErrorMessage("送信に失敗しました。時間をおいて再度お試しください。")
setSubmitStatus("error")
} finally {
setIsSubmitting(false)
}mode: "no-cors" を追加し、res.ok / res.status の判定を削除しました。fetchが例外を投げずに完了すれば成功扱いとしてフォームをリセットし、catchに入った場合のみエラー表示します。デバッグ用の console.log も削除しました。
変更ファイル: /app/contact/page.tsx
該当コード:
hp を追加:const [formData, setFormData] = useState({
name: "",
company: "",
phone: "",
email: "",
message: "",
hp: "",
})hp を含める:const payload = {
...
hp: formData.hp,
...
}{/* Honeypot field for spam protection */}
<div className="absolute left-[-9999px] opacity-0 h-0 w-0 overflow-hidden" aria-hidden="true">
<Label htmlFor="hp">{"Do not fill this field"}</Label>
<Input
id="hp"
name="hp"
type="text"
value={formData.hp}
onChange={handleChange}
tabIndex={-1}
autoComplete="off"
/>
</div>ハニーポットフィールドは absolute left-[-9999px] と opacity-0 で視覚的に非表示にし、tabIndex={-1} でキーボードナビゲーションからも除外しています。通常ユーザーはこのフィールドに触れないため空文字のまま送信されますが、ボットは自動入力する可能性があるため、GAS側で hp に値がある場合はスパムとして処理できます。