Form.ioを利用したWebフォームの作成とSendGridの連携

SendGridのサポートへよくいただく質問の1つに「メール購読や問合せ用のフォームを作る機能はありますか？」というものがあります。SendGridでは現状、フォーム作成機能は提供していないため、ご自身でフォームを準備していただく必要があります。

メールアドレスを収集するための簡単なフォームを作成するのであれば、サードパーティ製のEmail Subscription WidgetやWisePopsのようなSendGridと簡単に連携できるWebサービスを使うのも1つの手段です。また、CMSやマーケティングツールを利用している場合、ツール内でフォーム作成機能を提供している、あるいはプラグインで提供しているケースもあります。

今回のブログでは、フォーム作成のためのWebサービス「Form.io」についてご紹介します。Form.ioでは多くの画面コンポーネントを揃えており、自由にフォームのデザインを作成できます。バリデーションの設定やボタンのアクション定義なども可能で、さらに、フォームで登録されたデータの管理や、そのデータへアクセスするAPIまで幅広い機能をカバーしています。

また、SendGridと簡単に連携できる仕組みが用意されているため「フォームの登録完了時にメールを送る」といったことが手軽に実現できます。米国SendGrid社でもチュートリアル「Building Serverless Apps With Form.io + SendGrid」を掲載しているので是非ご確認ください。

今回のブログではお問合せフォームを作成して、問合せの登録完了時に自動応答メールを送るフォームの作成について紹介していきます。

プロジェクトの作成

Form.ioのアカウントを作成してログインすると以下の画面が表示されるので「Create Project」で新しくプロジェクトを作成します。

プロジェクトの名前（Project Title）や説明（Description）を入力して、作成するフォームのテンプレートを選びます。今回は最初に選択されている「Default」のまま進めます。
「Create Project」を押してください。

以下の画面が表示されたらプロジェクトの作成完了です。

プロジェクト用ユーザの作成

設定を進める前にプロジェクト用のユーザを最低1つ作成する必要があります。「Project Progress」に表示されている「Set up project user accounts」から「Create a new User」のリンクをクリックしてユーザ作成に進みます。

作成するユーザのメールアドレスとパスワードを設定します。

ユーザの作成後に「Set up project user accounts」がチェック状態となればOKです。

SendGridの接続設定

次にSendGridの接続設定を行います。ブログの冒頭で少し触れましたが、Form.ioではSendGridとの連携が考慮されているため、SendGridのAPI Keyを設定するだけで使えます。API Keyの生成方法についてはこちらを参照してください。

フォームの作成

ここからいよいよ、お問合せフォームを作成します。メニューのFormsから「Create Form」を押してください。

フォームのタイトル（Title）、名前（Name）、API Pathを入力します。ここではそれぞれ「お問合せフォーム」「InquiryForm」「inquiry」と設定しました。

あとは画面上でコンポーネントを選び、ドラッグ＆ドロップでフォームをデザインします。

今回は「Layout Components」の中にある「Panel」を最初に配置し、その中に以下4つの入力項目を配置しました。

1. 姓：「Basic Components」の「Text Field」
2. 名：「Basic Components」の「Text Field」
3. メールアドレス：「Special Components」の「Email」
4. 問合せ内容：「Basic Components」の「Text Area」

各コンポーネントはデザインやバリデーションの細かい設定が可能です。設定に関する詳細はこちらを確認してください。

配置したコンポーネントのうち、メールアドレス（Emailコンポーネント）のProperty Nameを「email」へ変更してください。この理由については、後述するボタンのアクション設定で説明します。

コンポーネントの配置が完了したら「Create Form」を押してください。

アクションの設定

お問合せフォームのデザインが完成したので、続いて自動返信メールを送信するアクションを設定していきます。さきほど作成したフォームのメニューから「Actions」を選んでください。

アクション選択のプルダウンで「Email」を選択して「Add Action」を押します。

「Transport」で「SendGrid」を選択してください。プルダウンに「SendGrid」が表示されない場合は「SendGridの接続設定」が保存されているか確認してください。

「To: Email Address」の部分で宛先メールアドレスを指定しますが、自動返信するにはフォームで入力されたメールアドレスを指定する必要があります。Form.ioではNunjucks Templatingと呼ばれる機能を利用して登録されたデータやフォームのコンポーネントなど様々な情報を利用できます。さきほどの「フォームの作成」でメールアドレスのProperty Nameを「email」と設定してもらったのは、これで利用するためです。「To: Email Address」に {{data.email}} と記述してください。あとはメールのタイトルや本文を定義して「Save Action」で設定完了となります。

権限設定

最後にフォームのアクセス権限を設定します。Form.ioではフォームへのアクセスやフォームの送信(Submission)などに対してアクセス権限を設定できます。今回はサンプルのため、Permission「Create All Submissions」に対してRoles「Anonymous」を割り当て、誰でもフォーム登録可能な設定としました。Permissionの詳細に関してはForm.ioのドキュメントをご確認ください。

フォームのローンチ

それでは実際にフォームを表示して動作確認してみましょう。メニューの「Launch」をクリックすると、動作確認用に埋め込み表示されたフォームが表示されます。URLも発行されているので、単純にフォームだけの表示を確認したい場合はURLにアクセスしてください。

フォームに情報を入力して「Submit」ボタンを押すと、入力したメールアドレス宛に以下のようなメールが届きました。今回作成した自動返信メールは入力された内容を表示するだけの簡単なものとなっています。

フォームで登録された内容はメニューの「Data」から確認できます。また、「Export CSV」でデータをCSVファイルとしてエクスポートすることも可能です。

上記データにアクセスするためのAPIも自動生成されるため、開発者にとっては非常に便利です。APIは画面の「Try it out!」ボタンから直接実行できます。

なお、Form.ioのメール連携はSendGridの他、SMTPサーバの指定やMailgunなどが利用できます。また、宛先の有無を検証できるサービスのKickboxとも連携可能です。メール連携以外にも、Microsoft Office 365やGoogle Drive、Hubspotなど様々なサービスとの接続も用意されていますので、是非お試しください。