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

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

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

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

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

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

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

• 独学に限界を感じている...
• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。無料相談もお気軽にお申し込みください。

👆 メンターやってます 👆

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

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

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

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

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

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

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

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

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

Netlifyとは？

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

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

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

無料枠について

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

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

NetlifyのForms機能とは

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

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

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

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

【初学者・中級者の方】独学に限界を感じてませんか？

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか？

• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

初級者から中級者まで対応できる、数少ないサービスです。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

👆 メンターは全員現役エンジニア 👆

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

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

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

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

Step1：Netlifyの登録

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

Netlifyにアクセスし、右上の「Sign up」をクリック。

---

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

---

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

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

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

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

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

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

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

💡 プロジェクトの作成

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

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

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

プロジェクトの更新

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

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

サイト名の変更

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

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

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

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

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

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

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

コードの解説

Forms機能を利用するには、formにdata-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>

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

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

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

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

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

自作したサンクスページを表示する場合、formにaction="/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を使うようになっています。

<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」ボタンをクリック。

---

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

---

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

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

---

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

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

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

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

まとめ

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

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

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

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

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

独学に限界を感じていませんか？