LP作成ツール「LPtools（LPツールズ）」の入力フォームにMailChimpのフォームを設置する方法をお探しの方向け。
LPtoolsはフォームタグ自動整形機能が実装されていますので、メール配信システムで出力されたフォームタグをコピペするだけで、フォームを設置できるようになっています。
しかし、この機能は全てのメール配信システムに対応している訳ではなく、対応していない配信システムもあります。
MailChimpの場合、システムで出力されるフォームタグをLPtoolsにコピペすると、下図のように警告が表示され、フォームを設置できません。
しかし、フォームタグを編集すれば、自動整形機能でMailChimpのフォームを設置できるようになります。
この記事では、LPtoolsにMailChimpのフォームを設置する手順を解説します。
MailChimpを使っている方の参考になれば幸いです。
好きなところから読めます
LPtoolsにMailChimpのフォームを設置する手順
LPtoolsにMailChimpのフォームを設置する手順は下記のとおりです。
- 手順①：フォーム設置対象のAudienceの選択
- 手順②：Form builderに移動
- 手順③：フォームの編集
- 手順④：Embedded formsでフォームタグの取得
- 手順⑤：不要なタグの削除
- 手順⑥：LPtoolsでフォームを設置
- 手順⑦：動作テスト
上記のとおりです。
手順①：フォーム設置対象のAudienceの選択
まずはフォーム設置対象となるAudienceを選択します。
下記リンクをクリックし、MailChimpのダッシュボードに移動します。
公式サイト：MailChimp
ダッシュボードのメニュー「Audience」を選択します。
フォーム設置対象となる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をお使いの方は本記事を参考に設置してみてください。
