2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Netlify Forms の完了画面をデフォルトから変更する

Last updated at Posted at 2019-02-06

GitHub へ push するだけで deploy できてしまう便利な Netlify ですが、<form> タグに data-netlify="true" を入れるだけで、フォームを置くことができます。

ただそれだけだと、フォーム送信後に Netlify のデフォルトのものが表示されてしまいます。これって、カスタマイズできないものかと、ドキュメントを漁ってみると…

By default, when visitors complete a form, they will see a generically styled success message with a link back to the form page. You can replace the default success message with a custom page you create by adding an action attribute to the

tag, entering the path of your custom page (like "/pages/success") as the value. The path must be relative to the site root, starting with a /.

つまり、

<form name="contact" method="POST" data-netlify="true" action="/送信完了後に表示させたいページパス">

で、とりあえずいけるということでした。

ヴァリデーションなど、細かな実装は必要ですが、簡易的なものから、 reCAPTCHA 2 を絡めたものまで Netlify でできてしまうのはなかなか興味深いです。

フォームに投稿された通知は Zapier の連携をオススメしてますが、そこをどうするかは悩み中。 Netlify の中で設定できるので、それを試してみようと思っています。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?