MailChimpのフォームをWordPressに簡単に設置できる「MailChimp for WordPress」

MailChimpのフォームをWordPressに簡単に設置できる「MailChimp for WordPress」WordPress

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 toAudienceを選択します
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【簡単設置】」という記事で解説していますので、興味がありましたら是非どうぞ。

 

ちなみに、他のフォームも検討してみたいという方は、以下の記事で動きのあるフォームを紹介していますので、興味のある方は是非どうぞ。

 

 

トップへ戻る
タイトルとURLをコピーしました