EFO機能を追加してAccount Engagement（旧Pardot）フォームのパフォーマンスを向上！

 カスタマーサクセスエンジニアチーム

 2022.12.21

 2024.03.12

 Pardot

  Account Engagement, フォーム

はじめに

Account Engagementフォーム作成を任されている全国のご担当者様方、はじめまして！
突然ですが、Account Engagementフォームについて「こんな機能があったらいいのに......」と思ったこと、ありませんか？

たとえば...

• 会社の規則でフォームに確認画面を実装したいが、Account Engagementにはその機能がない、、、
• ユーザーの離脱率を下げる（入力の手間を省くために）フリガナの自動入力をさせたい
• standard（デフォルト）のデザインがイケてないのでもう少し見やすいデザインに変更したい
• 入力文字をひらがなのみに限定させたい

etc...

そのような数々の要望を受け、我々toBeマーケティングの技術部門が立ち上がり、作っちゃいました！
汎用的なデザインのオリジナルテンプレートとEFO機能をフォームに実装できるオプションメニューを！！

※EFOとはユーザーの離脱率を減らすために、入力項目を減らす、入力途中でエラーを表示させる、入力補助をする、入力漏れを指摘するなどの手法です。

この記事では我々toBeマーケティングがAccount Engagementの入力完了率を向上させるためにスタンダードの状態から改善したポイントや、どのようなEFO機能オプションメニューを提供しているかをご紹介いたします。

※Pardotは2022年4月にAccount Engagementに名称変更しております。

toBeマーケティングオリジナルフォームテンプレート

Account Engagementには標準でstandard formなるものが実装されていますが、こちらのフォームはそのまま使用するのに向いているとは言えない、比較的簡素なデザインとなっています。

そこで、toBeマーケティングでは下記のような点に注目し、テンプレートを改善しました。

• デザイン性の欠如
  →入力欄のデザイン改善
  →フォームのレスポンシブ化
  →必須マークの改善
  →送信ボタンのデザイン改善
  →姓名項目や住所項目のグループ化
• 入力内容の統一化
  →プレースホルダー（入力例）の表示

改善したテンプレートのBefore＆After

プレースホルダーの表示や項目のグルーピング化についてはJavascriptを使用して実現していますが、それ以外はほとんどがスタイルの指定をすることで実現しています。

Account EngagementのレイアウトテンプレートはHTML・CSSなどのソースコードを用いてデザインしていくため、コーディングの知識さえあればかなり自由度高くカスタマイズが可能なのです！

toBeマーケティングで提供しているEFO機能

Account EngagementのレイアウトテンプレートはHTML・CSSに加え、Javascriptも用いてカスタマイズすることができます。

toBeマーケティングでは、上でご紹介したオリジナルデザインテンプレートに加え、Account Engagementフォームのデフォルト機能で実現できないEFO機能をスクリプトで実装しフォームのパフォーマンスを向上させるオプションメニューもご用意しています！

1.カレンダーの日本語化

Account Engagementの日付型項目をフォームに配置し、ユーザーの入力画面で項目を入力しようとするとカレンダーが立ち上がります。
このカレンダーは標準では英語表示となっています。こちらを日本語表示するために作成したオプションです。

2.カレンダーの入力支援（期間指定）

1のカレンダー日本語化に加えて選択可能or不可期間の指定ができるオプションです。
日数に加え、営業日での期間指定なども可能です。

3.カレンダーの入力支援（休日指定）

1のカレンダー日本語化に加え、指定した日を休日とし、選択不可にするオプションです。

4.フォーム確認画面の表示

Account Engagementの標準機能では実現できない、送信前の確認画面の表示ができるオプションメニューです。

5.メールアドレスの入力確認

メールアドレスの誤送信を防ぐために作成した、メールアドレスの文字列一致チェックができるオプションメニューです。

6.チェックボックスによる送信ボタン有効化

指定の項目をチェックする、しないで送信ボタンの活性化状況をコントロールできるオプションメニュー です。

7.指定ドメインアドレスの入力制御

ブラックリストもしくはホワイトリストを設定し、ドメインをチェック、NG指定したドメインを持つアドレスが入力されるとエラーが表示される。

8.文字数・種類による入力制御

項目に対して以下のようなバリデーションをかけて指定外の入力時にエラーを表示することができるメニューです。
①入力文字数の指定
②文字の種類の指定

9.電話番号の入力チェック

電話番号形式（0から開始、入力桁数、ハイフン有無など）で入力チェックを行い、指定外の入力時にエラーを表示させることができる機能です。

10.郵便番号による住所の入力支援

郵便番号を入力すると住所が Account Engagementのデフォルト項目の対応した項目に自動入力されるようになるオプションメニューです。

11.ふりがなの自動入力支援

項目にテキストを入力するとカナ（かな）が自動入力されるオプションメニューです。

12.複数選択方項目の選択数制御

チェックボックス型項目で、最大選択数または固定選択数を指定することができるオプションメニューです。

13.項目連動型選択リストによる入力支援

親項目の選択値によって、子項目で選択できる（表示させる）値を制御できるオプションメニューです。

まとめ

toBeマーケティングは、Pardot（現Account Engagement）フォームの機能向上のため、デザイン性の向上とEFO機能を備えたオリジナルテンプレートを提供しています。これには、入力補助、確認画面表示、メールアドレス確認、送信ボタンの活性化制御、入力制御など、ユーザーの離脱率を減らし入力完了率を高めるための機能が含まれています。

MAnaviでは、フォームに関する下記コンテンツを提供しています。
※以下のマニュアルは、MAnavi会員以外の方でもご覧いただけますので、ぜひご確認ください。
✔マニュアル：フォーム