ランディングページ（LP）作成ツール「Colorful（カラフル）」で作ったページにMailChimpのフォームを設置する方法をお探しの方向け。
LP作成ツール「カラフル」は、メール配信システムのフォームをカラフルで作ったページに設置する解説動画が4つ用意されています。
- エキスパ
- アスメル
- Jcity
- その他
「MailChimp」のフォームを設置する場合、MailChimpという項目は用意されていませんので、「その他」を確認する事になります。
しかし、「その他」の解説動画は、あくまで国内の配信ツールをベースに解説しているため、海外ツールのMailChimpと仕様が異なり、解説動画を見てもフォームを設置できないという問題が出てきます。
そこで、この記事では、ランディングページ作成ツール「カラフル」にMailChimpのフォームを設置する手順を解説します。
ちなみに、すでにオートメーション（ステップメール）が作成してある事を前提に解説していきますので、オートメーションを作成していない・作成方法が分からないという方は、以下の記事をどうぞ。
好きなところから読めます
LP作成ツール「カラフル」にMailChimpのフォームを設置する手順
ランディングページ作成ツール「カラフル」にMailChimpのフォームを設置する手順は下記のとおりです。
- 手順①：MailChimpにログイン
- 手順②：Audienceの選択
- 手順③：Embedded formsの設定
- 手順④：フォームを設置するページの選択
- 手順⑤：テキスト編集画面でフォームタグを設置
- 手順⑥：不要な部分の削除
- 手順⑦：MailChimpでタグを取得
- 手順⑧：タグの貼り付け
上記のとおりです。
手順①：MailChimpにログイン
まずはMailChimpにログインします。
公式サイト：MailChimp
ダッシュボード上部のメニュー「Audience」をクリックします。
手順②：Audienceの選択
Audienceへ移動したら、①Audience（旧List）を選択し、②画面右側にある「Manage Audience」をクリックし、③「Signup forms」をクリックします。
下図のようなフォーム選択画面が表示されますので、「Embedded forms」を選択して下さい。
手順③：Embedded formsの設定
Embedded formsを選択すると下図画面が表示されますので、①「Form options」のチェックを外し、②「Show only required fields」にチェックを入れ、③「Condensed」タブをクリックします。
下図のようにフォームのタグが発行されますので、このタグをLP作成ツール「カラフル」のフォームに設置します。
手順④：フォームを設置するページの選択
「手順③：Embedded formsの設定」で発行されたタグを「カラフル」で作成したランディングページに設置するために、フォームを設置するページを選択します。
ページを選択したら、下図のエディタが表示されますので、「カスタムボタン」をクリックします。
「カスタムボタン」をクリックすると、カラフルの素材がドロップダウン表示されますので、「フォーム・デザインFLAT」を選択します。
下図のようにフォームが表示されますので、テキスト表示に変更し、先程MailChimp側で発行されたフォームタグを設置します。
手順⑤：テキスト編集画面でフォームタグを設置
テキスト編集画面でフォームタグを設置します。
エディタの右上の「テキスト」タブをクリックすると、下図のようにHTMLが表示されますが、修正箇所は一部分だけですので、ご安心下さい。
フォームタグの修正箇所
フォームタグの修正箇所は下図の、<form action～で始まる部分から、</form>内のタグとなります。
手順⑥：不要な部分の削除
カラフルで出力される不要なタグを削除します。
今回は名前の入力を必要としないフォームを設置するので、名前の部分を削除します。
上記の選択部分を削除すると、下図のようになります。
名前を削除したら、MailChimpで発行されたタグを設置します。
手順⑦：MailChimpでタグを取得
「手順③：Embedded formsの設定」で発行されたタグをコピーするので、MailChimpの「Embedded forms」で取得したタグをコピーします。
下図のように長々とフォームタグが表示されますが、実際使用するタグは<form action～で始まる部分から、</form>内の一部のタグです。
上図のタグをコピーして、カラフルに貼り付けます。
手順⑧：タグの貼り付け
カラフルにEmbedded formsで取得したタグを貼り付けます。
最初に、下図の青い部分＜form action～ novalidate＞内をコピーします。
下図はカラフルのフォームタグですが、選択した部分と上図のタグを差し替えます。
タグを差し替えると下図のようになります。
次に、＜div style～＞～＜/div＞の部分を選択し（下図の部分）、コピーします。
そして、先程差し替えたタグの下に貼り付けます。
最後に、下図の部分を修正します。
- ①name=”d[0]” → “EMAIL”
- ②type=”text” → “email”
- ③name=”submit” → “subscribe”
- ④value=” 登録 ” → “任意の名称に変更（変更しなくてもOK）”
上記を変更すると下図のようになります。
以上でカラフルにMailChimpのフォームを設置する方法は終了です。
実際に稼働させる前に、必ず動作テストを行いましょう。
まとめ
以上、ランディングページ作成ツール「カラフル」にMailChimpのフォームを設置する手順を解説しました。
MailChimpを使っていて、ランディングページ作成ツール「カラフル」を購入したけどフォームの設置方法が分からないという方は、是非参考にして下さい。
