LPテンプレートColorful(カラフル)にMailChimpのフォームを設置する方法

マーケティング

LPテンプレートColorful(カラフル)のマニュアルには、メールフォームの設置方法の解説動画が用意されています。

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

カラフルでMailChimpのフォームを設置する場合、その他を確認すると思いますが、MailChimpのフォームは国内のフォームと若干仕様が異なり、解説動画を見ても上手く設置する事ができません。

この記事では、LPテンプレートカラフルのメールフォームをMailChimpと連携する手順について解説します。

ちなみに、LPテンプレートカラフルを以下の記事で紹介していますので、参考にして下さい。

LPテンプレートカラフルにMailChimpのフォームを設置する手順

それでは早速、LPテンプレートカラフルにMailChimp(メールチンプ)のフォームを設置する手順について解説していきます。

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

MailChimpにログイン

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

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

上部メニューにある「Audience」をクリックします。

最近、微妙に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テンプレートカラフルのフォームに設置します。

 

カラフル側の設定

LPテンプレートカラフルをインストールしたWordPressサイトにフォームを設置します。

フォームを設置するページの選択

フォームを設置するページを選択します。ページを選択したら、以下のようにエディタが表示されますので、「カスタムボタン」をクリックします。

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

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

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

タグの編集

それでは、タグを編集していきます。HTMLを編集しますので、エディタの右上にある「テキスト」タブを選択します。

以下のようにHTMLが表示されますが、修正箇所は一部分だけですので、ご安心下さい。

修正箇所

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

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

不要な部分の削除

まず最初に、不要なタグを削除していきます。今回は名前の入力を必要としないフォームを設置するので、名前の部分を削除します。

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

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

MailChimpでタグを取得

MailChimpのEmbedded formsでフォームに戻り、タグを表示させます。

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

ここから以下の部分のタグをコピーし、カラフルに張り付けていきます。

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

タグの貼り付け

それでは、LPテンプレートカラフルにEmbedded formsで取得したタグを貼り付けていきます。

まずは以下のコピー部分<form action~ novalidate>内の部分をコピーしましょう。

以下はLPテンプレートカラフルのフォームタグですが、選択部分と差し替えます。

差し替えると以下のようになります。

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

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

最後に、以下の部分を修正していきます。

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

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

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

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

 

まとめ

以上、LPテンプレートカラフルでMailChimpのフォームを設置する手順について解説しました。

MailChimpを使っていて、LPテンプレートカラフルを購入したけどフォームの設置方法が分からないという方は、参考にして下さい。

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