MK Dev

NetlifyのFormをAjaxで利用するとPOSTリクエストが404になる問題

Netlifyは無料で静的サイトをホスティングできてフォームも利用できるためよくお世話になっています。

新規のサイトもNetlifyで作っていたところFormをAjaxでリクエストするとなぜか404を返してしまう現象がありました。

違うサイトで正常に動いているコードを新規サイトに持ってきてコードのミスはないのに、思うように動かずハマってしまいました。

404になる原因とその対応方法を紹介します。

NetlifyにAjaxでFormを使う

Netlifyでは下記のコードでAjaxでFormにリクエストを送ることができます。
※コードは公式サイトに掲載されたjQueryの例

$("#my-form").submit(function(e) {
e.preventDefault();
var $form = $(this);
$.post($form.attr("action"), $form.serialize()).then(function() {
alert("Thank you!");
});
});

POSTで/にリクエストをform-nameと一緒に送るとAjaxで登録することができます。 例えばcontactというFormにnameというフィールドを送る場合のデータは下記のようになります。

{
name: 'Example Name'.
'form-name': 'contact'
}

Formがアクティブになっているか確認

上記で紹介した方法は正しいコードですが、POSTが404になる場合はFormがアクティブになっているか確認します。

Netlifyの管理画面からFormを選択するとアクティブなフォームがある場合はActive formsの欄に指定したform-nameの名前で登録されています。

HTMLでformタグを一度設置しないとアクティブにならない

FormをアクティブにするにはHTMLで指定のコードをNetlifyにデプロイする必要があります。

下記のコードが存在することでFormがアクティブになります。

<form name="contact" method="POST" data-netlify="true">
<input type="hidden" name="form-name" value="contact" />
</form>

アクティブになると管理画面のFormsから確認もできますし、Netlifyからアカウント登録時のメールアドレスにFormの使い始めを知らせるメールが届きます。

POSTが404を返す場合はまず管理画面を確認

NetlifyへのPOSTが404を返す原因はFormがアクティブになっていないことが原因でした。

もしも404が返ってきてFormがうまく動作しないという現象があれば、まずFormがアクティブになっているのか要確認です。

ドキュメントにはHTMLを記述することが記載されていますが、何度かNetlifyを使っている人はハマりやすいかもしれません。

AUTHORこの記事を書いた人

Koji Murakami

フリーでWeb開発をしているフロントエンドエンジニア。

SNS

SHARE記事をシェア

NetlifyのFormをAjaxで利用するとPOSTリクエストが404になる問題

RELATED POSTS関連記事

WEB制作の記事

WEB制作を依頼する

フリーのエンジニアとしてWEB制作のご依頼を引き受けています。
実績、できること、単価など詳しい内容をご覧いただきお問い合わせよりご連絡ください。