MailChimpのフォームをWordPressサイトにコード不要で設置できるWordPressプラグインをお探しの方向け。
WordPressサイトにMailChimpの登録フォームを設置する場合、通常、HTMLタグを取得して、フォームを設置したい場所にHTMLタグを貼り付ける必要があります。
ただ、この方法はタグをコピーして貼り付ける事になるので、HTMLが分からない方からすると、若干ハードルは高いと感じると思います。
このような時はプラグインを使うと、HTMLタグを取得しなくてもショートコードを貼り付けるだけでフォームを設置できるようになります。
この記事では、WordPressとMailChimpを連携するプラグイン、「MailChimp for WordPress」を使って、フォームを設置する方法を解説します。
好きなところから読めます
MailChimp for WordPressでフォームを設置する手順
WordPressとMailChimpを連携するプラグイン、「MailChimp for WordPress」を使ってフォームを設置する手順を解説します。
- 手順①：プラグインのインストール
- 手順②：APIキーを取得する
- 手順③：取得したAPIキーをプラグインに貼り付ける
- 手順④：Audienceの選択
- 手順⑤：サイドバーウィジェットに貼り付ける
上記のとおりです。
手順①：プラグインのインストール
最初に、WordPressに「MailChimp for WordPress」をインストールします。
WordPressのダッシュボードにログインし、
ダッシュボード＞プラグイン＞新規追加 を選択します。
プラグイン検索窓に「MailChimp for WordPress」と入力するとプラグインが表示されますので、「今すぐインストール」をクリックします。インストール終了後「有効化」をクリックして、プラグインを有効化します。
左側メニューの「設定」を確認すると、「MailChimp for WP」という項目が追加されたことが確認できます。
続いて設定を行います。
手順②：APIキーを取得する
続いて、APIキーを取得します。
ダッシュボード＞MailChimp for WP＞MailChimp を選択して、
①プラグインの設定画面に移動します。
設定画面に移動したら、②「Get your API key here」をクリックします。
「Get your API key here」をクリックすると、MailChimpの管理画面に移動します。
画面中ほどにYour API keysという項目があり、APIキーが発行されますので、こちらのAPIキーコピーします。
手順③：取得したAPIキーをプラグインに貼り付ける
プラグインの管理画面に戻り、①取得したAPIキーを貼り付け、②「変更を保存」をクリックします。
MailChimpとWordPressが接続できると、Statusが「CONNECTED」と表示されます。
設定画面下部にAudienceが表示されるようにもなります。
以上でWordPressとMailChimpのAPI接続は完了です。
手順④：Audienceの選択
WordPressとMailChimpのAPI接続が完了したらしたら、メールアドレスの収集対象となる「Audience（旧List）」を選択します。
ダッシュボード＞MailChimp for WP＞Form を選択してAudience選択画面に移動します。
①フォーム名を入力し（表に出ないので、管理しやすい名称を入力して下さい）、②読者を集めたいAudienceを選択し、③「Add new form」をクリックします。
下図のようにショートコードが発行されますので、ショートコードをコピーします。
手順⑤：サイドバーウィジェットに貼り付ける
サイドバーに設置するので、ウィジェットに移動します。
ダッシュボード＞外観＞ウィジェット を選択します。
フォームを設置したい場所にカスタムHTMLウィジェットを設置し、「手順④：Audienceの選択」で取得したショートコードを貼り付け、保存ボタンをクリックします。
以上でフォームの設置は完了です。
トップページを表示すると、サイドバーにフォームが設置されていることが確認できます。
ただ、このままだとフォームの見た目がアレなので、カスタマイズしましょう。
MailChimp for WordPressで設置したフォームをカスタマイズする方法
プラグインをインストールして、見た目のカスタマイズをせずに出力されたショートコードをそのまま貼り付けると、下図のように英語表記のフォームになってしまいます。
もちろん、このままでもフォームとして機能しますが、これでは登録数は伸びませんので、フォームの見た目をカスタマイズしましょう。
- フォームのテキストを日本語に変更する方法
- 送信ボタンの色を変更する方法
- 登録後のメッセージの変更方法
- その他のセッティングの変更方法
上記のとおりです。
フォームのテキストを日本語に変更する方法
ダッシュボード＞MailChimp for WP＞Form を選択し、フォーム設定画面に移動します。
設定画面に移動すると、画面下部にコードの編集画面が表示されていると思いますので、ここで英語から日本語にテキストを変更します。
タイトルの変更方法
画面下にある「Form code」を以下のように変更すると、タイトルを変更できます。
- 変更前：<label>Email address：</label>
- 変更後：<label>メールアドレス：</label>
メールアドレス入力欄
下図赤枠内の部分を変更すると、メールボックス内のテキストを編集できます。
- 編集前：placeholder=”Your email address”
- 編集後：placeholder=”メールアドレスを入力して下さい”
送信ボタン
下図赤枠内を変更すると、送信ボタンのテキストを変更できます。
- 変更前：value=”Sign up”と書かれた部分を
- 変更後：value=”メールマガジンを購読する”
全て変更しましたら、画面下にある「変更を保存」ボタンをクリックして、設定を保存して下さい。
トップページを確認してみると、下図のように表示が変更されたことが確認できます。
送信ボタンの色を変更する方法
送信ボタンの色を変更する方法を解説します。
初期設定ではテーマ固有の色が表示されますが、5色のボタンカラー（Light、Dark、Red、Green、Blue）が用意されているので、お好みの色に変更しましょう。
送信ボタンの色を変更するには、フォーム設定画面で①「Appearance」タブを選択し、②Form Styleを選択します。
②Form Styleをクリックすると、下図のようにカラーを選択するプルダウンメニューが表示されますので、お好みのカラーを選択して下さい。
試しに、①「Green Theme」を選択し、②「変更を保存」をクリックします。
トップページを確認すると、送信ボタンが緑色に変更されたのが確認できます。
登録後のメッセージの変更方法
初期設定のまま使用すると、登録があった際に英語で「ご登録ありがとうございます！」という内容のメッセージが表示されますので、日本語に変更しましょう。
メッセージを英語から日本語に編集するには、フォーム設定画面で「Messages」タブを選択して設定します。
各項目の設定内容は次のとおりです。
| ① | Successfully subscribed | 登録後に表示されるメッセージなので、「ご登録ありがとうございます」というように変更しましょう。 |
| ② | Invalid email address | 無効なメールアドレスが入力された時に表示するメッセージなので、「有効なメールアドレスを入力してください。」と変更しましょう。 |
| ③ | Required field missing | 入力必須項目に記入していないと表示される警告メッセージ。メールアドレス以外に入力させる場合は変更しましょう。 |
| ④ | Already subscribed | すでにAudienceに登録してあると表示されるメッセージ。 |
| ⑤ | General error | 一般的なエラーが発生したときに表示されるメッセージです。「後でもう一度お試しください。」と変更しておけば良いです。 |
| ⑥ | Unsubscribed | ユーザーが登録解除を申請した際に、登録されていない時に表示させるメッセージ。登録解除ボタンを表示させる際に使用します。 |
| ⑦ | Not subscribed | ユーザーが登録解除を申請した際、ユーザーが指定したAudienceに登録されていないときに表示させるメッセージ。 |
| ⑧ | No list selected | ユーザーに登録Audienceを選択させる際、Audienceが選択されていないと表示される警告メッセージ。 |
全ての項目を変更する必要はありません
設定項目が8か所ありますが、作成するメールフォームが以下いずれかでしたら、①～⑤だけ変更すればOKです。
- メールアドレスだけ登録させる
- メールアドレス＋名前を登録させる
ちなみに、この記事を書いている筆者も、実際にメールアドレスだけを登録させるフォーム作りましましたが、下記項目しか変更していません。
他の項目は表示されないので変更する必要はありません。
その他のセッティングの変更方法
その他のセッティングの変更方法を解説します。
「Settings」というタブをクリックすると、Audienceの変更やダブルオプトインの設定、購読者情報の更新、ユーザーが登録した後にフォームを非表示するかどうか、サンクスページのURL指定などを設定できます。
各項目の設定内容は次のとおりです。
| ① | Lists this form subscribes to | Audienceを選択します |
| ② | Use double opt-in? | ダブルオプトインを使用するかしないか選択します。 |
| ③ | Update existing subscribers? | すでにAudienceに登録している購読者情報を更新するかどうか。 |
| ④ | Hide form after a successful sign-up? | ユーザーが登録した後、フォームを非表示にするかどうか。 |
| ⑤ | Redirect to URL after successful sign-ups | サンクスページを表示させたい場合は、URLを入力すると、登録後にリダイレクトさせる事ができます。 |
まとめ
以上、MailChimpのフォームをWordPressに簡単に設置できる「MailChimp for WordPress」の使い方や設定方法を解説しました。
MailChimp for WordPressで作ったフォームはシンプルなフォームなので、若干目立ちにくいかもしれませんが、「Boxzilla」というプラグインを組み合わせて使うと、ポップアップ表示のフォームを簡単に作る事ができます。
具体的な設定方法については、「【WordPress】ポップアップ作成プラグインBoxzilla【簡単設置】」という記事で解説していますので、興味がありましたら是非どうぞ。
ちなみに、他のフォームも検討してみたいという方は、以下の記事で動きのあるフォームを紹介していますので、興味のある方は是非どうぞ。
