Mauticのフォームをワードプレスに設置 - マーケティングとビジネスと私

こんにちは。Webloco代表兼Webマーケターのヤブです。

今回はMauticのフォームをワードプレスサイトに設置する方法をご紹介します。

別の方法として、Contact Form 7と連携する方法もありますが、その方法は「Contact Form 7との連携方法」をご覧ください

また、ワードプレスサイトに設置する方法では、すでにワードプレスサイトとMauticが連携されている必要があります。詳しくは、「Mautic導入編　WordPress連携方法」をご確認下さい。

そもそもなぜ、Mauticのフォームを作成するの？

Mauticでは、IPアドレスをキーにユーザーを特定、管理しています。その為、このIPアドレスだけでは、誰かが分からず、ずっと「Anonymous（匿名）」の状態になります。

その為、どこかのタイミングで、IPアドレスとユーザー情報を紐づけてやる必要があるのですが、それがフォームと言う事になります。

Mauticでフォームを作成して、そのフォーム経由で送信された情報はMauticに取り込まれ、それ以降「Known（既知）」となります。

まず、Mauticのダッシュボードで連携させたいフォームを作成します。

①サイドメニュー「コンポーネンツ」⇒「フォーム」⇒「＋新規」の順でクリックします。

②「フォームの種類」を選択します。下の画像では、スタンドアローンフォームを選択しています。

・キャンペーンフォーム・・Mauticのメイン機能であるキャンペーン機能と連動出来、キャンペーンの中に組み込むことが出来ます。メール送信後のアクションを設定する事は出来ません。

・スタンドアローン・・言葉の通り、このフォーム単体で完結するフォーム。フォーム送信後、アクション（メールを送る、ポイントを付与する）を設定する事が出来るが、キャンペーンには組み込む事が出来ません。

③名前に任意の文字を入力して、「成功公開アクション」「リダイレクトURL」を入力して「フィールド」をクリックします。

④「フィールド追加」をクリックして、連携させたいフィールド属性を選択します。

⓹ラベルに任意の名前入力します。必要であれば、他のフィールドにも値を入力した後、「コンタクトフィールド」をクリックします。

⑥「Matching contact field」（Mauticのどのフィールドと連携させたいか）を選びます。（例．下記の画像は、ラベル：名前欄を、MauticのFirst Nameと連携させたい場合。）

⑦「追加」をクリックします。

手順「④～⑦」を必要なフィールド分繰り返します。

⑧全てのフィールドの追加が終わったら、「アクション」タブをクリックします。（キャンペーンフォームを選択した場合は、アクションの設定はありません。）

⑨「送信アクションを追加」をクリックして、追加したいアクションを選択します。下記の画像では、「ユーザーにメールを送信」を選択しています。いわゆる自動返信メールの設定です。

⑩「名前」に任意の文字を入力。
管理者にメールを送信したい場合、「ユーザーにメールを送信」に任意のユーザーを選択。
既にメールフォーマットがある場合は、「送信メール」をクリックして、送信するメールを選択しますが、ない場合は、「新規メール」をクリックします。

⑪メールの件名、本文を入力して「詳細設定」をクリックします。

⑫必要であれば、詳細設定の項目に任意の値を入力します。
登録名に任意の文字、言語を「日本語」に設定して、「保存して閉じる」をクリック

アクションは複数登録できますので、他に登録したければ、手順⑨に戻り、新たにアクションを追加します。

アクションの設定が終わったら「適用」をクリックして保存します。

サイドメニュー「コンポーネンツ」⇒「フォーム」のフォーム一覧で「ID」を確認して覚えておきます。

既にワードプレスとの連携が完了している事が前提です。詳しくは、「Mautic導入編　WordPress連携方法」をご確認下さい。

お使いのワードプレスサイトで、固定ページ（もしくは投稿ページ）を新たに作成します。

WYSIWYG画面に「[mauticform id=”1“]」のショートコードを挿入します。数字は、事前に確認しておいた、MauticのフォームIDです。

固定ページ（投稿ページ）を表示して、意図したフォームが生成されていたら完了です。

実際にフォームが機能しているか確かめるために、ワードプレスサイトに設置されているフォームに入力してデータを送信してみてください。

下記の様に、「Contacts」をクリックして、一覧にフォームで入力した名前やメールアドレスが表示されていれば連携完了です。