Pardot のフォーム機能は、簡単にWebフォームを作成できる便利な機能です。しかし、テンプレートがベースとなっているために、自社にあったデザインに変更できない、他社と差別化が図れないとお悩みの方もいらっしゃるでしょう。

本記事では、Pardot のフォームをCSSでカスタマイズする方法を解説します。フォームのデザインを変更したいという方は、本記事をぜひ参考にしてください。

Pardot（現Account Engagement）のフォームをCSSでカスタマイズする方法

Pardot のフォームはCSSを利用してカスタマイズできます。HTMLはHyper Text Markup Languageの略でWebページを作成する際に利用される言語、CSSはCascading Style Sheetsの略でHTMLを組み合わせてコンテンツのレイアウトやデザインを定義する言語です。

Pardot では、レイアウトテンプレートというテンプレート内に任意のCSSコードを記述しておけば、Webページ上の表示を変更できます。ただし、CSSでのカスタマイズは万能ではなく、一定の制限があることも認識しておきましょう。ここからは、CSSによるフォームカスタマイズの事例を3つ紹介します。

フォームの送信ボタンに表示する画像を変更する方法

Pardot のフォームの送信ボタンとして表示する画像を変更するには、以下の手順で行います。

1. カスタマイズしたいフォームを開き、[デザイン]の[送信ボタン]項目のテキストを削除し保存します。
2. フォームで使用しているレイアウトテンプレートを編集で開き、[レイアウト]でheadタブ内に以下のコードを貼り付けます。

<style type="text/css">
  form.form p.submit input {
  margin: 0;
  padding: 0;
  text-align: right;
  border: none;
  background: url(https://www.example.com/example.gif) no-repeat left top;
  width:100px;
  height:100px;
  cursor: pointer; }
</style>

3.url内のURLを表示したい画像のURLに変更し、width（横幅）やheight（高さ）などを任意に設定して保存します。

フォームのフォントスタイルを変更する方法

フォームの文字色や書式、サイズなどをフォントスタイルを調整する際には、以下の手順で行います。

1. フォームで使用しているレイアウトテンプレートを編集で開き、[レイアウト]でheadタブ内に以下のコードを貼り付けます。
   <style type="text/css">
     #pardot-form {
     color:#EXAMPLE !important;
     font-family:EXAMPLE !important;
     font-size:EXAMPLE !important;
     }
     </style> 
2. 「EXAMPLE」と記載した部分をフォントスタイルの情報に置き換えて保存します。
   colorが文字色、font-familyが書式、font-sizeがサイズです。変更したいもの以外の行は削除しても問題ありません。

必須項目の表示を変更する方法

Pardot のフォームでは、必須項目としてデフォルトで表示できる画像は星マークもしくは黒色のアスタリスクのみです。表示する画像を別の文字に変更したい、画像の色を変えたいといった場合にはカスタマイズが必要です。必須項目として表示する画像を変更するには、以下の手順で行います。

1. フォームで使用しているレイアウトテンプレートを編集で開き、[レイアウト]でheadタブ内に以下のコードを貼り付けます。
   <style>
     form.form p.required label.field-label{
       background: url(https://www.example.com/example.gif) no-repeat top right;
       background-size: 10%;
     }
     form.form p label {
       padding-right: 10px!important;
     }
   </style>
2. url内のURLを表示したい画像のURLに変更して保存します。background-sizeやpadding-rightなどは任意に設定可能です。

Account Engagementの
お役立ち資料はこちら

運用が滞っている方へお勧めの
お役立ち資料

・運用を成功に導く4つのポイント
・メール以外の運用を加速させる4つの活用ヒント
・テクバンの支援実績から学ぶ活用事例

1分でダウンロード

CSSで Pardot（現Account Engagement）のフォームをカスタマイズしてみよう

今回、CSSを使ってPardotで作成したフォームのデザインを変更する方法を紹介しましたが、紹介したカスタマイズ以外にも、CSSを活用すれば様々なカスタマイズを行えます。文字の行間隔や余白、表示位置の指定などカスタマイズは多岐に渡りますし、高度なものになればスマートフォンでの表示に最適化したレスポンシブデザインに変更することも可能です。

現在では Pardot のフォームをカスタマイズする方法としていくつかのナレッジが公開されていますが、高度なものになればなるほどHTMLやCSSの専門的な知識が求められます。デザインのカスタマイズがうまくいかない場合には、CSSでのカスタマイズで想定しているデザインを実現できるかもふまえ、Pardot の認定資格を取得している企業に相談してみることをおすすめします。