ブログ
2023.09.16

netlify formで送信後に404になる

nuxt3でnetlify formを使ってお問い合わせフォームを作った時に、送信後404になってしまった問題の解決策の備忘録です。

うまくいったコードがこちら

<form action="/" method="POST" name="contact">
	<input type="hidden" name="form-name" value="contact">
	<ul>
		<li>
			<label for="name">お名前<span>※必須</span></label>
			<input type="text" id="name" name="name" required="">
		</li>
		<li>
			<label for="affiliation">所属</label>
			<input type="text" id="affiliation" name="affiliation">
		</li>
		<li>
			<label for="mail">メールアドレス<span>※必須</span></label>
			<input type="text" id="mail" name="mail" required="">
		</li>
		<li>
			<label for="body">お問い合わせ内容<span>※必須</span></label>
			<textarea type="text" id="body" name="body" required=""></textarea>
		</li>
	</ul>
	<button type="submit">送信</button>
</form>

2行目の

<input type="hidden" name="form-name" value="contact">

がなかったため404になっていました。

ブログの執筆者

スズキトシヤ
workGeneral manager / Technical director
フロントエンドクラブの代表です。プログラミングとプランニングがちょっとできます。広告とサッカーが好きです。受賞歴:GOOD DESIGN AWARD / ACC / Young Lions Competitions - finalist / W3 Awards / The Webby Awards 等

その他の記事

  1. 2023.12.01
    初のリアルイベント!FRONTEND MEETUP 2023!
  2. 2023.10.13
    2023年10月以降の主なエンジニア向けイベント
  3. 2023.09.22
    新興のJavaScriptフレームワークNueとは?公式サイトざっくりまとめ
  4. 2023.09.20
    テクニカルディレクターとは?現役テクニカルディレクターが解説
  5. 2023.03.27
    GitHubにRSA SSHでgit push、git fetch、git pullをしようとするとエラーになる問題の解決方法
  6. 2023.02.25
    Astroでサブフォルダにbuildする方法
  7. 2023.02.19
    Astroでプロジェクトルートを基準にコンポーネントなどのパスを記述する方法
  8. 2023.02.19
    Astroでstylusファイルからglobalスタイルをimportする方法
  9. 2023.02.12
    「web制作におけるパスの書き方」絶対パス・ルート相対パス・相対パスの違いについて
  10. 2023.01.09
    フロントエンドクラブの新しい企みについて
  11. 2023.01.07
    Nuxt3でgenerate時にsitemapを動的に作る方法
  12. 2022.12.30
    なぜフロントエンドエンジニア向けコミュニティ「フロントエンドクラブ」を始めたのか
  13. 2022.12.28
    よく使うGitコマンド
  14. 2022.11.04
    HeadlessCMSを使った3つのサイト構築手法
  15. 2022.11.22
    WEB制作会社でエンジニアとして働くために必要なスキルについて
  16. 2022.10.27
    現役エンジニアから見るリアルなHeadlessCMS
一覧へ戻る