MailChimpのフォーム作成機能を使ってポップアップ表示の登録フォームをウェブサイトに設置する方法

マーケティング

MailChimpにはポップアップ表示の登録フォームを作成する機能があります。

この記事では、WordPressサイトにMailChimpのポップアップフォームを設置する方法について解説します。

ポップアップフォーム設置に関する注意点

MailChimpのフォーム作成機能を使ってポップアップを作ると、見栄えが良いフォームを簡単に作る事ができます。

ただし、このフォームはいったん閉じるボタンをクリックすると、クッキーの有効期間が1年あるため、次に表示されるのが1年後になります

ポップアップフォームの多くは、クッキーの期間を設定できますが、MailChimpはクッキーの有効期間を設定する事ができません。

機能が改善される事を願うばかりです。

従って、クッキーの有効期間を設定してポップアップフォームを設置したい場合は、以下いずれかの方法でポップアップフォームを設置される事をお勧めします。

  • 「MailChimp for WordPress」と「boxzilla」を掛け合わせてフォームを設置する
  • 「MailMunch」でフォームを作成する

 

設置方法は以下の記事で解説していますので、参考にして下さい。

 

ポップアップの作成手順

それでは早速、MailChimp(メールチンプ)でメールマガジンを作る手順について解説していきます。

MailChimp(メールチンプ)にログインする

MailChimp にログインし、管理画面に移動します。下記リンクをクリックし、ログインして下さい。

「MailChimp(メールチンプ)」の公式サイトはコチラ

ログインしたら、上部メニューにある「Lists」を選択します。

リスト一覧が表示されますので、ポップアップを作成したいリストを選択します。

リスト一覧画面が表示されますので、「Signup forms」タブをクリックします。

以下の赤枠の部分いずれか(「Subscriber pop-up」、若しくは「Select」)をクリックします。

編集画面が表示されますので、ここでポップフォームを作成します。

 

ポップアップフォーム作成機能の解説

フォームデザイン

Format(表示形式)

ポップアップの表示形式を、以下3種類の中から選択することができます。

  • Modal:サイトの中央にフォームが表示されます。
  • Slide;フォームがスライドして出現し、画面右下に固定された状態で表示されます。
  • Fixed:画面の下に固定された状態でフォームが表示されます(この形式を選択した場合、登録フォームと本文のみの表示となります)。

例えば、「Slide」を選択すると下図のように表示されます。

Image alignment

フォームに画像を表示させるかどうか、また、表示させる場合、位置を選択できます。

Display(表示)

Display項目のプルダウンメニューをクリックすると、サイトにアクセスしたユーザーにフォームが表示されるタイミングを設定できます。

以下5つの中から選択出来ます。

  • immediately:訪問後すぐに表示させる
  • After 5 seconds:訪問してから5秒後に表示させる
  • After 20 seconds:訪問してから20秒後に表示させる
  • Scroll to middle of page:ページの真ん中までスクロールした時に表示させる
  • Scroll to bottom of page:ページの一番下までスクロールした時に表示させる
  • On exit:離脱する時に表示させる
「On exit」をChromeとEdgeで試してみましたが、正常に作動しませんでした。なのでもし、「On exit」を使用される際は、正常に作動するか何回かテストしてみて下さい。

Field labels(項目表示)

ここでは、項目のフォントや、テキストカラーを変更できます。

Button style

ここでは、申し込みボタンの文言や、ボタンのテキストカラーの変更、ボタンカラーの変更、ボタンの表示位置等がカスタマイズできます。

上から順に解説すると、

  • Text:ボタンの文章をお好みで設定できます。空白にすると「Subscrib」と表示されます。
  • Text color:ボタンの文章の色を設定できます。
  • Background color:ボタンカラーを設定できます。
  • Hover color:ボタンをマウスオーバーした時の色を設定できます。
  • Alignment:ボタンの表示位置を「Left(左寄せ)」、「Center(真ん中)」、「Right(右寄せ)」の中から選択できます。
  • Full Width:チェックを入れると上図のようにボタンが横幅一杯に表示されます。

フォームフィールド

ここでは、フォームに含めるフィールドを選択したり、表示の順番を並び替えることができます。

通常のメールフォーム(Form builder)でフォームを作成した際、ユーザーに登録させる項目をメールアドレスのみ設定しているような場合、下図のように追加で何か設定するような事はありません。

Form builderでフォームを作成した際、First Name(名前)とLast Name(姓)の登録をしてもらうような時は、ここに表示され、表示の並び替えや、必須項目かどうかを選択する事ができます。

フォームコンテンツ

ここでは、フォームの画像や文章を設定する事ができます。

上から順に解説すると、

  • Image:フォーム上部に表示させたい
  • Body:フォーム真ん中のテキストを編集できます。
  • Footer:登録ボタンの下にテキストを表示させたい場合はここを編集します。

となります。

また、一番下に「Sign up success message」という項目がありますが、こちらは登録完了後に表示させるメッセージを編集する事ができます。

設置コードの発行

フォームの設定が終わりましたら、画面右下にある「Generate Code」をクリックします。

ポップアップフォームのコードが表示されますので、コピーします。

コードが表示を閉じると画面右下のボタンが「Publish」に変わりますので、「Publish」をクリックするとウェブサイトにポップアップが表示されるようになります。

 

まとめ

以上、MailChimpのフォーム作成機能を使って、ポップアップ表示の登録フォームを作成する方法について解説しました。

クッキーの有効期間を設定できないのは厳しいですが、「1度閉じたら二度と表示されません」というメッセージを入れておけばある程度登録されると思いますので、興味のある方は是非使ってみて下さい。

以下のボタンをクリックすると、MailChimpの使い方を網羅したまとめ記事に移動できます。
MailChimp(メールチンプ)の使い方マニュアル

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