mottox2 blog

Netlify Formsで問い合わせフォームを作ったら簡単だった

blognetlify

当ブログは静的サイトホスティングサービスのNetlifyでホスティングされています。
今回、ブログに問い合わせフォームを置くためにNetlify Formsを使ったのですが、静的サイトのまま簡単にフォームが設置できて最高でした。

Speeeのもくもく会(めっちゃおしゃれなオフィスでもくもくできる)で作りました。ありがたい。

つくったもの

スクリーンショット 2018-05-29 11.32.43.png (225.3 kB)
https://mottox2.com/contact

Netlify Formsとは?

静的サイトを運営しているのに、フォームを置くために裏にPHPなどのコードを動かすみたいな選択肢はイケていません。
フォームを置くだけならGoogle Formなどの選択肢もありますが、NetlifyにはNetlify Formsというフォームを簡単に作って管理画面上で簡単に確認できるような仕組みを用意してくれています。

html
<form name="contact" method="POST" netlify>
  <!-- Your Form -->
</form>

のような形のHTMLを書くだけです。また自分でHTMLを書くのでデザインのカスタマイズも自由自在、サイトにあったイメージのフォームを置くことができます。
なお、100件のリクエストまで無料プラン(Forms Free)で使うことができます。参考: Price

Docsによると、ビルド時にHTMLをパースして、内部にformが存在しているか確かめているそうです。

Docucment

Static Site Generatorで使うときに注意すること

GatsbyなどのStatic Site GeneratorでFormsを使用するはform-nameというhidden fieldを足す必要があります。Netlifyのブログ記事によるとNetlifyが挿入するフォームをGatsbyが消してしまうためだそうです。

おそらく前述のビルド時にHTMLをパースするときにNetlifyがform-nameというhidden formを埋め込むので、それを手動でやってくれという話だと思います。
以下のようなコードを書けば動きます。

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

GatsbyでNetlify Formsを使うサンプルコードも用意されています。
imorente/gatsby-netlify-form-example: Example site integrating Netlify's form handing in Gatsby's starter template

B!
dev

CLIで利用するNode.jsの書き捨てプログラムを作成するコツ

プログラマーであれば単純作業をプログラムに任せると思います。今回は備忘録を兼ねてNode.jsで書き捨て前提のプログラムを書く際に、よく使っているテクニックをまとめてみました。 やっていることは同じ

nodejs
tool

おしゃれなコード画像を生成するCLIツール『Silicon』

自分はLT資料を作る際に、『Carbon』というおしゃれなコード画像を生成するWebサービスを利用しています。今回はCarbonをインスパイアした『Silicon』というRust製のCLIツールを発見

toolrust
event

「技術書同人誌博覧会」にサークル参加してきた

2019/07/27に大田区産業プラザPioで開催された技術書同人誌博覧会(通称「技書博」)にサークル参加してきました。 「ブログを書くまでがイベント」ということですので、新刊の話、次回の新刊、当日

技術同人誌