はじめてAccount Engagement ランディングページを使ってみたところ、使う上で知りたいことがsalesforce公式のヘルプページですらまとまって置いてなくて非常に苦しんだので、自分用備忘録としてまとめておくことにしました。
なお、職場ではpi.pardot.comをみんな使っているので「Pardot」呼びで統一します。

前提

背景

フォーム付きのLPを作る指示が出た。
上司「Salesforceと連携しやすいようにPardotのランディングページ機能(以下PardotLP)を使ってね」
PardotLPとはテンプレートさえ作れば後はノーコードでランディングページを量産できる機能である。
しかし会社の方もPardotLPを実際に使ったことがあるわけでもないので検証も兼ねて作ることになった。

知りたいこと

PardotLPの編集の自由度（要素入れ替えやフォームのカスタマイズが容易か？）
テンプレート作りがどのくらい簡単か（ダルかったら続けたくないので）
対応していないプロパティが無いか（HTMLメールの仕様がトラウマになっている）
できればCSSはHTMLファイルと分けたいが可能か（styleタグ内に100行も書きたくない）

調べてわかったこと

フォームを入れるときはiframeを使わなくてもHTMLファイル上でフォームを入れたい箇所に変数%%content%%を挿入すれば入れられる。
フォームのHTMLタグはレイアウトテンプレート本体のHTMLタグとは別の場所に入れる（レイアウトテンプレート作成ページ内でタブが分かれている）
Pardot上で編集可能にしたい項目は要素の開始タグにpardot-region="わかりやすい名前"と属性を入れるとその要素がPardotのエディタで編集可能になる。
例) <p pardot-region="text1">lorem ipsum</p>でpタグの要素が編集可能な要素として認識される。
挿入対象のタグによって編集内容が変化し、実際に使った範囲だと
hタグ・pタグ：1行テキスト（スタイル指定や改行ができない）
imgタグ：画像の差し替え・代替テキスト
divタグ：ブログやメルマガみたいな入力欄（スタイル指定や改行、画像やテーブルの挿入など自由度が高い）
ソースは若干汚れるが、テキストを入れる箇所はdivで囲うのが良さそう。

やったこと

CSSファイルのアップロード

CSSはPardotダッシュボードのコンテンツ>ファイルにアップロードして、発行されたファイルURLをlinkタグで読み込ませる（元々相対パスで入れていた部分と差し替える）と、レイアウトテンプレートへ読み込ませられた。
ちなみにHTMLファイルはレイアウトテンプレート作成ページのエディタにコピペで流し込むしか無い。

フォームのHTML編集

送信ボタンの位置調整をした。
デフォルトの仕様ではフォーム内の入力エリアのすぐ下に送信ボタンが出て、その下にフォーム最下部のテキストが出る仕様になっている。
このボタンとテキストの位置を逆転させたいが、フォームメニューのレイアウトテンプレートからは項目順序を変更することができない。（罠）
ランディングページのレイアウトテンプレート編集画面で「フォーム」タブを開くと項目位置や入力エリアを囲むタグなどを変更できる。

フォームのCSS装飾

普通に装飾と、必須項目の見え方の変更（デフォルトだと見づらい黄色で＊と出るのみ）をした。
装飾に最低限必要なclass・idは公式のヘルプページに書いてある。
各項目個別のclassはフォームを作る際に個別に設定することもできるが、毎回classを設定するのも面倒なので、一括でやれそうな方法を探した。

必要な項目を満たすフォームをとりあえず作る
作ったフォームをプレビューし、検証なりソースなりからclass名を見つける

かなり力押しだけどこれでいけた。
あとはそのclassに対して普通にpaddingとかborderとか設定したらフォーム本体はできあがり。
必須項目にはrequiredというclassが付与されているので、

.required::after {
        content: "必須";
        font-weight: 600;
        color: red;
}

みたく書けば必須項目のみに「必須」と赤字で表示が出るようになる。

プレースホルダーの表示

PardotLPのレイアウトテンプレート作成ではjQueryをcssと同様に使用できるので、jQueryで記述して表示させた。
idはclassと同様にソースを見ればどうにかなる。

おわりに

PardotLPは全然怖くないのでどんどん使うと良い
ただ見た目や作りが凝ったもの、量産しないものは普通にスクラッチで作ったほうが早いしきれいにできる
PardotLPが向いているのはフォームがメインかつ中身だけ変えて量産するもの。
例) ホワイトペーパー、資料請求、セミナー案内など
Salesforceのヘルプページの構造本当にどうにかしてほしい。情報が探しづらすぎる。