Form: 既にある問い合わせフォームにMAUTICフォームを設置する方法

Mauticの機能でお問い合わせフォーム的なものを作成することができますが、既存フォームにMauticのこのフォームの送信内容を集積する機能を実装するにはひと手間あります。
段取りとしては、既存のMauticフォーム作成機能でもって既存のフォームと同じ内容(項目)のものを作成して、その集積するためのスクリプト(JS)を既存フォームに埋め込むといった内容になります。
つまりMautic側で作成するフォームはあくまでも値渡しのための擬似的な要素として利用して、既存のフォームからこの擬似的なフォームに値を渡してあげるといった段取りになります。

Mauticでフォームを作成する

まずはMauticでフォームの設定を行います。その際、既にあるお問合わせのフォームの項目と一緒の内容で作成します。
(厳密に言えばMautic側で取得したい値、ということになります。)

1. 左メニューの「コンポーネント」→「フォーム」をクリックして進みます。右上の新規ボタンをクリックしてフォーム作成準備をします。



2. 出てきたダイアログで「新規スタンドアローンのフォーム」を選択します。



3. フォームの設定画面になるので、ここで詳細設定を行います。

3.1 詳細タブを選択し、
  • 名前: フォームの名前を設定します。「お問い合わせフォーム」などの名前にしておきます。
  • 説明: (説明が必要な場合に入力します。空でも構いません。)
  • 成功公開アクション: ここではいったん「メッセージ表示」を選択してください。
  • リダイレクトURL/メッセージ: 成功時のメッセージを記載します。「お問い合わせありがとうございました。」ぐらいを入れておけばよし。

※お問い合わせ完了後に完了ページ(に相当するもの)がすでにある場合は、リダイレクトURLとそのリダイレクト先を指定してください。

3.2 フィールドタブを選択肢、フィールド(入力ボックス)を追加します。
  • 新しいフィールドの追加からパーツを選択します。(HTMLのinput属性を設定する感じになってます)(*1)

ここは特に問題なく設定できると思います。設定する属性が多すぎて混乱気味になるかと思いますが、後から更新可能なのでまずは適当に設定しておくのがよいかと思います。

3.3 アクションタブを選択します。

「新しい送信アクションを追加」という項目にいろいろたくさんあります。
今回はお問い合わせフォームなので「フォーム結果を送信」を選択してみます。(これも後ほど変更可能です。)

  1. 名前: フォーム送信結果の名前をつけます。適当に。
  2. 説明: これも適当に。
  3. 件名: お問い合わせフォーム送信テスト(とかでいいと思います)
  4. メッセージ: すでに変数が仕込まれているので、そのままでよいです。
  5. send to ownerは「はい」にします。
  6. コンタクトに送信も「はい」にします。
  7. メールの送信先、to,cc,bccは任意で適当に。
  8. 最後に追加ボタンを押します。




こんな感じの見栄えになります。これでだいたいの設定は完了したので、右上にある「適用」ボタンをおします。MAUTICフォーム設定はここまでで完了。

4 Mauticのフォームタグを埋め込む

本来ここで作成したフォームとJavascriptのソース(タグ)がセットになっていて、そのタグをサイト上のHTMLに埋め込むとフォームが表示されるというものがですが、ここでは既存のページがすでにある想定なので、段取りとしては、

  1. 発行されたソース(タグ)を貼る。
  2. サイト上で見えなくする処理をする(機能は有効にする)
  3. Javascriptで改造して既存のフォームと機能をつながる

となります。

4.1 発行されたソース(タグ)を取得

先程の左メニューのコンポーネント -> フォームから作成したリストを表示します。作成したフォームをクリックすると現れたページの左側にフォームHTMLという緑色のメニューを確認できます。ここで「手動コピー」を選びます。



HTMLソースとJavascriptのソースが表示されます。このソースを既存のフォームに貼り付けます。確認画面があるフォームの際は入力画面ではなく確認画面の方に貼ります。

4.2 HTMLソース

HTMLタグをコピペします。今回はこれらのHTMLタグを擬似的に利用するのでCSS部分は不要なので削除します。それから、formタグ内のautocomplete=”false” role=”form”をエラー対策のため削除しておいた方がよいようです。問題なければそのまま残してもよいです。

4.3 Javascript

まずはソースをそのまま貼ります。本来上記のHTMLタグで表示されるFormの送信内容を拾ってMauticに送信するという機能になりますが、ここでは既存のフォームに入力された内容をこのJavascriptタグに取り込んでmauticに送信してあげるという設定をします。
まずは確認ページにある「送信」ボタンをクリックした時に先ほど埋め込んだMauticの送信ボタンを擬似クリックするように設定します。既存の送信フォームの内容に依存しますが、以下のような感じになります。

<script type="text/javascript">
    $(function(){
        $("#inqsubmit").click(function(){
            const category = $("#category").text();
            $("#mauticform_input_xxxxxxxx_category").val(category);
            const nickname = $("#nickname").text();
            $("#mauticform_input_xxxxxxxx_nickname").val(nickname);
            const email = $("#email").text();
            $("#mauticform_input_xxxxxxxx_email").val(email);
            const prefectures = $("#prefectures").text();
            $("#mauticform_input_xxxxxxxx_prefectures").val(prefectures);
            const inquery = $("#inquery").text();
            $("#mauticform_input_xxxxxxxx_inquery").val(inquery);

            $("#mauticform_xxxxxxxx").submit();
        });
    });

    /** This section is only needed once per page if manually copying **/
    if (typeof MauticSDKLoaded == 'undefined') {
        var MauticSDKLoaded = true;
        var head            = document.getElementsByTagName('head')[0];
        var script          = document.createElement('script');
        script.type         = 'text/javascript';
        script.src          = 'http://ma.nowhite.site/media/js/mautic-form.js';
        script.onload       = function() {
            MauticSDK.onLoad();
        };
        head.appendChild(script);
        var MauticDomain = 'http://ma.nowhite.site';
        var MauticLang   = {
            'submittingMessage': "お待ちください…"
        }
    }
</script>

ちょこっと解説すると、既存フォームのsubmitボタンが

<button id="inqsubmit" type="submit" class="btn btn-primary">送信</button>

とかだったりする場合、このボタンが押されたタイミングでMauticの送信フォームの方も同時にサブミットできればよいというわけです。その際に確認画面の各項目で値を取得してMauticのinputに値を入れてあげるという動作です。
全然難しくないけどかなり面倒ですね。


*1 プルダウンメニューが何故か「選択」という項目になっています。


Mauticでお問い合わせフォームを作成する方法(資料請求・アドレス取得)
既にある問い合わせフォームにMAUTICフォームを設置する方法

Last update: 2018.04.03 (火)