WordPressとMailChimpを利用している方向け。
リストの登録数を少しでも増やすため、WordPressサイトにスクロールボックスを設置して、メール登録フォームを目立たせたいとお考えですか？
WordPressサイトにスクロールボックスを簡単に設置できる「MailMunch」というプラグインを使えば簡単に実装できます。
ちなみに、MailMunchはMailChimpと連携できますので、WordPressサイト経由で何件登録があったのかを簡単に確認できます。
この記事では、WordPressサイトに動きのあるスクロールボックスを簡単に設置できるプラグイン「MailMunch」の紹介と、WordPressサイトにMailChimpのフォームをMailMunchのスクロールボックスを使って設置する手順を解説します。
目次
MailMunchならWordPressにスクロールボックスを簡単に設置可能
WordPressとMailChimpを利用している方が、Webサイトにスクロールボックスを設置する方法は2つあります。
- MailChimpのポップアップフォームを使う
- WordPressのプラグインを使う
「MailChimpのポップアップフォーム作成機能の使い方を解説【登録率UP】」という記事でも解説しているとおり、MailChimpでは標準で動きのあるフォームを設置する機能があります。
ただ、標準機能で作ったフォームはクッキーの有効期間が1年で固定されており、使い勝手が良くありません。
もう一方のWordPressのプラグインを使う方法は、以下2つのプラグインを使えば簡単に設置できます。
とはいえ、プラグインを2つも入れればサイトの表示速度が遅くなる可能性が出てきます。
サイトの表示速度が遅くなれば、「【SEO】ページの表示速度が遅いのは致命的！測定方法や改善方法を解説」という記事でも解説しているとおり、検索で上位表示が難しくなるので、極力、プラグインは増やしたくないところです。
しかし、「MailMunch」であればプラグインは単体で動きますし、表示は遅くなりません。
また、クッキーの有効期間も設定できるので、WordPressサイトにスクロールボックスを設置したい方におすすめです。
MailMunchとは
「MailMunch」は、無料から利用できるリード獲得（見込み客）に特化したWebサービスで、MailChimpだけでなく、様々なメール配信システムと統合できる、メールマーケティングツールです。
作成できるフォームはスクロールボックスはもちろん、ポップアップ、埋め込みフォーム、トップバー、サイドバーなど、ユーザーの目に留まりやすいフォームを簡単に設置できます。
連携可能なサービスは、MailChimp、Constant Contact、AWeber、Campaign Monitor、Infusionsoft、ActiveCampaign、GetResponse、ConvertKit、Zapierなど、様々な外部サービスと連携できるほか、A/Bテスト等の分析も可能（有料プラン）です。
WordPressにMailChimpのフォームをMailMunchのスクロールボックスを使って設置する手順
WordPressにMailChimpのフォームをMailMunchのスクロールボックスを使って設置する手順を解説します。
- 手順①：MailMunchをWordPressにインストール
- 手順②：MailMunchでフォームを作成
- 手順④：MailMunchとMailMunchのアカウントを接続する
- 手順⑤：MailMunchの設定を完了させる
- 手順⑥：MailMunchのアカウント登録を行う
上記のとおりです。
手順①：MailMunchをWordPressにインストール
最初に、MailMunchプラグインをWordPressにインストールしましょう。
WordPressサイトにログインして、
ダッシュボード＞プラグイン＞新規追加 を選択します。
プラグイン検索窓に「MailMunch」と入力するとプラグインが表示されますので、「今すぐインストール」をクリックします。
インストール終了後「有効化」をクリックして、プラグインを有効化します。
左側メニューを見ると、「MailMunch」という項目が追加されたことが確認できます。
「MailMunch」という項目の他にも、「Landing Pages」という項目も追加されます。
手順②：MailMunchでフォームを作成
プラグインをインストールして有効化したら、MailMunchでフォームを作成します。
ダッシュボード＞MailMunch を選択して下さい。
MailMunchの設定画面が表示されますので、「Create Your First Form」をクリックします。
MailMunchフォーム作成画面が開きますので、以下の6つの設定を行います。
- Form Type：フォームタイプの選択
- Themes：フォームデザインの選択
- Message：フォームメッセージの設定
- Appearance：フォーム外観の設定
- Fields：フォームフィールドの設定
- Behavior：フォームの動作設定
上記順に解説します。
Form Type：フォームタイプの選択
最初に、フォームタイプを選択します。
この記事では、スクロールボックスを作成するので「Scrollbox」を選択して下さい。
Themes：フォームデザインの選択
次に、フォームデザインを選択します。
「PREMIUM」というロゴがついているフォームは有料プランでしか使えないので、左上のシンプルなフォームを選択します。
フォームを選択すると、画面上部にフォームタイトルを入力するよう求められますが、ここで入力するタイトルは管理画面でしか表示されませんので、管理しやすい名称を入力して、「Create Form」をクリックします。
Message：フォームメッセージの設定
フォームに表示されるメッセージを設定します。
申し込み前と、申し込み後の表示を設定できます。
申し込み前の表示
入力画面のテキストを設定します。
①フォームのタイトル、②フォームの説明文を入力します。
申し込み後の表示
申し込み後のフォームを設定します。
①メッセージを入力し、②タイトルを入力します。
入力が終わりましたら、画面上部にある「Save & Continue」をクリックして次に進みます。
Appearance：フォーム外観の設定
フォームの外観を設定します。
フォームの背景、ボタン、テキストの配色を変更できます。
また、フォームの表示ポジションも変更可能です。
サンプルとして、以下のように設定しました。
各項目の設定方法は次のとおりです。
- ①Theme(BACKGROUND COLOR)：フォームの背景色を変更できます。
- ②Submit Button(BACKGROUND COLOR)：申し込みボタンの色を設定できます。
- ③Submit Button (TEXT)：申し込みボタンのテキストカラーを設定できます。
- ④Position：フォームの表示場所を選択できます（初期設定は右側に表示されます）。
Fields：フォームフィールドの設定
フォームフィールドの表示設定を行います。
サンプルとして以下のように設定しました。
各項目の設定方法は次のとおりです。
- ①SHOW LABEL：チェックを入れるとラベルが表示され、チェックボックスの下にある記入欄にラベル表示のテキストを設定します。
- ②PLACEHOLDER TEXT：入力フォーム記入欄に表示される、入力に関する案内を示したテキストを設定できます。
- ③Button Text：ボタンテキストを設定できます。
Behavior：フォームの動作設定
ここでは、フォームをどのように動作させるかを設定します。
When to Show
ユーザーがページをスクロールした時、何時フォームを表示させるか、ユーザーが閉じるボタンを押したら何日間フォームを表示させないかを設定します。
各項目の設定方法は次のとおりです。
- ①TROGGER POINT：ユーザーがどれぐらいページをスクロールした時に表示させるかを設定をします。初期設定では50（％）スクロールした時に表示されます。
- ②HIDE DURATION：ユーザーがフォームを閉じた時、何日間表示させないかを設定できます。初期設定では1日です。
After User Subscribers
ユーザーが登録した後の動作を設定できます。この項目は初期設定のままでOKです。
Display Rules
フォームの表示ルールを設定します。
初期設定では、全てのデバイスで表示されるようになっていますが、表示させたくないデバイスがあれば、OFFにすると非表示になります。
また、下図赤枠内の「New Display Rule」をクリックすると、さらに細かい表示設定ができます。
「New Display Rule」をクリックすると、下図設定項目が出現します。
各項目の設定方法は次のとおりです。
- ①：表示（Only show on）・非表示（Dont show on）のルールを設定します。
- ②：「①」で設定したルールの詳しい条件を選択します。
- Word press Home page：トップページ
- Word press post：投稿
- Word press categories：カテゴリ
- Word press page：固定ページ
- URLs containing：含まれるURL
- URLs exactly matching：完全に一致するURL
- URLs staring with：で始まるURL
- URLs ending with：で終わるURL
- URLs matching RegEx：正規表現と一致するURL
- ③：②で設定した条件を指定します。例えば、①で表示（Only show on）を選択し、②で「WordPress post」を選択した場合、記事IDを入力すると、その記事にのみ表示可能となり、空欄であれば全ての投稿に表示可能です。URLで指定した場合はURLを入力します。
- ④Done：設定を保存します。
Spam Protection
スパム登録の設定を行います。
初期設定では、MailMunchによるスパム保護機能がONになっていますので、このままでも問題無いと思います（この機能は「OFF」にはできません）。
手順④：MailMunchとMailMunchのアカウントを接続する
「integrate」という設定項目でMailMunchとMailMunchのアカウントを接続します。
接続するサービスがいくつか表示されますが、MailChimpを選択して「Publish Form」をクリックします。
ポップアップ表示で「MailMunch」と「MailChimp」を接続するために、MailChimpのアカウント情報を入力します。
手順⑤：MailMunchの設定を完了させる
MailMunchとMailMunchのアカウントを接続が完了すると、下図の画面が表示されますので「Finish」をクリックします。
ウェルカムメールを設定するよう勧められますが、必要無いので「Not Now」をクリックします。
手順⑥：MailMunchのアカウント登録を行う
先程のページからプラグインの設定画面に戻り、MailMunchにログインするよう求められます。
初めて使う方はアカウントがありませんので、「Sign Up」をクリックします。
MailMunchのアカウント登録をします。
各項目の詳細は次のとおりです。
- ①WordPress Name：サイト名を入力します
- ②WordPress URL：サイトのURLを入力します。
- ③Email Address：アカウントに登録するメールドレスを入力します。
- ④Password：パスワードを入力します。
- ⑤Sing Up：全て入力しましたらクリックして下さい。
アカウント登録が完了すると、MailMunchの設定画面に戻り、フォームが稼働している事が確認できます。
以上で設定完了です。
まとめ
以上、WordPressサイトにMailChimpのフォームをMailMunchのスクロールボックスを設置する手順を解説しました。
MailMunchを使えばユーザーの目に留まりやすいスクロールボックスを簡単に設置できますので、WordPressとMailChimpを使っている方は、是非、MailMunchを試してみて下さい。
ちなみに、MailChimp以外にも、ConvertKitやZapier等を利用されてる方にもおすすめです。
