LPtoolsにMailChimpのフォームを設置する方法

メルマガ

LP作成ツール「LPtools(LPツールズ)」の入力フォームにMailChimpのフォームを設置する方法をお探しの方向け。

 

LPtoolsはフォームタグ自動整形機能が実装されていますので、メール配信システムで出力されたフォームタグをコピペするだけで、フォームを設置できるようになっています。

しかし、この機能は全てのメール配信システムに対応している訳ではなく、対応していない配信システムもあります。

海外のメール配信システムは対応していない場合が殆どです。

 

MailChimpの場合、システムで出力されるフォームタグをLPtoolsにコピペすると、下図のように警告が表示され、フォームを設置できません。

しかし、フォームタグを編集すれば、自動整形機能でMailChimpのフォームを設置できるようになります。

 

この記事では、LPtoolsにMailChimpのフォームを設置する手順を解説します。

MailChimpを使っている方の参考になれば幸いです。

なお、本記事はAutomation(ステップメール)が作成してあることを前提に解説しますので、
Automationを作成していない・作成方法が分からない方は「【MailChimp】ステップメール(Automation)の作り方」を是非参考にしてください。
スポンサーリンク

LPtoolsにMailChimpのフォームを設置する手順

LPtoolsにMailChimpのフォームを設置する手順は下記のとおりです。

  • 手順①:フォーム設置対象のAudienceの選択
  • 手順②:Form builderに移動
  • 手順③:フォームの編集
  • 手順④:Embedded formsでフォームタグの取得
  • 手順⑤:不要なタグの削除
  • 手順⑥:LPtoolsでフォームを設置
  • 手順⑦:動作テスト

上記のとおりです。

手順①:フォーム設置対象のAudienceの選択

まずはフォーム設置対象となるAudienceを選択します。

下記リンクをクリックし、MailChimpのダッシュボードに移動します。

公式サイトMailChimp

 

ダッシュボードのメニュー「Audience」を選択します。

Audienceが1つの方は、次の手順に進んで下さい。

フォーム設置対象となるAudienceを選択します。

手順②:Form builderに移動

フォーム設置対象のAudience選択したら、Form builderに移動します。

①左側メニューの「Signup forms」を選択し、②「Form builder」を選択してください。

Form builderが表示されますので、フォームを編集します。

手順③:フォームの編集

Form builderでフォームを編集します。

ちなみに、ここでやることは下記2つです。

  • 不要なフォームフィールドの削除
  • フォームの並び順の変更

上記の順に解説します。

不要なフォームフィールドの削除

最初に、不要なフォームフィールドを削除します。

MailChimpのフォームはデフォルトで下記5つのフォームフィールドが設定されています。

  • Email Address(残す)
  • First Name(削除)
  • Last Name(残す)
  • Address(削除)
  • Phone Number(削除)

しかし、LPtoolsのフォームに設置できるフィールドは2つなので、メールアドレスと苗字以外のフィールドを削除します。

フィールドの削除方法

試しに、「Address」から削除します。マウスで「Address」のフィールドを選択します。

フィールドを選択すると、下図のように「+」「-」のアイコンが表示されますので、「-」を選択します。

フォームフィールド削除の確認が表示されますので、①入力項目に「DELETE」と入力し、②「Deleteボタン」をクリックします。

これで、フォームフィールドを削除できます。

同じ手順で「Phone Number」と「First Name」を削除し、下図のように「Email Address」と「Last Name」だけ残してください。

フィールドラベルの編集方法

不要なフォームを削除したら、フィールドラベルを編集しておきましょう。

フィールドラベルを編集しておくとリスト管理がしやすくなります。

まずは「Last Name」というラベルを「苗字」に変更します。

①フォームフィールドを選択すると、右側に編集項目が表示されますので、②Field labelの項目を「苗字(名字・性名)」に編集し、③「Save Field」をクリックします。

同じ要領で「Email Address」というフィールドラベルも「メールアドレス」などに変更しておきましょう。

フィールドラベルを変更したら次に進みます。

フォームの並び順の変更

フォームの並び順を変更します。

LPtoolsのフォーム自動整形機能では、下記並び順でフォームを整形するよう推奨されていますので、MailChimpのフォームの並び順を変更します。

  • 名前
  • メールアドレス

 

並び順の変更はドラッグで簡単に変更できます。

苗字のフォームフィールドを上部にドラッグします。

下図のように、フォームフィールドの順番が入れ替わりました。

以上でフォームの編集は完了です。

手順④:Embedded formsでフォームタグの取得

フォームを編集したら、Embedded formsに移動してフォームタグを取得します。

左側メニューの「Signup forms」をクリックします。

Signup forms画面に移動したら、「Embedded forms」を選択します。

下図画面が表示されますので、Embedded formsの「Unstyled」というタブを選択してください。

Unstyledをクリックすると下図画面が表示されますので、Form options項目にある「Include form title」のチェックを外します。

チェックを外すと、フォーム内の「Subscribe」というタイトル表示が消えます。

 

タイトルを消したら、下図「Embedded Form Code」の「Generate Embed Code」をクリックします。

フォームタグが表示されますので、「Copy Code」をクリックしてフォームタグコピーします。

フォームタグをコピーしたら、テキストファイルに取得したタグを貼り付けて下さい。

フォームタグを取得したら、不要なタグを削除します。

手順⑤:不要なタグの削除

不要なタグを削除します。

ちなみに不要なタグを削除すると、下図のように7行しか残りません。

  • <form action ~ novalidate>
  • <label for =”mce-LNAME”>苗字</label>
  • <input type=”text”~ id=”mce-LNAME”>
  • <label for=”mce-EMAIL”>メールアドレス<span~</span>
  • </label>
  • <input type=”email”~ id=”mce-EMAIL”>
  • </form>

その他のタグは不要なので、全て削除します。

 

最初に、<form action~の前の行をすべて削除します。

<form adtion~の前の行を全て削除すると、下図のとおりとなります。

続いて、下部のタグを削除します。

<input type=”email”~の下にある</div>から、
</form>の上の行にある</div>まで削除します。

下図のように、だいぶすっきりしてきました。

ここまで削除したら、あと少しです。

 

次に、<div id=”mc_embed~
<div class=”mc-field~までを削除します。

下図のようになります。

 

最後に、下図2個所のタグを削除します。

このパートの最初に解説したとおり、7行残りました。

以上でフォームタグの編集は完了です。

編集したフォームタグをLPtoolsのフォームに貼り付けます。

手順⑥:LPtoolsでフォームを設置

編集したフォームタグをLptoolsのフォームに貼り付けます。

フォーム作成ブロックを呼び出します。

フォーム作成ブロックを追加したら、右側にある「フォームのhtmlを入力」に編集済のフォームタグを貼り付けます。

画面上部に「自動整形が完了しました」と表示されますので、OKボタンをクリックします。

下図のように、整形済みのフォームが表示されます。

プレビューで確認すると、入力項目が表示されていることが確認できます。

フォームを設置した後は、フォーム周りのテキストや、ボタンテキスト・画像など、フォームの見栄えを修正するだけです。

以上でLPtoolsにMailChimpのフォーム設置は完了です。

手順⑦:動作テスト

フォームを設置したら、きちんと登録できるかテストを行いましょう。

名前とメールアドレスを入力し、きちんと登録できればOKです。

 

ちなみに、フォームの並び順の変更を忘れると、下図エラーが出ます。

もし、上図エラーが出た場合、タグを修正するか、
手順③:フォームの編集」のフォームの並び順の変更に戻り、名前とメールアドレスの並び順を入れ替えてください。

 

まとめ

以上、LPtoolsにMailChimpのフォームを設置する方法を解説しました。

タグの編集が難しく感じるかもしれませんが、落ち着いて設定すれば設置できますので、MailChimpをお使いの方は本記事を参考に設置してみてください。

 

 

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

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

タイトルとURLをコピーしました