Web集客無料メール講座

ウェブ集客に関するメール講座を期間限定で無料購読できます。

詳細はこちら

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

マーケティング

今回は、MailChimpのフォーム作成機能を使って、ポップアップ表示の登録フォームを作成し、WordPressサイトに設置する方法について解説します。

解説する前に、以下の点にご注意ください。
MailChimpのフォーム作成機能を使ってポップアップを作ると、見栄えが良いフォームを簡単に作る事ができますが、このフォームはいったん閉じるボタンをクリックすると、クッキーの有効期間が1年あるため、一度閉じるボタンを押すと、次に表示されるのが1年後になります。この手のフォームは通常、クッキーの期間を設定できたりするものですが、MailChimpではクッキーの有効期間を設定する事ができません。従って、クッキーの有効期間を設定してポップアップ表示の登録フォームを設定したい場合は、「MailChimp for WordPress」と「boxzilla」を組み合わせて作成される事をお勧めします。
ポップアップ表示を簡単に作れるプラグイン「Boxzilla」を使ってメールマガジンの登録アピールしよう
ウェブサイトを訪問すると、たまにポップアップが表示されたりするサイトがあるのを見たことありませんか? 例えば、 ページをスクロールすると出現したり、 サイトから離脱しようとすると出現したり、 など、こうしたポップ...
WordPressサイトとMailChimpを連携するプラグイン「MailChimp for WordPress」でリストを獲得
メールチンプに登録して初期設定を済ませたら、1人でも多く読者を獲得していく必要があるのですが、読者を増やすにはメールマガジンの登録フォームを設置する必要があります。 通常、登録フォームを設置する場合、HTMLコードを張り付けたりする必...

ポップアップの作成手順

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

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

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

https://mailchimp.com/
トップページに移動する

ログインしたら、上部メニューにある「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度閉じたら二度と表示されません」というメッセージを入れておけばある程度登録されると思いますので、興味のある方は是非使ってみて下さい。

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
無料メール講座
集客に強いWordPressを活用してあなたのファンを引き寄せる「Web集客無料メール講座」

今なら無料で下記ノウハウが手に入ります。

WordPressでビジネスサイトを構築するマニュアル
売り込まなくても楽に売れるWeb集客ノウハウ
あなたの商品・サービスを必要としている人に届ける方法

期間限定2大プレゼント「WordPressでビジネスサイトを構築するマニュアル」&「Web集客無料メール講座」

PROFILE
この記事を書いた人
瀬間 隆司

上野を拠点に中小企業の資金繰り・事業再生コンサルタントとして活動しています。
最近は自分でウェブサイトを作りたいという企業や、独立された方、独立を考えている方等にWordPressを活用したウェブサイト作り方をレクチャーしています。

他にも、チャットボットを作ったり、業務効率化のためにRPAを研究したり、目新しいものに飛びつく傾向があります。

フォローする
マーケティング
クリエイトエクスプレス