サーバーなしでフォーム送信を受け入れる

Throughout December we'll be highlighting a different Netlify feature each day. It might just be the thing you need to unlock those creative juices, and dust off that domain you registered but never deployed! Keep an eye on the blog and on for each feature!

フォームの投稿を受け入れる必要性は通常、サーバーのスタックにサーバーを追加する必要があるかもしれない最初の理由です.結局のところ、それらのフォームのポストはどこかに行かなければなりません.
しかし、設定、スケール、および維持するもののリストにサーバーを追加するだけで、あなたの訪問者がデータを送信することができますように、複雑さの歓迎されない飛躍です.
だからこそ、NetLifyは、方程式に他のインフラストラクチャを導入することなく、フォームの投稿を処理する機能が含まれていますNetlify Forms .

動作方法

NetLifyがあなたのサイトを展開するとき、あなたが出荷しているHTMLを見ます.この「後処理」ステップは、Netlifyがオプティマイザ・スニペット注入のようなものをするのを許します(我々は、今月、もう一つの日により多くの詳細を見なければなりません!また、NetLifyが自動的にバックエンドサービスを作成するために私たちを好むどんなHTMLフォーム要素もあれば見ることができることを意味します.

netlifyに対して、フォーム処理APIを要求します

これはトリッキーなように聞こえる.ああ!
フォームハンドラを必要とするnetlifyを指定するには、必要なのは、あなたが気にかけるHTMLのフォーム要素に属性を追加し、フォームが名前を持つことを確認することです.このように:

<form action="/thanks-page" method="POST" name="my-form-name" netlify>
    ...
</form>

加えることによってnetlify フォーム要素へのBoolean属性data-netlify="true" あなたが好むならば、NetLifyは現在あなたの訪問客がそのフォームに提出するHTTP POSTリクエストを聞いて、あなたのために提出を集めるのを知っています.あなたは(あなたのためにスパムフィルタされ、安全に保存されている)提出物を見つけることができますNetlify admin アプリ.
フォームのデータを提出した後、あなたのサイトの訪問者はあなたのフォームのaction 属性.
あまりにも良い音になるか?うん.we get that a lot !

クライアント側のフォームについてはどうですか？

上記のプロセスは、あなたの訪問者にあなたのフォームをHTMLとして提供していると仮定します.しかし、いくつかの人気のフレームワークは、クライアント側のJavaScriptを使用してHTMLを生成します.我々もそれをサポートすることはできますか?危ない!
JavaScriptのフレームワークに関係なく、クライアント側でフォームをレンダリングするために使用するフレームワークに関係なく、送信を処理するためのBECK ENDサービスを提供できます.詳しくはこちらをご覧くださいin the docs .
Netlifyフォームは、どのようにミッションが処理され、どのようにイベントを引き起こすことができるかについて興味深い可能性の多くを開きます.そして、これらのユーザーの相互作用をサポートするためにサーバーを追加する必要はありません.

詳細情報

About Netlify Forms

Docs: Netlify forms

Submitting form data with AJAX

Working with JavaScript forms