How to2020.02.06

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

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

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

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

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

目次

NetlifyにAjaxでFormを使う
Formがアクティブになっているか確認
1. HTMLでformタグを一度設置しないとアクティブにならない
POSTが404を返す場合はまず管理画面を確認

NetlifyにAjaxでFormを使う

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

1
2
3
4
5
6
7
8
$("#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というフィールドを送る場合のデータは下記のようになります。

1
2
3
4
{
	name: 'Example Name'.
    'form-name': 'contact'
}

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

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

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

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

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

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

1
2
3
<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を使っている人はハマりやすいかもしれません。