こんばんは！
Mautic Advent Calendar 2017の7日目は、アムステルダムから電車で数駅のオランダ・ハールレムに遊びにきているセイノです！
日本時間ではもう8日かもしれませんがこっちはまだギリギリ7日なのでセーフです。
Mautic Advent Calendar 2017の7日目である今日は、過去にYoutubeにアップした、Mauticでのフォームの作成方法である『MauticのWordPress連携「フォームを連携」』を文章と画像で解説していきます。
MauticのWordPress連携「フォームを連携」
まずは、実際の動画をどうぞ。
この動画は数ヶ月前のMautic Meetup Tokyoでセッションをおこなった時のフォローアップとして作成公開したものです。音声ないしで淡々と作業するさまが録画されているだけなので、動画をみなくてもわかるようにこの動画にキャプションをいれて行きたいと思います。バージョン違いでUIがすでに変わってたらごめんなさい！
まずは、Mauticの管理画面にログインし、サイドバーの”コンポーネント”から”フォーム”を選択します。
“フォーム”の管理画面に遷移したら、画面右端にある”新規”を選択します。
右側の”新規スタンドアローンのフォーム”を選択します。キャンペーンなどで使う予定がない場合は全てスタンドアローンのフォームを選択すればよいかと思います。
フォームの設定項目が表示されたら、各項目に入力していきます。
この画面では、フォーム名・フォーム送信後の挙動・メッセージを表示する場合の表示内容を入力していきます。
次にスタンドアローンフォームのタブの”フィールド”を選択して、フォームに必要なフィールドを設定していきましょう。
ドロップダウンメニューの中から、メールアドレスやファーストネーム・ラストネームなどの名前を選択し追加していきます。
フィールドの設定時にはラベル、必須項目の設定もおこないえます。
上記の画像のように選択したフィールドが表示されたら、フィールドの設定は完了です。
次に同タブ内にある”アクション”のタブを選択して、フォームが送信されたあとの挙動を設定していきます。
“送信アクションを追加”を選択して、送信後におこないたいアクションを追加していきます。
今回はフォームを送信してくれた方への自動返信メールを設定するので”フォーム結果を送信”を選択します。
“ユーザーにメールを送信”というダイアログが表示されたら、名前・説明・送信するメール (テンプレートの種類を選択する) ・誰に送信するかを設定しましょう。
“送信するメール”を選択する時にはデフォルトの6パターンのメールを選ぶことができます。
メールのパターンや挙動の設定が完了したら、”適用”や”保存して閉じる”を選択して次に進みましょう。
“フォームHTML”の画面から、Mauticで変更したフォームが常に同期される”自動”と”手動コピー”があるの必要に応じて選択していきましょう。
自動を選択した場合は上部の”JavaScript経由”もしくは”iFrame経由”のどちらかを選ぶことになります。特に問題がなければJavaScriptで問題ないかと思います。
まとめ
ということでささっとまとめてみました！以上！解散！