StudioでSalesforce Account Engagement（旧Pardot）フォームを埋め込み対応
Project Overview
Studio標準フォームからSalesforce Account Engagement（旧Pardot）フォームへの切り替えを実装し、確認画面遷移時のiframe高さ変化にも自動追従する運用を実現。
案件概要
既存クライアント様からのご紹介で、StudioサイトにSalesforce Account Engagement（旧Pardot）のフォームを埋め込みたいというご依頼をいただきました。
Account Engagementは導入コストが高く、利用事例も限られるため、Studioとの組み合わせに関する公開情報が少ない状況でした。そこでSalesforce公式ドキュメントを読み解きながら、要件に合わせた実装を進めました。
結果として、Studioの標準フォームからAccount Engagementフォームへの切り替えを無事完了し、運用可能な状態で公開まで対応しました。
課題
今回の実装では、主に以下の点が課題でした。
- Studioでの埋め込み前提で、Account Engagementフォームの表示や遷移を安定させる必要がある
- 確認画面への遷移時にiframeの高さが変わり、レイアウト崩れが発生しやすい
- Studio側で利用しているWebフォントをiframe内でそのまま使えず、見た目の差が出やすい
解決策
Salesforce公式ドキュメントをベースに実装仕様を整理し、Studio側とAccount Engagement側の双方で設定を最適化しました。
Account Engagement管理画面上でフォーム内容の調整を行いながら、Studio上の埋め込み実装を調整し、表示・入力・確認導線が崩れない構成へ整えています。
実装時に工夫したところ
- 確認画面への切り替えでiframeサイズが変動するため、iframeの高さ情報をStudio側へ渡して自動リサイズ
- iframe内でStudioのWebフォントが使えない前提で、違和感を抑えるフォント設計を実施
- 今回はクライアント様と調整のうえ、Webフォントは使わずシステムフォントで統一
- Salesforce提供ドキュメントを読み解き、実装可否と設定範囲を事前に明確化
フォーム実装のご相談について
Studio標準フォームで対応しきれない要件では、外部サービスのフォーム埋め込みが有効な場合があります。
また、フォームの自動計算や運用要件の整理など、仕様設計段階からのご相談にも対応可能です。Studioへ技術的に実装可能かどうかの事前検証も、有償にて承っております。
