tubone

tubone

Boyaki makes a new world


 Recent posts  6 / 53

SepOctNovDecJanオムロン HV-F312で腰の痛みをなくすGithub Actionを使って、簡単CIを作ってみるChromeDriverがGoogleChrome v76 に対応していないらしい。Googleデータポータルを触ってみるHyper-vにMetasploitableの仮想マシンを立ててみるNightwatch.jsでE2Eテストを回したときにうまく動かないたった一つの理由particles.jsをVue.jsで使ってかっこいいページを作るGitPitchを使ってMarkdownからプレゼンテーションを作ってBadgeをレポジトリに貼るSentryを使ってフロントエンドのエラーを確認するJSON Resume + API With GitHubを使って、さくっと職務経歴書チックなもののAPIなど作ってみるGitHubに30日間草を生やし続けた感想Netlify Formを使って、簡易Contact Formを作ってみる10/1は天下一品の日Ansible + Serverspecを使ってMacの環境構築を自動でする (Ansible編)Ansible + Serverspecを使ってMacの環境構築を自動でする (Serverspec編)今日のラーメン台風の時の我が家のセンサー(netatmo)の値をZabbixで見る究極の謝罪はSlackのスタンプを活用しよう! ~明日から使えるSlackスタンプスニペット集~ハロウィーンはえちえちでチンパンジーなイベントじゃない。GitHubと向き合うイベントだ昔ながらのラーメンたべたい珠玉の一杯。たくさん残業した日はこのラーメンを食べろ!スープの衝撃!ここまでうまいスープはあるのか!?なラーメンGitHubに草を生やし続け90日が経ったので感想を書くGoでAWS Lambdaを動かして、GitHubAPIv4(GraphQL)を叩いてみた感想Hadoopゾウさんについて本気出して考えてみたNuxt.jsでparticles-bg-vueを使うNuxt.jsのmodulesをCompositionAPIで使ってみる(@nuxtjs/toast編)くろおびらーめん with チャーシュー飯Nuxt.jsのmodulesをCompositionAPIで使ってみる(@nuxtjs/toast Global Option編)Nuxt.js + Composition APIでVuexのStateをReactiveに使う方法【初学者】Juliaを使って円周率を求めるデスクのかわいいやつら面倒なことはPythonにやらせよう@GitHub API v4を使ったリリース実績取得Gatsby.jsで作ったブログに読み終わるまで○○分を追加した話Google広告設定でみる属性情報であなたをもっと知ろう!Blog用に新しいLogo作った話今年1年を振り返ってGoのEchoでJaegerを使ってボトルネックを調査するGatsby.jsで作ったBlogの投稿をGitHubの草にして表示させるWeb Developer Roadmap 2020を眺めながら今年の目標(Frontend)をだらだら考えるの会AWS X-RayでLambdaのトレースをしつつ、Datadog APMに連携するElixirでパラレルな負荷試験ツールを作るMonWedFri
Elixirでパラレルな負荷試験ツールを作るAWS X-RayでLambdaのトレースをしつつ、Datadog APMに連携するWeb Developer Roadmap 2020を眺めながら今年の目標(Frontend)をだらだら考えるの会Gatsby.jsで作ったBlogの投稿をGitHubの草にして表示させるGoのEchoでJaegerを使ってボトルネックを調査する今年1年を振り返って


 SearchBox

Search your interesting by Algolia in this blog.


 All 145 Tags

ぼやき 19JavaScript 12GitHub 7ラーメン 6Vue.js 6TypeScript 6デブ活 5Nuxt.js 4React 3Gatsby.js 3Ansible 3Serverspec 3Mac 3自動テスト 3AWS 3Python 3Auto Provisioning 3GitHub Action 2Go 2Netlify 2Lambda 2GraphQL 2ChromeDriver 2Chainer 2Write Code Every Day 2toast 2CompositionAPI 2test 1particle.js 1GitPitch 1GitHub Badges 1Azusa Colors 1E2E Test 1Sentry 1監視 1JSON Resume 1GitHub Pages 1Resume 1CV 1 1weed 1Selenium 1Netlify Form 1GoogleChrome 1Contact Form 1Travis 1天下一品 1健康 1Gatsby 1腰痛 1Headless CMS 1GitHubAction 1Azure Devops Build Pipeline 1netatmo 1台風 1IoT 1センシング 1Google Apps Script 1API FLASH 1SlackAPI 1Clasp 1CI 1Jest 1Unit Test 1Slack 1Stamp 1ハロウィーン 1Nim 1docopt 1CLI 1昆布 1Googleデータポータル 1BI 1Google Analytics 1仮想化 1Hadoop 1ゾウ 1AWS認定ソリューションアーキテクトプロフェッショナル 1資格 1勉強法 1Hyper-v 1metasploitable 1RNN 1LSTM 1Chat BOT 1アイマス 1デレマス 1ひなこのーと 1Deep Learing 1OpenCV 1機械学習 1CNN 1分類学習 1顔認識 1powerShell 1particles-bg-vue 1particle 1Proton 1particles.js 1modules 1E2Eテスト 1Nightwatch.js 1チャーシュー飯 1Composition API 1Vuex 1ストアパターン 1ギター 1DTM 1エフェクター 1ATELIERZ 1Caparison 1VOCALOID 1Julia 1円周率 1初心者 1The Gauss–Legendre algorithm 1Leibniz formula for π 1早稲田 1かわいい 1恐竜時代 1ことり隊 1GitHub API v4 1リリース実績 1Estimated Reading Time 1あと何分 1Google広告設定 1Google 1属性情報 1Persolal Data 1Logo 1SVG 1Server 1Seti@Home 1振り返り 1Frontend 1Web Developer Roadmap 2020 1Echo 1Jaeger 1ボトルネック調査 1Elixir 1Load Test 1React Calendar Heatmap 1X-Ray 1Datadog 1APM 1
この記事は295文字1.5で読めます

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

用意されてます。

  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が作れるのかと感心しました。

˚