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

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

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

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

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

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

KairosフォームAPIの仕様

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

formのaction属性に所定のURLを設定する（https://form.k3r.jp/xxx/yyy）
formの入力項目に、所定のname属性を設定した4つの必須項目を設ける

フォーム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();

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

非表示のiframe要素を生成する
非表示のform要素を生成する
フォームAPIに準拠したinput要素をformに紐付ける
iframe内でKairosのフォーム送信を行う
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です。