ミギムキ

Kairosとメールフォームプロを連携したい

MA/SFAツールの「Kairos」は、マーケティングオートメーションを円滑に行うことができるツールです。

サイトのフォームからお問い合わせがあった見込み客の状態をわかりやすく管理することができます。

Kairos上でフォームを生成することもできるのですが、添付ファイルの数や容量を増やしたり、独自のバリデーションで制御したいときなど、ユーザーに操作してもらうフォーム自体は別のCGIを使いたい、というケースがあります。

そんな場合は、KairosのフォームAPIを使用することで「ガワ」はKairos以外のメールフォームを使いつつ、受信したリード情報をKairos上で管理するといった運用が可能になります。

本記事では、メールフォームプロでフォームを作り、KairosのAPIと連携させる方法を解説します。

KairosフォームAPIの仕様

KairosのフォームAPIは、以下の形式でformを作成することで、送信時のデータがKairosに送信されるようになっています。

フォームAPIの必須項目

f_item_mail
送信者のメールアドレスです。
api_key
API実行用の認証キーです。
フォーム作成画面で表示されるキーを設定します。
opt
メール配信の承諾有無の設定です。
「承諾」である「1」を指定します。
red
フォーム送信後のリダイレクト先を指定します。
通常はサンクスページのURLなどを指定しますが、今回はリダイレクトをメールフォームプロで行いますので、Kairos側ではリダイレクトを無効にするため「noredirect」を指定します。

主要なフォームの入力項目(リード情報)

下記項目はAPIの実行に必須の項目ではありませんが、MAツールとして活用する上で主に必要なものを列挙しています。

「問い合わせ商品名」といった独自の項目は「f_item_textXX」というnameで送信します(XXには数字が入ります)

f_item_company_name
会社名
f_item_name_last
名字
f_item_name_first
名前
f_item_tel
電話番号
f_item_text1
任意の項目

Kairosとメールフォームプロの連携の手順

今回紹介する方法では、メールフォームプロの「core.js」に手を入れます。

「core.js」は、送信確認ポップアップを表示するなど、JavaScriptの制御が書かれているファイルです。

送信確認ポップアップで「送信」ボタンが押されたときに、メールフォームプロとKairosそれぞれにフォーム送信を実行するようにします。

ですので、Kairosのキャンペーンを作成するときや、メールフォームプロのformタグを設置するときは、特にフォームの連携を意識する必要はありません。

Kairosのキャンペーンを作成する

登録フォームを作成し、キャンペーンを実施します。

自動返信メールはメールフォームプロで送るため、ステップ2の自動返信メールの作成は不要です。

メールフォームプロを設置する

通常通りメールフォームプロを設置します。

KairosのフォームAPIは気にせず、項目のname属性も自由に設定してOKです。

メールフォームプロの「core.js」を修正する

ファイルの場所は「mailformpro/librarys/core.js」となります。

サンプルコードは、メールフォームプロのバージョン4.2.9のものになります。

修正箇所

this.sendmail = function(){ if(mfp.SendFlag){ ~ mfp.Mfp.submit(); ←これを置き換える } else { ~ } return false; }

上記箇所を、後述する修正コードで置き換えます。

修正コード

#ダミーのiframeを生成 const iframe = document.createElement('iframe'); iframe.name = 'if_dummy'; iframe.style.display = 'none'; document.body.appendChild(iframe); #Kairos用のダミーformを生成 const k3Form = document.createElement('form'); k3Form.method = 'post'; k3Form.action = 'https://form.k3r.jp/xxx/yyy'; k3Form.target = 'if_dummy'; k3Form.style.display = 'none'; document.body.appendChild(k3Form); #Kairos用の入力項目(input要素)を生成してダミーformに関連付ける const mfpForm = document.getElementById('mailformpro'); const mfpData = { 'f_item_company_name': mfpForm['会社名・組織名'].value, 'f_item_name_last': mfpForm['名前(苗字)'].value, 'f_item_name_first': mfpForm['名前(名)'].value, 'f_item_mail': mfpForm['email'].value, 'f_item_tel': mfpForm['電話番号'].value, 'f_item_text1': mfpForm['製品名'].value, 'api_key': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', 'opt': '1', 'red': 'noredirect' }; for(let key in mfpData) { const input = document.createElement('input'); input.type = 'hidden'; input.name = key; input.value = mfpData[key]; k3Form.appendChild(input); } #ダミーのiframeが再読み込みされた(=ダミーformの送信が終わった)らメールフォームプロの送信処理を開始 iframe.onload = function() { mfp.Mfp.submit(); }; k3Form.submit();

処理の流れは大まかに以下のようになります。

  1. 非表示のiframe要素を生成する
  2. 非表示のform要素を生成する
  3. フォームAPIに準拠したinput要素をformに紐付ける
  4. iframe内でKairosのフォーム送信を行う
  5. Kairosのフォーム送信が完了してから、メールフォームプロの送信処理を行う

ポイントは、Kairosのフォーム送信をダミーのiframe上で行うことで画面遷移が起きないようにしている点です。

iframeに対してイベントリスナーを登録し、フォーム送信後の画面読み込みが終わってからメールフォームプロの送信処理を行います。

非表示のiframe要素を生成する

const iframe = document.createElement('iframe'); iframe.name = 'if_dummy'; iframe.style.display = 'none'; document.body.appendChild(iframe);
  • Kairosのフォーム送信を行うためのiframeの生成処理です。
  • 「display」を「none」にして非表示にした上でbodyタグに「appendChild」します。

非表示のform要素を生成する

const k3Form = document.createElement('form'); k3Form.method = 'post'; k3Form.action = 'https://form.k3r.jp/xxx/yyy'; k3Form.target = 'if_dummy'; k3Form.style.display = 'none'; document.body.appendChild(k3Form);
  • Kairosのフォーム送信用のformタグを生成する処理です。
  • action属性にはKairosのフォームURLを設定します。
  • target属性に先ほど生成したiframeのname「if_dummy」を設定します。これでKairosのフォーム送信はインラインフレーム内で行われ、元画面では画面遷移が発生しなくなります。

フォームAPIで指定されたinput要素をformに紐付ける

const mfpForm = document.getElementById('mailformpro'); const mfpData = { 'f_item_company_name': mfpForm['会社名・組織名'].value, 'f_item_name_last': mfpForm['名前(苗字)'].value, 'f_item_name_first': mfpForm['名前(名)'].value, 'f_item_mail': mfpForm['email'].value, 'f_item_tel': mfpForm['電話番号'].value, 'f_item_text1': mfpForm['製品名'].value, 'api_key': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', 'opt': '1', 'red': 'noredirect' }; for(let key in mfpData) { const input = document.createElement('input'); input.type = 'hidden'; input.name = key; input.value = mfpData[key]; k3Form.appendChild(input); }
  • 生成したformタグに、KairosのAPIで指定された所定のinput要素を紐付けていきます。
  • name属性と入力内容(メールフォームプロの入力内容をコピー)を対応付けたテーブルを用意し、そのテーブルをループ処理してinputタグを生成、紐付けていきます。
  • for inループのキー変数をconstで初期化すると、IE11ではエラーになってしまうため、ここではletを使っています。

メールフォームプロの送信処理を行う

iframe.onload = function() { mfp.Mfp.submit(); }; k3Form.submit();
  • ようやくフォームの送信となります。
  • フォームの送信は、①Kairos用のダミーフォーム→②メールフォームプロのフォームの順に行います。
  • Kairosフォームの送信中にメールフォームプロの送信が行われると、正しくAPIにデータが渡りません。
  • そこで、iframeにイベント処理を登録し、iframeの読み込みが終わった(=フォーム送信が終わった)ときに、メールフォームプロの送信を行うようにします。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。