Netlify Formを使って、簡易Contact Formを作ってみる
tubone
It's my life
Recent posts 6 / 97
Denoを使ってGraphQLを叩きながらSlackに投稿するHasura CloudのGraphQLが便利すぎた話ラズパイ活用！電子ペーパーを使ってカレンダーを作ってみる赤外線付きカメラモジュールとmotionを古いラズパイにつけてSlackと連動した監視システムを作ろうAKG K712 PROが断線して音が出なくなったので直したGoogle Chromeのテーマを作った(その2)WordCloud
SearchBox
Search my blog.この記事は1425文字で約4分で読めます
くっそかんたんにFormできた
Netlifyに簡単にFormを作る機能が用意されているので利用用途ないですが、Gatsby.jsで作ったBlogにFormを作ってみようかと思います。
https://www.netlify.com/docs/form-handling/
特に必要なわけではないので技術選定とかはしませんが、一般的にForm付きのページを作る際、
- PHPでゴリゴリ書く
- Google Formを使う
の選択肢があるかと思います。
せっかくGatsby.jsで静的サイトに仕上げてるのでPHPで書くのだけはやめたいです。
そんなときにNetlify FormやGoogle Formは役立つのかもしれませんね。
Table of Contents
Gatsby.jsでForm用ページを個別に作る
せっかくのReactなのでコンポーネントにしてもよいのですが、Formなんて1ページしか使わないので 再利用性を考えずページとして作っちゃいます。
Gatsby.jsではpagesに入れたJavaScriptは固定ページとして動作しますので、ここではcontact.jsという名前でFormページを作ります。（お問い合わせページですね）
公式Docを読むとFormタグを打つ際にattributeに data-netlify=true とするだけらしいですね。こりりゃ簡単。
早速作ってみます。
import React from 'react';
import ReactGA from 'react-ga';
export default class Contact extends React.Component {
render() {
return (
<div className="container">
<div
className="row"
style={{
margin: 15,
}}
>
<Sidebar/>
<div className="col order-2">
<h1>Contact Form</h1>
<p>Please your Comment.</p>
<form
name="contact"
method="post"
action="/thanks/"
data-netlify="true"
data-netlify-honeypot="bot-field"
>
{/* The `form-name` hidden field is required to support form submissions without JavaScript */}
<input type="hidden" name="form-name" value="contact"/>
<p hidden>
<label>
Don’t fill this out:{' '}
<input name="bot-field" onChange={this.handleChange}/>
</label>
</p>
<p>
<label>
Your name:<br/>
<input type="text" name="name" class="form-control" maxLength="30" minLength="2" required placeholder="Enter your name"/>
</label>
</p>
<p>
<label>
Your email:<br/>
<input type="email" name="email" class="form-control" aria-describedby="emailHelp" pattern="^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" required placeholder="Enter your email" />
<small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
</label>
</p>
<p>
<label>
Message:<br/>
<textarea name="message" class="form-control" placeholder="Something writing..."/>
</label>
</p>
<p>
<label>
File:<br />
<input type="file" name="attachment" class="btn btn-info" />
</label>
</p>
<p>
<button type="submit" class="btn btn-primary">Send</button>
</p>
</form>
</div>
</div>
</div>
);
}
}このような形でFormタグにattributeを追加するだけです。
どうやらNetlifyでビルド済みのHTMLをアップロードする際、タグを解析してからアップロードしてるらしい。
なので、ほかにもFormを使う際はname属性を変えて、別のFormということを示す必要があります。
もちろん、タグには通常のHTML同様、Bootstrapやラベル、patternを当てることもできますので、
<button type="submit" class="btn btn-primary">Send</button> <!-- btn classの設定 -->のような形や
<label>Your email:<br/>
<!-- ラベルを使ったり・・ -->
<input type="email" name="email" class="form-control" aria-describedby="emailHelp" pattern="^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" required placeholder="Enter your email" />
<!-- patternやrequired, placeholderも設定可能 -->
<small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
</label>のような形で直感的なFormを作ることもできます。
Bot除け
Netlify FormではいわゆるスパムBot除けとして2種類のオプションが
用意されてます。
- いわゆる人間だったらこのフォームに何も入れるなという隠れフォームを作る（data-netlify-honeypot）
- reCaptureを設定する
今回はお手軽に実装したいため、1番で進めます。
data-netlify-honeypot
data-netlify-honeypotの設定はFormのattributeに
data-netlify-honeypot=隠れフォームのname を設定します。
<form
name="contact"
method="post"
action="/thanks/"
data-netlify="true"
data-netlify-honeypot="bot-field"
>
<input type="hidden" name="form-name" value="contact"/>
<p hidden>
<label>
Don’t fill this out:{' '}
<input name="bot-field" onChange={this.handleChange}/>
</label>
</p>そして実際に隠れフォームを設定します。
hiddenにしてるため、ふつう人間が入力することはないですが、念のため、フォームに何も入れるなというラベルを貼っておきます。
こうすることで、bot-fieldに何らかしら値が入ってた場合、Form内容がNetlifyに登録されないようになります。
内容の確認
内容の確認はNetlify=>Forms=>Activity Formsから簡単にできます。
また、Formが送信された時にメール or Slack or Webhookを流す機能もあります。
これでお問い合わせを見逃すことがなくなりますね！
結論
以前、PHPで頑張ってFormを作ってましたが、最近はこんなに簡単にFormが作れるのかと感心しました。
tubone24にラーメンを食べさせよう！
ぽちっとな↓
