お問い合わせフォームを実装する

外部フォームサービスを決める

まずはどのサービスを使うか決めましょう。

無料で提供しているフォームサービスがいくつかあり使い勝手は大体同じですが、月何件まで送受信できるかが異なってきます。

以下の表は主要なフォームサービスを比較したものです。（2023/6/6 時点）

それぞれ件数以外のメリットとデメリットもあるので、気になるものがあれば実際にページに飛んで詳しく見てみてください。

この記事ではNetlify Formsでの導入方法を紹介します。

Netlify Formsを使用する

Netlify Formsを使用する場合は、サーバーにアップロードしないとフォームの送信ができないので、まずはNetlifyに登録しましょう。
登録時に簡単なアンケートに回答する必要がありますが、適当に答えて進みましょう。

Netlifyへのアップロード方法については、別の記事で解説しているのでそちらをご覧ください。

Formsの機能を有効化する

Netlifyにプロジェクトをアップロードしたら、左側のサイドバーから「Forms」を選択し、「Enable form detection」を押してForm機能を有効化します。

プロジェクトをアップロードする

Formsを有効化したらHTML内のフォームを検知してもらう必要があるので、再度アップロードしましょう。
サイドバーの「Deploys」からアップロードできます。

Forms機能の有効化を確認する

アップロード後にFormsのページに戻ると「contact」という項目が増えています。
この表示になっていれば機能が有効になっている証拠なのでフォームから送信することができます。（本番のURLでのみ送信できます。）

この「contact」はformタグのname属性に指定した名称になります。
また、Netlifyでフォームを検知してもらうためにはformタグに「netlify」というキーワードを入れている必要があります。もしForms機能が有効になっていないという方がいればHTMLのformタグの設定を見直してみてください。

サイト内に複数のフォームがある場合でも設定は同様で、name属性だけ被っていなければいくつでもフォームを追加できます。

action属性でパスを指定すれば自作のthanksページに飛ばすことができますが、ルート相対パス（/から始まる）か絶対パス（httpから始まる）でないと認識されません。設定する際には気をつけてください。

<form class="c-form" name="contact" method="POST" action="/contact/thanks.html" netlify>
  ...
</form>
          
            
          
        

通知設定をする

サイドバーの「Site configuration」→「Forms」→「Form notifications」と進み、「Add notification」で通知の設定ができます。

デフォルトではメールかSlackに通知を飛ばすことができます。
Webhookの機能を使えばその他のツールと連携することも可能です。

以下はメールに通知する設定です。

送信テストをすると以下のようにメールが届きました！
（各フィールドのname属性を日本語にすると下図のようにいい感じでメールがくるのでおすすめです。）

まとめ

一度Netlifyで公開する必要がありますが、設定自体は普通のformに属性を追加するだけなのでとても簡単です。

Netlify以外のサーバでは今回の方法は使用できませんが、Google Formsを埋め込んだり、他の外部フォームサービスを使用する場合にも基本的には難しい設定はありません。
例えばFormspreeなんかはaction属性に発行したURLを設定するだけです。
（需要があれば他のフォームサービスの実装方法も解説します）

ご自身の環境に合わせてお好きなフォームを実装してください！

ちなみに、このサイトはmicroCMSテンプレートのデモサイトですが、お問い合わせ機能は動きますので個人情報などを送信しないように注意してください。
お問い合わせいただいても基本的にご返信いたしませんのでご了承ください。