模写修行メディア

NetlifyのForms機能でフォームを作る方法!サーバーサイドの知識0で実装可能!

NetlifyのForms機能でフォームを作る方法!サーバーサイドの知識0で実装可能!

この記事をシェア:

サイトを制作する際はフォームを設置する機会が多くあります。

しかし、サーバーサイドの知識がない方は、フォームをどう実装するか悩んだ経験があるのではないでしょうか?

フォームのためだけにWordPressを導入しているケースもありますが、あまり良い選択肢だとは思えません。

Netlifyという、静的ホスティングサービスを使えば、簡単にサイトのホスティングやForms機能を使ったフォームの設置が可能です。

この記事では、Netlifyの登録からForms機能を利用したお問い合わせフォームの設置までを初学者向けに解説します。

フォームを作成する際に気をつけること

フォームを作るには、サーバーサイドの処理が必要になります。

何か見た目や機能を実装する際に、HTML・CSSやavaScriptであれば、知識がなくてもある程度コピペだけで実装ができてしまうこともあります。

しかし、サーバーサイドは、セキュリティなどサイトの安全性に関わる処理も記述するので、知識がない状態でコピペで実装するのはとても危険です。

何か不具合が起きた時に修正もできないので、サーバーサイドの知識がなくても実装できる方法を検討した方が良いです。

サーバーサイドの知識がない方がフォームを導入する場合、主要な選択肢は4つあります。

  1. WordPressのプラグインを利用する
  2. 外部サービスやライブラリを利用する
  3. Googleフォームを利用する
  4. メーラーに飛ばす

お問い合わせがほぼないようなサイトは 3,4でも良いように思います。

今回は、2に含まれる、NetlifyのForms機能を利用して、お問い合わせフォームを作成します。

Netlifyとは?

Netlifyとは、静的ホスティングサービスです。

静的ホスティングサービスとはHTML・CSS / JavaScriptで作られた静的なサイトをホスティング(≒ 公開)出来るサービスのことです。静的なサイトでしか使えないので、WordPressのような動的なシステムには使えません。

Netlifyは管理画面からドラッグアンドドロップでファイルをアップしたり、GitHubと連携しプッシュすることで自動でデプロイ(≒ 公開)、することができます。

無料枠について

機能詳細
チームメンバー1
同時ビルド数1
転送量100GB/月
ビルド時間300 分/月
フォーム送信数100 件/月

Netlifyには無料で使える範囲が決まっています。上記は、無料枠の制限の一部になります。小規模サイトであれば無料枠内で対応できると思います。

超過すると支払い通知が届くので、料金プランは事前に把握しておきましょう。

NetlifyのForms機能とは

NetlifyのForms機能とは、Netlifyの提供する機能の1つです。

Forms機能を利用すれば、サーバーサイドの処理を記述する必要はありません。フォームから送信されたデータを受け取り、Netlifyの管理画面から管理や確認ができるようになります。

  • EmailやSlackへ通知を送る
  • サンクスページへのリダイレクト
  • honeypot field / reCAPTCHA2を使ったスパム対策

これらも無料枠で実装することができます。

NetlifyのForms機能を使ってお問い合わせフォームを作ってみよう

NetlifyのForms機能を使って、実際に簡単なお問い合わせフォームを作ってみます。

  1. Netlifyの登録
  2. お問い合わせフォームのコーディング
  3. プロジェクトの作成と更新
  4. フォームを送信してみる
  5. サンススページを作る
  6. バリデーションの実装
  7. スパム対策の実装
  8. メールで通知を受け取る

これらの順で解説します。

Step1:Netlifyの登録

まずは、Netlifyアカウントの登録をします。

Netlifyトップページ
Netlifyにアクセスし、右上の「Sign up」をクリック。
Netlifyアカウント登録画面

GitHub / GitLab / Bitbucket / Emailを利用してアカウント登録ができます。手順に沿って登録を進めてみてください。


Netlify画面

登録が完了するとこのような管理画面にログイン出来ます。

Step2:お問い合わせフォームのコーディング

お問い合わせフォーム
サンクスページ

今回作るお問い合わせページとサンクスページの見た目になります。

コードを準備しておいたので、ダウンロードをして使ってみてください。必要なコードは全て書いてあるので、この後の解説と照らし合わせてみるとわかりやすいと思います。

コピペで使える!HTML・CSSでフォームをおしゃれにカスタマイズする方法

フォームのコーディングに関しては、上記の記事を参考にしてみてください。

Step3:プロジェクトの作成と更新

💡 プロジェクトの作成

プロジェクト作成

赤枠内にファイル一式をドラッグアンドドロップし、アップすることでプロジェクト(サイト)が作成されます。Step2でファイルをダウンロードした方は、project.zipを解凍して一式アップすれば良いです。

プロジェクト画面

上記の画面が表示されたと思います。

赤枠内のURLがサイトURLになります。クリックしてお問い合わせフォームが表示されているか確認してみてください。表示さていれば、無事プロジェクトの作成が完了です。


💡 プロジェクトの更新

プロジェクトトップ画面

プロジェクトの更新も簡単です。「Production deploys」をクリック。

ビルド画面

修正したファイルを、赤枠内に再度ドラッグアンドドロップすると、プロジェクトが更新されます。


💡 サイト名の変更

サイト設定ボタン

最後にサイト名を変更しておきます。「Site settings」ボタンをクリック。

サイト設定画面

「Change site name」ボタンをクリック。

サイト名変更ポップアップ

任意のサイト名を指定し、「Save」ボタンをクリック。これで、サイト名の変更が完了です。サイト名が変更されると、サイトURLも変わるのでご注意ください。

ドメインの変更
Netlifyは独自ドメインを使うことも可能です。変更する際は、「Domain settings」から行ます。

Step4:フォームを送信してみる

ダウンロードファイルを使って同じ手順でやっている場合、ここまででフォームが動くはずなので、試しに送信してみてください。

受信確認画面

送信されたメッセージは、「Recent form submissions」に表示されます。メッセージをクリックすると内容を確認できます。

受信確認画面

送信された内容です。各項目の左の「Name, Customer Type, Service Menu...」などは、各フィールドの name 属性の値です。


💡 コードの解説

Forms機能を利用するには、formdata-netlify="true"またはnetlifyを指定するだけです。

<form name="contact" method="POST" action="/thanks.html" data-netlify="true">
    省略...
</form>

<!-- or -->

<form name="contact" method="POST" action="/thanks.html" netlify>
    省略...
</form>

method="POST"はサーバーサイドにも関わる話しなので、解説はしませんが必ず入れないといけないと思っておいてください。action="/thanks.html"にはサンクスページのパスを記入します。サンクスページに関しては後述します。

<select name="schedule[]">
    <option value="1ヶ月以内">1ヶ月以内</option>
    <option value="2ヶ月以内">2ヶ月以内</option>
    <option value="3ヶ月以内">3ヶ月以内</option>
    <option value="未定">未定</option>
</select>

selectcheckboxのような、複数の選択可能なフィールドは、name="schedule[]"のように、name属性の値の後に[]を指定してください。

Step5:サンススページを作る

デフォルトサンクスページ

Forms機能には、デフォルトで上記のサンクスページが用意されています。

異なるページを表示したい場合は、サンクスページを自分で用意します。今回のダウンロードファイルは、自作したサンクスページが表示されるようになっています。

<form name="contact" method="POST" action="/thanks.html" data-netlify="true">
    省略...
</form>

自作したサンクスページを表示する場合、formaction="/thanks.html"のようにaction属性を指定し、値にサンクスページのパスを指定します。この時、パスは、/から始まる必要があるので注意してください。

Step6:バリデーションの実装

Forms機能には簡単にバリデーションを実装する方法はありません。従って、自分でJavaScriptを書いて実装する必要があります。

長くなるのでこの記事では JavaScript を使ったバリデーションには触れません。簡易的なものでよければHTML5のフォームバリデーションを使用すれば良いです。ダウンロードファイルではrequiredのみ指定しています。

Step7:スパム対策の実装

Forms機能ではhoneypot fieldかreCAPTCHA2を使って、簡単にスパム対策を実装することができます。


💡 honeypot fieldを使う方法

honeypot fieldは、スパム判定用の隠しフィールドを設置します。送信時に隠しフィールドに値が入力されているかどうかでスパム判定を行っています。

<form name="contact" method="POST" action="/thanks.html" netlify-honeypot="ハニポットフィールド名(自由に設定可)" data-netlify="true">
    <!-- スパム判定用の隠しフィールド -->
    <input type="hidden" name="ハニポットフィールド名(自由に設定可)" />

    <!-- テキスト -->
    <div class="form-item">
        <span class="form-item-name">お名前</span>

        <div class="form-item-body">
            <div class="form-item-text">
                <input type="text" name="name" value="" class="m-form-text" required />
            </div>
        </div>
    </div>

    省略...

    <!-- 送信ボタン -->
    <div class="m-btn-wrap">
        <input type="submit" name="" value="送信" class="m-btn" />
    </div>
</form>
  1. formにnetlify-honeypotを指定
  2. スパム判定用の隠しフィールドを配置

ハニポットフィールド名(自由に設定可)は、1と2で同じ値であれば自由に設定可能です。


💡 reCAPTCHA2 を使う方法

いくつかのコードを指定するだけで簡単にreCAPTCHAが利用できます。reCAPTCHAは現在バージョン3が最新ですが、Netlifyではバージョン2を使うようになっています。

reCAPTCHA
<form name="contact" method="POST" action="/thanks.html" data-netlify-recaptcha="true" data-netlify="true">
    <!-- テキスト -->
    <div class="form-item">
        <span class="form-item-name">お名前</span>

        <div class="form-item-body">
            <div class="form-item-text">
                <input type="text" name="name" value="" class="m-form-text" required />
            </div>
        </div>
    </div>

    省略...

    <!-- recaptcha -->
    <div class="recaptcha-item">
        <div data-netlify-recaptcha="true"></div>
    </div>

    <!-- 送信ボタン -->
    <div class="m-btn-wrap">
        <input type="submit" name="" value="送信" class="m-btn" />
    </div>
</form>
  1. formにdata-netlify-recaptcha を指定
  2. data-netlify-recaptcha="true"を含む要素を配置(recaptchaとコメントを入れている箇所)

data-netlify-recaptcha="true"を含む要素はどこに入れても良いですが、通常送信ボタンの前に入れます。

Step8:メールで通知を受け取る

フォームが送信された際にメールやSlackで通知を受け取ることも可能です。今回は、メールで通知を受け取ります。

プロジェクトトップ画面

Formsをクリック。


Settings and usageボタン

「Settings and usage」ボタンをクリック。


Add notification画面

「Add notification」ボタンをクリックすると通知項目が表示されます。今回は、Emailで通知を受け取りたいので「Email notification」を選択します。


Email notification画面

「Email notification」をクリックすると、ポップアップが表示されるので、各項目を設定します。

THTH
Event to listen for「New form submission」を指定
Email notification通知を受け取りたいメールアドレスを指定
Form通知を受ける対象のフォームを指定(表示されるフォーム名はformに指定した name 属性の値)

設定が完了したら、お問い合わせを送信し確認してみてください。


通知メール

このようなメールが来ているはずです。

メール通知の件名を変更したい場合は、name属性がsubjectの隠しフィールドを用意します。

<input type="hidden" name="subject" value="お問い合わせがありました" />

これをform内に入れればOKです。type="hidden"なので、表示上は見えません。

注意
反映されるのはメールの件名のみで、Netlifyの管理画面には反映されません。

まとめ

今回は、NetlifyのForms 機能を利用して、お問い合わせフォームを作成しました。

NetlifyのForms機能以外にもサーバーサイドの知識がなくても、JavaScriptだけでフォームが実装出来るライブラリもあります。

今回は簡易的なフォームを実装しましたが、実際は他にも色々要望が出るケースもあります。

  • JavaScriptを使ったバリデーション
  • 確認画面を追加する
  • ユーザーに自動返信メールを送る

これらは割と要望があることなので、興味がある方は挑戦してみてください。

コーディングの練習が出来るサービス「模写修行」を作りました 🎉

模写修行のトップページのスクリーンショット

「模写修行」はこんな方におすすめ!

  • 基礎学習を終えて実践的な経験を積みたい
  • 破綻しない書き方を学びたい(= CSS設計を意識したコーディングを学びたい)
  • 実務と同じようにXDのデータを見ながらコーディングの練習をしたい
  • 現役で制作をやっている人のコードを見たい

基礎学習を終えた方が次にやるべきことは、実践に近い形でたくさん練習することです。そして、わからないことがあれば、その都合調べて理解する。この繰り返しでコーディングやプログラミングは上達します。

「模写修行」ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを配布しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで深く学ぶことができるサービスです。

この記事をシェア:

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材