MAやMauticの役立つノウハウや情報をお送りします!
×
【Mautic】既にある問い合わせフォームにMauticフォームを設置する方法 | Mautic | マーケティングオートメーションツールを始めるなら | custom journey
B to Bマーケティングオートメーションツールを始めるならCUSTOM JOURNEY。MAオープンソースのMauticとAWSで日本語環境を用意しました。
BtoBマーケティングオートメーション,オープンソース,mautic,marketing automation,Customer journey map,custom journey
16272
single,single-post,postid-16272,single-format-standard,ajax_fade,page_not_loaded,,qode-theme-ver-8.0,wpb-js-composer js-comp-ver-4.9.2,vc_responsive

【Mautic】既にある問い合わせフォームにMauticフォームを設置する方法

startup-593322_1920

【Mautic】既にある問い合わせフォームにMauticフォームを設置する方法

こんにちは。 CUSTOM JOURNEY運営局の山本です。

Mauticのフォーム作成機能。ユーザーの情報をMauticのデータベースに取り込むための重要な機能で、Mauticを導入したユーザーは結構使う機能かと思います。

ただ、すでにお問い合わせフォームなどをサイトに導入している場合はMauticのフォームに変更しなくてはいけないの?と思われるかと思いますが、実は既存のフォームにMauticのフォームを設置することが可能です。

今回はそちらのやり方を紹介したいと思います!

 

Mauticのフォーム機能

通常のフォーム機能では、フォーム作成後、「自動」をクリックすると埋め込むJSがでてきます。

スクリーンショット 2018-02-21 12.49.43

以下のようなJSで、そちらをサイトに埋め込むことでフォームを表示することが可能です。

とても簡単ですよね。もしまだサイトにフォームがない場合はこのやり方でいいと思います。

ただMauticを導入するサイトには既にお問合わせフォームがある場合が多いですよね。その場合のやり方を紹介します。

 

既にお問合わせフォームがある場合の埋め込み方法

お問合わせフォームの仕様によってやり方は変わってくるのですが、通常よくあるような以下のフローのお問合わせのフォームの場合のやり方を紹介します。

1.入力画面
2.確認画面
3.完了画面

この場合、2の確認画面にて実装を行います。
もし確認画面がないお問合わせフォームでしたら入力画面にて実装を行ってください。

概要

最初に概要をざっくり説明すると・・

1. 確認画面にMauticフォームの設定で出力されるソースを挿入
2. そのまま挿入すると表示されてしまうため非表示にして
3. JSでゴニョゴニョやってフォームに入力された値をMauticへ送信されるようにする

というような実装になります!
詳細を以下から説明します。

1. Mauticフォーム設定

まずはMauticでフォームの設定を行います。その際、既にあるお問合わせのフォームの項目と一緒の内容で作成します。

スクリーンショット 2018-02-21 13.16.29

この際、Mauticフォームの項目はすべて任意(必須ではない)で設定してください。

2. 手動コピー

通常はフォーム作成後「自動」をクリックしてそのJSを利用しますが、「手動」をクリックしてください。

スクリーンショット 2018-02-21 13.51.56

こちら上と下にわかれていますが、ざっくり上が「JS」で下が「HTML」になります。まずは下に表示されている「HTML」から説明します。

3. HTMLの設定

上記の下の「HTMLのソース」をコピーして確認画面に挿入します。ただし、2点改修が必要です。

3-1.styleの削除

ソースですが以下のように「style」と「div」で大きく2つありますが、「style」は見た目のCSS部分になるのでここでは必要ありません。よって削除ください。

3-2.非表示処理

上記「div」の部分を挿入してほしいのですが、そのまま挿入すると確認画面上に表示されてしまうため、非表示にします。具体的には「display:none」にして非表示にします。

例:

3-3.一部ソース修正・削除

こちらは環境によってはそのままでもいいのですが、弊社のクライアントさん環境にてこれを消さないとエラーになる場合がありましたので、formタブの部分に以下のソース部分を削除ください。

環境によっては他にも修正・削除が必要な箇所があるかもしれません。そちらは実際にテストしてみて調整ください。

4.JavaScriptの設定

次に「JS」部分の設定です。

4-1.JSの挿入

まずは出力された上の「JS」をそのまま挿入ください。

4-2.トリガーの追加

確認ページにある「送信」ボタンをクリックした時に先ほど埋め込んだMauticの送信ボタンを擬似クリックするように設定します。

例:

この「mauticform_input_xxxxxxxxx_submit」は先ほどのHTML内に出力されているものをご利用ください。

4-3.入力値の取得

最後にユーザーが入力画面にて実際に入力した各項目の値をMauticへ渡るのように取得&設定します。
こちらも環境によって変わるのですが例えば以下のようなJSです。

例:

以上です!!

 

最後に

いかがでしたでしょうか?

ちょっとややこしく、またMauticの公式ではないちょっと裏技的なやり方になりますが、既にお問合わせフォームがあるサイトをもっている方は多いと思うので、是非試してみてください!

では!


★ Mauticの導入でお悩みなことはありませんか?

Mautic導入の相談なら弊社サービスCustom Journeyに相談ください。
大手クライアントへの導入・運用実績もあります。