Netlify Formを使って、簡易Contact Formを作ってみる

この記事は1429文字で約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は役立つのかもしれませんね。

Gatsby.jsでForm用ページを個別に作る
Bot除け
- data-netlify-honeypot
内容の確認
結論

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>