【MailChimp】メルマガ登録フォームの作り方【5つの手順で解説】

MailChimpでメルマガ登録フォームの作り方をお探しの方向け。

MailChimpのアカウントを作成したら、Webサイトやブログにメルマガ登録フォームを設置してリストを集めましょう。

この記事では、MailChimpでメルマガ登録フォームの作り方の手順を解説します。

MailChimpでメルマガ登録フォームを作る手順

それでは、MailChimpでメルマガ登録フォームを作る手順を解説します。

上記のとおりです。

手順①：Audienceの選択

まず最初に、フォームの作成対象となるAudienceを選択します。

下記リンクをクリックして、MailChimpのダッシュボードにログインして下さい。

公式サイト：MailChimp

ダッシュボードにログインしたら、①上部メニューの「Audience」を選択するとプルダウンメニューが開きますので、②「Audience dashboard」を選択します。

Audienceのダッシュボードに移動したら、①の「Manage Audience」をクリックし、②プルダウンメニューを開いて「Signup forms」を選択して下さい。

下図の画面が表示されたら、一番上の「Form builder」を選択して下さい。

手順②：フォームフィールドの編集

「Form builder」という画面が表示されますので、ここでフォームフィールド編集します。

フォームフィールドの編集手順は次のとおりです。

上記順に解説します。

Forms and response emailsの選択

「Forms and response emails」は「Signup form」になっていることを確認して下さい。

「Signup form」で登録フォームを編集できます。

ちなみに、上図の黄色の部分「Let subscribers pick email format (plain-text or HTML)」は、チェックを入れると購読者がHTML、またはテキストメールのどちらかを選択することができるようになります（チェックを外したまだとHTMLメールのみ送信されます）。

日本語に設定変更

次に、ユーザーに日本語の案内が表示されるように設定します。

下図「Translate it」というタブを選択すると、「Set default language」という言語セレクタが表示されます。

初期状態では「Set default language」は「English」になっていますので、「Japanese」を選択して下さい。

「Japanese」を選択後、下にスクロールして「Save Translation Settings」をクリックして設定を保存します。

フォーム編集画面を表示する

言語を日本語に変換したら、登録フォームを編集します。

フォームの編集は、「Build it」というタブをクリックするとフォーム編集画面が表示されますので、ここで編集します。

初期設定では、Email Address、First Name、Last Name、Address、Phone Number、Birthday表示されてますので、必要に応じて変更・削除します。

不要なフィールドの削除

まずは、Address（住所）、Phone Number（電話番号）、Birthday（誕生日）などは必要ないと思いますので、削除していきます。

不要なフィールドを削除する方法は、マウスカーソルをフィールドに合わせると「＋」「－」が表示されますので、「－」を選択します。

ポップアップが表示され、フィールドの削除を実行しても良いか確認されますので、①「DELETE」と入力し、②「Delete」ボタンをクリックします。

これで、Addressが削除できました。

同じ要領で不要な項目をどんどん削除しちゃいましょう。

とりあえず、メールアドレス以外の項目は全て削除しました。

フォームラベルとテキストの編集

フォームのラベルとフォームのテキストを編集します。

編集したいフォーム項目をクリックすると、画面右側に「Field settings」と表示されますので、ここでフォームのラベルとテキストを編集します。

試しに、メールアドレスのフォームラベルとテキストを編集します。

①「Field label」をカタカナでメールアドレスと入力し、②「Help text」に「メールアドレスを半角でご入力下さい。」と入力します。 

入力したら、「Save Field」をクリックして下さい。

下図のように、フォームラベルとテキストを編集できました。

ちなみに、Help textの入力は任意ですので、テキストが邪魔だという方は、空欄でもOKです。

フォーム項目の追加

フォームの項目を削除してしまったけど、やっぱり追加したいという時は、フォーム編集画面右側にある「Add a field」からフォームの項目を追加できます。

試しに、名前の入力項目を追加していきます。

右側にある「text」をクリックします。

空欄のフィールドが追加されますので、ユーザーが分かりやすいように、フィールドラベルとテキストを編集します。

フォームフィールドを下図のように編集します。

各項目の設定方法は次のとおりです。

編集すると以下のようにフォームフィールドを追加できました。

右側の入力項目で何時でも編集可能です。

同じ要領で名前の項目を追加しました。

手順③：フォームデザインの編集

「Design it」タブをクリックすると、フォームのデザインを編集できます。

編集可能な場所は次の3ヶ所です。

ブラウザの幅を狭めていると、デザイン編集項目が表示されない時があります。その場合、ブラウザの幅を最大値に変更すると表示されます。

編集したフォームデザインをリセットする方法

フォームデザインをカスタマイズし過ぎて、「一度元に戻したい」、「ゼロからやり直したい」という場合があると思います。

そのような時は、編集画面の一番下にある「Reset defaults」をクリックすると、元のデザインに戻す事ができます。

以上でフォームデザインの編集は完了です。

手順④：HTMLタグの取得

Webサイトにフォームを設置するために、登録フォームのHTMLタグを取得します。

下図画面の「Signup forms」をクリックします。

「Signup forms」をクリックすると、下図の画面が表示されますので、「Embedded forms」を選択します。

下図の画面が表示されますので「Preview」でプレビューでフォームの内容を確認します。

フォーム名の変更

フォームのタイトルを編集したい場合は、左側にある「Include form title」にチェック入れ、チェックボックス下部にある入力項目で編集して下さい。

タイトルは必要無いという方は、「Include form title」のチェックを外すと表示されません。

Webサイトに貼り付けるHTMLタグをコピー

「Copy/paste onto your site」の枠内にあるHTMLタグをコピーします。

HTMLタグをコピーしたら、Webサイトに貼り付けましょう。

手順⑤：WebページにHTMLタグを貼り付ける

WordPressサイトのページ（投稿・固定ページ共通）にタグを貼り付けます。

下図赤枠内に「手順④：HTMLタグの取得」で取得したHTMLタグを貼り付けます。

プレビューをクリックすると、フォームが表示されている事が確認できます。

ウィジェットに貼り付ければサイドバー（フッター）に設置可能

サイドバーやフッターに設置する場合は、カスタムHTMLを使えば設置可能です。

以上でフォームの作成は完了です。

Webサイトにフォームを設置したら、登録のお礼メールの自動返信を設定しましょう。

詳しい設定方法は「【MailChimp】ステップメール（Automation）の作り方」をどうぞ。

ちなみに、ポップアップ表示やスクロールボックスのように動きのあるフォームを設置したい方は、以下の記事で設置方法を解説していますので、是非どうぞ。

まとめ

以上、MailChimpのメルマガ登録フォームの作り方を解説しました。

ユーザーインターフェイスが英語なので、慣れないうちは作りにくいかもしれませんが、手順どおり進めれば登録フォームが作れると思います。

ユーザーインターフェイスが英語で、どうしても慣れないという方は、Google Chromeの翻訳機能を使えば日本語に変換できますので迷うことなく登録フォームが作れると思います。

登録フォームは5つの手順で作成できますので、是非ご自身の手でフォームを設置してみましょう。

人気記事デジタルコンテンツのダウンロード販売可能なツール6選【無料あり】