LP作成ツール「カラフル」にMailChimpのフォームを設置する方法

マーケティング

ランディングページ(LP)作成ツール「Colorful(カラフル)」で作ったページにMailChimpのフォームを設置する方法をお探しの方向け。

 

LP作成ツール「カラフル」は、メール配信システムのフォームをカラフルで作ったページに設置する解説動画が4つ用意されています。

  • エキスパ
  • アスメル
  • Jcity
  • その他

「MailChimp」のフォームを設置する場合、MailChimpという項目は用意されていませんので、「その他」を確認する事になります。

しかし、「その他」の解説動画は、あくまで国内の配信ツールをベースに解説しているため、海外ツールのMailChimpと仕様が異なり、解説動画を見てもフォームを設置できないという問題が出てきます。

そこで、この記事では、ランディングページ作成ツール「カラフル」にMailChimpのフォームを設置する手順を解説します。

 

ちなみに、すでにオートメーション(ステップメール)が作成してある事を前提に解説していきますので、オートメーションを作成していない・作成方法が分からないという方は、以下の記事をどうぞ。

スポンサーリンク

LP作成ツール「カラフル」にMailChimpのフォームを設置する手順

ランディングページ作成ツール「カラフル」にMailChimpのフォームを設置する手順を解説します。

  • 手順①:MailChimpにログイン
  • 手順②:Audience(旧List)の選択
  • 手順③:Embedded formsの設定
  • 手順④:フォームを設置するページの選択
  • 手順⑤:テキスト編集画面でフォームタグを設置
  • 手順⑥:不要な部分の削除
  • 手順⑦:MailChimpでタグを取得
  • 手順⑧:タグの貼り付け

上記のとおりです。

手順①:MailChimpにログイン

まずはMailChimpにログインします。

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

 

ダッシュボード上部のメニュー「Audience」をクリックします。

2019年、MailChimpの仕様変更で、顧客リストを管理する「List」というメニューが「Audience」へと名称が変更されました。

手順②:Audience(旧List)の選択

Audienceへ移動したら、①Audience(旧List)を選択し、②画面右側にある「Manage Audience」をクリックし、③「Signup forms」をクリックします。

下図のようなフォーム選択画面が表示されますので、「Embedded forms」を選択して下さい。

手順③:Embedded formsの設定

Embedded formsを選択すると下図画面が表示されますので、①「Form options」のチェックを外し、②「Show only required fields」にチェックを入れ、③「Condensed」タブをクリックします。

下図のようにフォームのタグが発行されますので、このタグをLP作成ツール「カラフル」のフォームに設置します。

こちらのタグは「手順⑦:MailChimpでタグを取得」で使いますので、このページは開いたままにしておいて下さい。

手順④:フォームを設置するページの選択

手順③:Embedded formsの設定」で発行されたタグを「カラフル」で作成したランディングページに設置するために、フォームを設置するページを選択します。

 

ページを選択したら、下図のエディタが表示されますので、「カスタムボタン」をクリックします。

「カスタムボタン」をクリックすると、カラフルの素材がドロップダウン表示されますので、「フォーム・デザインFLAT」を選択します。

「フォーム小」でも設定方法は同じです。

下図のようにフォームが表示されますので、テキスト表示に変更し、先程MailChimp側で発行されたフォームタグを設置します。

手順⑤:テキスト編集画面でフォームタグを設置

テキスト編集画面でフォームタグを設置します。

HTMLを編集するので、エディタの右上にある「テキスト」タブを選択して下さい。

エディタの右上の「テキスト」タブをクリックすると、下図のようにHTMLが表示されますが、修正箇所は一部分だけですので、ご安心下さい。

フォームタグの修正箇所

フォームタグの修正箇所は下図の、<form action~で始まる部分から、</form>内のタグとなります。

黄色マーカーで記載している部分の間です。

手順⑥:不要な部分の削除

カラフルで出力される不要なタグを削除します。

今回は名前の入力を必要としないフォームを設置するので、名前の部分を削除します。

上記の選択部分を削除すると、下図のようになります。

名前を削除したら、MailChimpで発行されたタグを設置します。

手順⑦:MailChimpでタグを取得

手順③:Embedded formsの設定」で発行されたタグをコピーするので、MailChimpの「Embedded forms」で取得したタグをコピーします。

 

下図のように長々とフォームタグが表示されますが、実際使用するタグは<form action~で始まる部分から、</form>内の一部のタグです。

上図のタグをコピーして、カラフルに貼り付けます。

Embedded formsで表示されているタグは、いったんテキストファイルにコピーした方がやりやすいと思います。

手順⑧:タグの貼り付け

カラフルにEmbedded formsで取得したタグを貼り付けます。

最初に、下図の青い部分<form action~ novalidate>内をコピーします。

下図はカラフルのフォームタグですが、選択した部分と上図のタグを差し替えます。

タグを差し替えると下図のようになります。

次に、<div style~>~</div>の部分を選択し(下図の部分)、コピーします。

そして、先程差し替えたタグの下に貼り付けます。

最後に、下図の部分を修正します。

  1. name=”d[0]” → “EMAIL”
  2. type=”text” → “email”
  3. name=”submit” → “subscribe”
  4. value=” 登録 ” → “任意の名称に変更(変更しなくてもOK)”

上記を変更すると下図のようになります。

以上でカラフルにMailChimpのフォームを設置する方法は終了です。

実際に稼働させる前に、必ず動作テストを行いましょう。

 

まとめ

以上、ランディングページ作成ツール「カラフル」にMailChimpのフォームを設置する手順を解説しました。

MailChimpを使っていて、ランディングページ作成ツール「カラフル」を購入したけどフォームの設置方法が分からないという方の参考になれば幸いです。

 

 

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

人気記事ランディングページの作り方が学べるおすすめな本5冊【作り方の手順も解説】

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