tubone

tubone

Japan Boyaki Ojisan

Recent posts  6 / 23

ハロウィーンはえちえちでチンパンジーなイベントじゃない。GitHubと向き合うイベントだGoogle Apps Script(GAS)とAPI FLASHとSlackAPIをClaspとJestとGitHub Actionで調理して定期的にWebページのスクリーンショットを撮る究極の謝罪はSlackのスタンプを活用しよう！ ～明日から使えるSlackスタンプスニペット集～台風の時の我が家のセンサー(netatmo)の値をZabbixで見る今日のラーメンAnsible + Serverspecを使ってMacの環境構築を自動でする (Azure DevOps Build Pipeline編)

Links

tubone-projectpersonal note
SUBSCRIBE

くっそかんたんに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用ページを個別に作る

せっかくの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種類のオプションが

用意されてます。

  1. いわゆる人間だったらこのフォームに何も入れるなという隠れフォームを作る（data-netlify-honeypot）
  2. 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から簡単にできます。

Img

また、Formが送信された時にメール or Slack or Webhookを流す機能もあります。

Img

これでお問い合わせを見逃すことがなくなりますね！

結論

以前、PHPで頑張ってFormを作ってましたが、最近はこんなに簡単にFormが作れるのかと感心しました。