Jotform・Zapier・SendGridを利用してメルマガの購読フォームを作成する

はじめに

Twilio SendGridのサポート業務を担当していると、「Webフォームを作成する機能はありますか？」とのお問い合わせをよくいただきます。
残念ながらSendGridにはWebフォームを作成する機能はないため、自分で実装したり、外部ツールを利用したりする必要があります。

そこで今回は、「Jotform」、「Zapier」、「SendGrid」を組み合わせてメールマガジンの購読フォームをノーコードで作成する方法を紹介します。

事前準備

Jotform、Zapier、SendGridのアカウントをあらかじめ取得しておいてください。

Jotformとは

Jotformは、プログラミングの知識がなくてもドラッグ＆ドロップ操作で簡単にフォームを作成できるサービスです。1万種類以上のテンプレートが用意されており、様々な用途のWebフォームを手軽に作成できます。

Zapierとは

Zapierは、複数のWebサービスを連携させるためのサービスです。本記事では、JotformとSendGridの間でデータを受け渡す役割として利用します。

SendGridとは

SendGridは、高い到達性を誇るクラウド型メール配信サービスです。
今回は、以下の用途で利用します。

メルマガ購読の登録者に登録完了の通知メールを送信する
フォームに入力されたメールアドレスを宛先リストに登録する

設定の手順

1. JotformでWebフォームの作成

Jotformで提供されているテンプレートを利用し、メールマガジンの購読フォームを作成します。手順は以下の通りです。

まずは、Jotformのアカウントにログインします。
Workspaceにアクセスし、「+CREATE」を選択後、画面左下にある「Form」を選択します。

フォームの作成方法を選択します。
今回はテンプレートを使用してフォームを作成するため、「Use template」を選択しましょう。

次にテンプレートを選びます。
左側メニューのTYPESから「Subscription Forms」を選択し、表示されたテンプレートの中からお好きなものを選んでください。利用したいテンプレートの「Use template」ボタンをクリックすると、編集画面が表示されます。
今回は「Opt-In Form-Get Free Email Updates!」を選びました。

編集画面が表示されたら各コンポーネントを編集し、フォームを作成しましょう。
コンポーネントをクリックすると、ラベル名を直接編集できます。また、歯車マーク（Properties）をクリックすると、プレースホルダーの設定やボタンの表記など、より細かな設定を編集することもできます。
上記以外にも、コンポーネントの追加やフォームデザインの編集なども可能です。詳細はこちらをご確認ください。

フォームが完成したら、SETTINGSタブでその他の設定をします。

Webフォームのタイトルの設定

WorkspaceのWebフォーム一覧で表示されるタイトルを初期設定のもの（「Opt-In Form-Get Free Email Updates!」）から変更したい場合は、FORM SETTINGSメニューの「Title」で任意の名称に変更してください。ここでは、「メールマガジンの購読フォーム」に変更します。

なお、同メニューの「Encrypt Form Data（フォームデータの暗号化）」は必ずOFFにしてください。ONにするとZapierとのデータ連携がうまくできません。

自動応答メールの無効化

フォームが送信されると、フォームの送信者宛てにJotformのメールサーバから自動応答メールが送られるようデフォルトで設定されています。今回はSendGridから通知メールを送信するため、この機能は無効にします。EMAILSメニューの「Autoresponder（自動応答メール設定）」をDisableに変更しましょう。

登録完了ページの設定

THANK YOU PAGEメニューでは、フォーム送信後のアクションを設定できます。今回は、フォーム送信後に登録完了ページを表示するよう「Show a Thank You Page after submission」を選択します。THANK YOU PAGEの詳細については、こちらのドキュメントもご参照ください。

ここまで完了したら、作成したWebフォームの見た目や動作に問題がないことを確認しましょう。
画面右上の「Preview Form」をONにし、プレビュー画面が表示されたら各項目に適当な情報を入力します。ボタン（下図の「登録する」ボタン）をクリックし、登録完了ページが表示されることを確認します。

フォームに登録された内容は、Form BuilderのInboxにて確認できます。

以上でWebフォームの作成は完了です。この後フォームの公開作業があるため、画面はこのままにしておきましょう。

2. SendGridの設定

フォームの作成が完了したら、SendGridで以下の設定を行います。

APIキーの発行

APIキーはZapierと連携する際に必要な情報です。
必要最低限の権限である「Mail Send」と「Marketing Campaigns」にFull Accessを与えたAPIキーを作成してください。作成方法はこちらをご確認ください。作成したAPIキーは一度しか表示されません。この後の設定で使用するため、手元にメモを残すようにしてください。

Domain Authenticationの設定

SendGridからメール送信するために必要な設定です。
通知メールの送信元に指定するメールアドレスのドメインを設定しましょう。設定方法はこちらを参考にしてください。

3. Zapierの設定

Zapierを利用してJotformとSendGridを連携させます。

Jotformから送信されるデータを受信する

Zapierにログインし、「+Create」>「Zaps」を選択して新しいZap（一連のサービス連携の単位のこと）を作成します。

まずは、処理のきっかけとなる「Trigger」を設定します。
アプリ一覧（Apps）から「Jotform」を選択してください。

「Setup」で処理のきっかけとなるイベントと連携するJotformアカウントを指定し、「Continue」をクリックします。

Trigger event：New Submission（フォームの新規投稿）を選択
Account：連携するJotformアカウントを選択（アカウントの連携方法はこちら）

「Configure」では、データ連携の対象となるフォームを選択します。
「Continue」をクリックします。

「Test」で、Jotformに登録されている回答内容が正しく取得できるか確認します。
「Test Trigger」ボタンをクリック後、受信したフォームの内容を確認し、問題がなければ「Continue with selected record」ボタンをクリックしてください。

通知メールの送信設定

次に、Triggerをきっかけに実行される「Action」を設定します。ここでは、通知メールの送信設定をします。

アプリ一覧から「SendGrid」を選択します。
「Setup」で実行する処理と連携するSendGridアカウントを指定し、「Continue」をクリックします。

Action event：Send Emailを選択
Account：連携するSendGridアカウントを選択（連携方法はこちら）
連携の際に「2. SendGridの設定」で作成したAPIキーを使用します。

「Configure」では、送信するメールの設定を行います。

To（必須）：宛先メールアドレス
「＋」より「Answers メールアドレス（フォームに入力されたメールアドレス）」を選択します。
From（必須）：送信元のメールアドレス
「2. SendGridの設定」にて設定したドメインのメールアドレスを入力します。
From Name：送信者名
Reply To：メールの返信先
Subject（必須）：件名
Text：メール本文（テキスト形式）
HTML：メール本文（HTML形式）
メール本文は、TextあるいはHTMLのいずれかの指定が必要です。

メールの設定が完了したら、「Test step」でテストメールを送信します。
「Configure」で設定した通りにメールが受信できたら、「＋（Add Step）」をクリックして次の工程に進みます。

なお、Action eventで「API Request (Beta)」を選択し、Mail Send APIを使用すると、SendGrid上で作成したテンプレート（Dynamic Template）を利用したメール送信も可能です。メール送信APIの詳細は、ドキュメントをご覧ください。

宛先リストにメールアドレスを登録する

最後に、フォームに入力されたメールアドレスをSendGridのContactsに登録する処理を設定します。

連携するアプリとして「SendGrid」を選択します。
「Setup」で、以下の内容を設定します。

Action event：API Request (Beta)を選択
Add Single RecipientというAPIを利用してメールアドレスを追加します。
Account：連携するSendGridアカウントを選択

「Configure」で、利用するAPIの設定をします。

Stop on error（エラーが発生した場合にZapの処理を停止するか）：Yes
HTTP Method：POST
URL：https://api.sendgrid.com/v3/contactdb/recipients
Body：以下の通り

[
  {
    "email": "Answers メールアドレス(＋ボタンから選択)",
    "last_name": "Answers お名前 (＋ボタンから選択)",
    "first_name": "Answers お名前 (＋ボタンから選択)"
  }
]

「Test」でContactsに宛先情報が登録されることを確認します。
Zapierにて「Test step」ボタンをクリック後、SendGridのダッシュボード（Marketing > Contacts）で下図のようにメールアドレスが登録されていることを確認してください。

挙動確認ができたら、Zapierのダッシュボードで「Publish」ボタンをクリックします。

以上でZapの設定は完了です。

4. Webフォームの公開

Jotformの画面に戻り、PUBLISHタブを開き、作成したフォームを公開しましょう。Jotformでは、リンクの共有（QUICK SHARE）やWebサイトへの埋め込み（EMBED）など、複数の公開方法が提供されています。お好みの方法でフォームを公開してください。

5. 最終動作確認

すべての設定が完了したら、各サービスが正常に連携できているか実際に動かして確認しましょう。作成したフォームにアクセスし、自分のメールアドレスと適当な内容を入力して「登録する」ボタンを押します。通知メールが届くこと、宛先リストにメールアドレスが登録されていることを確認できたら全工程終了です。

おわりに

今回紹介したように、Jotformのようなサービスを利用することで、Webフォームをノーコードで手軽に作成できます。
さらに、Zapierを活用することで、フォームの送信をきっかけにメール送信やデータ登録といった処理を自動化することも可能です。これら全てを自前で実装するのは大変ですが、本記事で紹介した方法であれば、スムーズに実現できます。みなさんもぜひお試しください。

検索

カテゴリ

アーカイブ