【Account Engagement】初心者向け！フォーム作成手順

2025年11月26日2025年11月27日

はじめに

Salesforce Account Engagement（旧Pardot）におけるフォーム作成作業は、マーケティング施策の中でも特に重要な工程です。正しくフォームを構築することで、見込み顧客からの情報取得やナーチャリングがスムーズに行えるようになります。

今回は、初心者の方でも理解しやすいように詳細な手順をまとめました！ぜひ挑戦してみてくださいね！

Account Engagement フォーム作成の主要手順

レイアウトテンプレートの作成

フォームのデザインや構造を管理するために、まず「レイアウトテンプレート」を作成します。
これは、すべてのフォームの見た目のベースとなる重要な要素です。

① 管理画面から「スタンダード」テンプレートをコピーし、用途に応じた名称（例：MA用支援テンプレート）で保存します。

② HTMLコードの<head>タグの直前に、以下のメタタグを挿入してください。

<meta name="viewport" content="width=device-width, initial-scale=1">

この設定を追加することで、フォームがスマートフォンやタブレットなどのモバイル端末でも正しく表示されるようになります。

フォームの作成

続いて、実際のフォームを作成していきます。ここではフォーム名の設定から、各項目の設計までを行います。

① 「新規フォームの追加」から、対象となるフォームの名前を入力します。

② 紐付けるキャンペーンを選択します（用途に応じて「MAU」または「ウェブトラッキング」を選びます）。

アンケート項目の設定

① フォームで使用する項目を、既存のプロスペクト項目（例：アンケートナンバー1）と紐付けて設定します。ラベルの編集や既定値の読み込み、必須チェックの有無を確認しながら設定します。

①－１クリックして選択できるプロスペクトのリストを展開

①－２フォームに設定するプロスペクト項目を選択

①－３デフォルトデータを読み込み（選択リストの値など読み込める）

①－４必須項目ならチェックする

※必須項目か任意項目かを設定し、特定のチェックボックスにチェックを入れます。
※メールアドレスは必須ですが、それ以外の氏名などの項目は既存プロスペクトへの送信では不要な場合が多いです。

詳細タブの編集

「詳細」タブでは、フォームの表示方法に関する設定を行います。

「すでに入力されていても常に表示する」にチェックを入れることで、ユーザーの入力内容を確認・修正しやすくなります。

デザインと完了アクション

① フォームの構築が完了したら、見た目の調整と、送信後に実行される処理（完了アクション）を設定します。

デザインの調整

① 先ほど作成したレイアウトテンプレートを選択して適用します。

② 指定されたCSSコードをフォームの上部に挿入します（案件ごとに異なるため多少の編集は必要になります）。
③ フォームのタイトル文（例：「〇〇に関するアンケート」）の〇〇部分も、案件に合わせて編集します。

<center>
<p><span style="font-size:26px;"><strong>【◯◯に関するアンケート】</strong></span></p>
<center>
<p>
<style type="text/css">/*
 * ============================================================
 * #pardot-form
 * ============================================================
 *
 * #pardot-form
 * バッティングを避けるため#pardot-formを使用して詳細度を上げる
 *
 * ボックスモデル
 * box-sizing: border-box;
 *
 * フォントサイズ
 * 16px
 *
 * メディアクエリ
 * 基本はスマホでmin-widthを使いその他に対応
 * @media screen and (max-width: 717px) { }
 * @media screen and (min-width: 718px) { }
 */
#pardot-form {
  font-size: 16px;
  margin-top: 20px;
}
@media screen and (max-width: 717px) {
  #pardot-form {
    padding: 0 10px;
  }
}
#pardot-form * {
  box-sizing: border-box;
  font-size: 16px;
}
#pardot-form p {
  margin: 0;
  padding: 0;
}
#pardot-form .form-field {
  margin-top: 15px;
}
  #pardot-form .form-field {
    margin-top: 15px;
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
}
  #pardot-form .required span.value label::after {
    content: none;
}
#pardot-form .field-label {
  font-size: 16px;
  width: 100%;
}
#pardot-form input,
#pardot-form select,
#pardot-form textarea {
  margin-top: 12px;
}
#pardot-form input[type=text] {
  display: block;
  width: 100%;
  padding: 20px;
  line-height: 20px;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  max-width: 100%;
  width: 100%;
}
#pardot-form textarea {
  display: block;
  width: 100%;
  padding: 8px;
  line-height: 20px;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  height: 10rem;
}
/* #pardot-form .pd-radio {
  display: flex;
  flex-direction: column;
}*/
#pardot-form .pd-radio span {
  display: block;
}
form#pardot-form span.value {
    margin-left: 0px;
}
#pardot-form .pd-radio .value > span {
  margin-top: 5px;
}
#pardot-form .pd-checkbox span {
  display: block;
}
#pardot-form .pd-checkbox .value > span {
  margin-top: 5px;
}
#pardot-form .pd-select select {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: block;
  width: 100%;
  height: 42px;
  line-height: 42px;
  margin-top: 20px;
}
#pardot-form .field-label {
  font-weight: bold;
  text-align: left;
}
#pardot-form .submit {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  padding: 20px 0;
}
#pardot-form .submit input[type=submit] {
  color: #fff;
  padding: 0 16px;
  background: #EF8404;
  width: 240px;
  border-radius: 4px;
  border: none;
  line-height: 48px;
}
#pardot-form .submit input[type=submit]:hover {
  background: #165E83;
}
#pardot-form .errors {
  margin: 18px 0;
  color: #fff;
  display: inline-block
}
#pardot-form .error.no-label {
  margin: 14px 0;
  font-size: 14px;
  color: #d00;
}
</style>
</p>
</center>
</center>

④ 送信ボタンのラベル（ボタン名）も適宜カスタマイズしましょう。