Gatsby.jsのサイトにNetlifyのformsを導入する
2882 ワード
シンプルなお問い合わせフォームをGatsby.jsの静的サイトに導入してみました。
<form
name="contact"
method="post"
data-netlify-honeypot="bot-field"
data-netlify="true"
autocomplete="off"
action="/thanks"
>
<input type="hidden" name="form-name" value="contact" />
<p hidden>
<label>
Don’t fill this out if you're human:
<input name="bot-field" />
</label>
</p>
<div>
<label>名前</label>
<input id="name" type="text" name="name" />
</div>
<div>
<label>メール</label>
<input id="email" type="email" name="email" />
</div>
<div>
<label>メッセージ</label>
<textarea id="message" name="message"></textarea>
</div>
<div>
<button type="submit">送信</button>
</div>
</form>
formタグの中にaction="/path-to-thanks-page"と記載することで、送信ボタンを押したあと自動的に用意したページに遷移することが出来ます。
これだけで簡単にフォームが生成できるのすごいですね。
Author And Source
この問題について(Gatsby.jsのサイトにNetlifyのformsを導入する), 我々は、より多くの情報をここで見つけました https://qiita.com/seuyu_bin/items/b1ccafa8cfe422389399著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .