MauticをAWS上で使ってみよう！④（フォーム作成編）

AWSラボ
2019.02.05
スポンサーリンク

MauticをAWS上で使ってみよう第４回目となりました。

前回までは、SESを使って独自ドメインメールを使えるようにしました。

独自ドメインメールを使えるようにしたので、
今回はお問い合わせフォームの作成に取り掛かりたいと思います。

お問い合わせフォームとは、名前とメールアドレス、お問い合わせ内容を入れて送信ボタンをポチッと押したらサイト運営者へお問い合わせができるホームページにはよくあるメールフォームです。

このフォーム、ウェブマーケティングでは重要なコンポーネントの一つですよね。
メルマガのリスト取りなんかも、このフォームが基本となります。

もちろんMauticでもよく使うコンポーネントの一つですのでぜひとも押さえておきましょう！

ということで、今回は、お問い合わせをしたら、前回設定した独自ドメインメールで自動返信をする、そんなフォームを作成したいと思います！

Mauticでフォームを作成してみる

それでは早速Mauticでフォームを作成していきましょう

(1)Mauticへログインします

(2)左メニューの[Components]から、[Forms]をクリックします

(3)右上にある[+New]をクリックします

(4)どちらのタイプのフォームを作成しますか？と聞かれるので、”Standalone Form”の方を選択します。

(5)まずは、フォームの全般的な設定部分となります。
以下の項目を変更しましょう。

Name：フォームの名前です
Successful Submit Action：送信ボタンをクリックした後、どうするか？以下の3つから選択します。

  1. Remain at form：フォームにそのまま残る
  2. Redirect URL：指定のURLへリダイレクトする
  3. Display message：指定のメッセージを表示する

※2または3を選択した場合、”Redirect URL/Message”へリダイレクト先URL、またはメッセージを入力する必要があります。

必須とはなっていませんが、”Thema”を”blank”へ変えておきます。
Themaとは見栄えのことで、シンプルな”blank”の方が私は好きなので・・(笑)

＜変更前＞

＜変更後＞

(6)次にフォームに配置するフィールドの設定を行います。[Fields]をクリックします

(7)”Add a new field”をクリックして、[Text]を選択します

“General”を以下のように設定します
Label：名前
Help message：(例)山田　太郎

“Contact Field”を選択し、”Choose one…”をクリックし”First Name”を選択、[+Add]をクリックします
※こうすることで、”名前”というTextフィールドをMautic側の”First Name”と関連付けします。

(8)同様に”Add a new field”をクリックして、[Email]を選択します

“General”を以下のように設定します
Label：Emailアドレス

[+Add]をクリックします

(9)さらに同様に”Add a new field”をクリックして、[Textarea]を選択します

“General”を以下のように設定します
Label：お問い合わせ内容

[+Add]をクリックします

(10)次に”Actions”を選択します。

(11)”Add a new submit ation”をクリックして、[Send email to user]を選択します
これは、submit(送信)ボタンをクリックした後、自動返信を行うアクションとなります。

(12)[+ New Email]をクリックします

(13)右側にある”Subject”、”Internal Name”を入力します。
Subjectはメールの件名、Internal Nameはこのメールフォーマットを内部的にはどのような名前で管理するかということになります。
(例)
Subject：[Tech Dive] お問い合わせありがとうございます
Internal Name：お問い合わせ自動返信メール

(14)Themeは”Blank”を選択し、画面右上にある[Builder]ボタンをクリックします

(15)画面に表示されているデフォルトテキストをクリックする

(16)右側にある”Customize Slot”によりテキストが変更できるようになるので、以下の画像のように変えて[Apply]をクリック後、[Close Builder]をクリックします。

(17)”Adanced”をクリックします

(18)”From name”、”From address”を入力します
From nameは送信者名、From addressは送信アドレスとなります。
送信アドレスは第３回の記事で指定した独自ドメインのメールアドレスを指定します。
(例)
From name：[Tech Dive] 自動送信メール
From address：info@tech-dive.xyz

(19)[Apply]をクリックし、(11)に戻ります

(20)”Email to send”に、いま作成したお問い合わせ自動返信メールが登場していますので選択します

(21)[Apply]をクリックします

以上で一旦基本的なフォームの作成は完了です！
お疲れ様でした。

別ドメインで使用するにはhttpd.confを書き換える

「さぁ、フォームができた！」

「自分のWordPressに設置しよう！！」

となるかと思いますが、少しお待ちを。

Mauticと同じドメイン内でフォームを利用する分には問題ないのですが、
別ドメインでの利用の場合、Mautic側のサーバの「httpd.conf」を一部変更する必要があります。

例えばMauticに割り当てられているドメインが、”info.tech-dive.xyz”であり、
“tech-dive.xyz”というドメインの中で埋め込み式でMauticのフォームを利用するといった場合となります。

それをしないと、フォームで”Submit”(送信)ボタンをクリックしたあと、“Please wait”で止まってしまうんですね。

というわけで、Mauticのhttpd.confを書き換え方をご紹介します。

(1)MauticがあるEC2サーバへSSH接続します。

(2)次のコマンドをたたいてディレクトリを移動します

(3)次のコマンドをたたいてVIモードでhttpd.confを開きます

(4)以下のように書き換えます

▼変更前

[blue-waku]<IfModule headers_module>
    <IfVersion >= 2.4.7 >
        Header always setifempty X-Frame-Options SAMEORIGIN
    </IfVersion>
    <IfVersion < 2.4.7 >
        Header always merge X-Frame-Options SAMEORIGIN
    </IfVersion>
    RequestHeader unset Proxy
</IfModule>[/blue-waku]
▼変更後

[blue-waku]<IfModule headers_module>
　<IfVersion >= 2.4.7 >
　　 Header always setifempty X-Frame-Options GOFORIT
　</IfVersion>
　 <IfVersion < 2.4.7 >
　　 Header always merge X-Frame-Options GOFORIT
　</IfVersion>
　RequestHeader unset Proxy
</IfModule>[/blue-waku]

(5)次のコマンドをたたいてApacheを再起動します

以上でhttpd.confの書き換えは完了です。

WordPressにMauticのフォームを設置してみよう

まずは、WordPressに設置するための、フォームの設置コードをゲットする必要があります。

Mauticのフォームの設置コードを確認する

(1)Mauticへログインします

(2)左メニューの[Components]から、[Forms]をクリックします

(3)作成したフォームの名前をクリックします

(4)右側に下図のように”Form HTML”が表示されますので、そこから[Automatic]をクリックします

(5)するとJavascriptコードが表示されますので、こちらをコピーしておきます。
これがフォームの設置コードになります。

WordPressにMauticのフォームを設置する

WordPressの記事をテキストモードにし、上記で確認した設置コードをそのまま貼り付けます。

確認すると、以下のようなお問い合わせフォームの完成です！

試しに入力して、Submit(送信)をクリックすると、自動返信メールが登録したメールアドレス宛に届きました！

Mautic側も下図のようにデータが登録されています。

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

フォームはウェブマーケティングの基本中の基本です。

Mauticでフォーム作成を行なってサイトをパワーアップさせましょう！

以上、hidesanでした！

 

Mauticについて知りたい方は、次の記事もどうぞ！

Mautic関連リンク

MauticをAWS上で使ってみよう！①（インストール編）
MauticをAWS上で使ってみよう！②（SSL化編）
MauticをAWS上で使ってみよう！③（SES独自ドメインメール設定編）
MauticをAWS上で使ってみよう！④（フォーム作成編）

タイトルとURLをコピーしました