Pardot設定マメ知識① Pardotフォームのレスポンシブ対応

Pardot設定マメ知識シリーズでは、マーケティングオートメーション『pardot』を既に活用されている方（特に自社で設定されている方）、もしくはこれから導入をご検討されている方にとって、少しでも役立つ情報を毎回さまざまなテーマで掲載しています。

「KnowledgeBaseを見たけどよくわからなかった…」

「結構使っているけど意外と知らなかった…」、

「この機能はあるのか？」

といった疑問を解消していけたらと思います。

早速本題に入ります。今回のテーマは、「pardotフォーム」を使ってレスポンシブ対応をする方法です。PC、タブレット、スマートフォンなど使用しているデバイス、画面サイズに対して、単一ファイルで最適な状態に可変する方法です。

今回の内容は、pardotフォームを既に触ったことのある方向けの内容です。

本来であればpardotフォームの作り方から説明すべきところですが、長くなりますので今回は割愛します。これから初めてpardotフォームに触れるという方は、まずはこちらを参考にフォームを作ってみてください。

（弊社でもpardot設定基礎編を別途アップ予定です。）

http://help.pardot.com/customer/en/portal/articles/2132705-forms-overview?b_id=11139

 

Pardotフォームを作ったことのある方はご存知かと思いますが、2016年4月現在、標準的な作り方ではレスポンシブ対応になっていません。文字サイズや幅の調整等で、ある程度は見やすいフォームが作れますが、スマホ最適化されたフォームを見慣れたユーザーにとっては、少し入力しづらいですよね。

そんなPardotフォームですが、実はレスポンシブ対応ができるのです。

pardotフォームレスポンシブ対応の前提条件

・少なくともHTMLやCSSの基本的な知識を持っている。

・レスポンシブデザインの原則を理解している。

とはいえ、実際にpardotを活用しているマーケティング担当の方でWebデザインもできる！という方は少ないのではないでしょうか。（できる方にとっては簡単かもしれませんね。）

大丈夫です。サイト全体をレスポンシブ対応するとなればそれなりに勉強しないと厳しいかもしれませんが、取り急ぎpardotフォームだけでも…という方はぜひチャレンジしてみてください。

pardotフォームレスポンシブ対応のステップ

１．フォームのレイアウトテンプレートを作成

既に作成しているものをコピーしても結構ですが、今回は白紙の状態からスタートしてみます。

まずはじめに、この2つを記述しましょう。

・viewport

⇒width=device-widthを書いておくと、端末に合わせて適切に調節できます。

スマホ最適化を考えると、ピンチでの拡大縮小は抑制できた方が見やすいかと思いますので、

今回これを書いておきます。

<meta name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no”>

次に、念のためIE対応もしておきましょう。

Css3-mediaqueries.jsを読み込みます。

<!–[if lt IE 9]>

<script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>

<![endif]–>

２．CSSボックスモデルを変更する

ブラウザがどのように幅と高さを計算するかを決定します。

デフォルトでは、margins, borders, paddingを要素の幅に追加します。例えば、左paddingを100px幅の要素に追加する場合は120pxになる。通常、これは問題ではありませんが、特にフォームフィールドを持つレスポンシブデザインの要素の場合はトータルの幅が100pxになるように80pxまで縮小します。

ボックスモデルの詳細はこちらの記事で詳しく説明されていますが、ひとまず以下の記述をしておきましょう。

http://webdesign.tutsplus.com/tutorials/quick-tip-encourage-responsive-form-elements-to-play-nice–webdesign-5646

 

• {

box-sizing: border-box;

-moz-box-sizing: border-box;

}

３．デフォルトで適用されているフォームフィールドのwrapperマージンとパディングを変更

⇒テンプレート内に次の記述を追加してください。

#pardot-form .form-field {

margin: 1em 0;

padding: 0;

}

４．フォームのフィールドラベル、テキスト入力欄、テキストエリアに比例幅を適用

⇒これは任意です。あなたのサイトのレイアウトに適合するように変更してください。

私はこのように記述しています。

#pardot-form .field-label {

width: 25%;

}

#pardot-form input.text, #pardot-form textarea {

width: 75%;

}

#pardot-form .no-label,

#pardot-form .description,

#pardot-form .value,

#pardot-form .submit {

margin-left: 25%;

}

５．インデント要素のマージン変更

⇒デフォルトでは、160pxの左マージンが設定されているため、フォームフィールドのラベルの幅に合わせて適宜変更してください。

#pardot-form .no-label,

#pardot-form .description,

#pardot-form .value,

#pardot-form .submit {

margin-left: 25%;

}

６．ブレイクポイントを作成

⇒画面サイズに応じて、例えば400pxより小さい場合の表示、400pxを超える場合の表示をそれぞれ記述します。

（より細かく設定したい場合は、タブレット表示用のpx指定も加えましょう。）

今回はサンプルということで400pxで設定したいと思います。

・幅が400pxよりも小さい画面の場合（主にスマートフォン）

@media (max-width: 400px) {

#pardot-form .field-label {

display: inline-block;

width: auto;

float: none;

text-align: left;

}

#pardot-form input.text, #pardot-form textarea {

display: block;

width: 100%;

}

#pardot-form .no-label,

#pardot-form .description,

#pardot-form .value,

#pardot-form .submit {

margin-left: 0;

}

}

これに関しては、pardotでデフォルトのcssがありますので、以下を参考にしながら、

あなたのサイトに合ったサイズでwidthやmargin部分を変更して使ってください。

http://help.pardot.com/customer/en/portal/articles/2126621-default-form-style-classes-reference

ここがポイントです。通常、自身でCSSを設定しているため、変更すべき箇所もわかりやすいですが、pardotでこのようにデフォルト設定を適用している場合はこれを念頭に進めてください。

私は上記キャプチャのようにアレンジして使っています。

・幅が400pxよりも大きい画面の場合（主にPCやタブレット）

このように、pardot-form全体やtextarea、submit（フォーム送信ボタン）、ラベルなどのサイズやフォントをデフォルトcssを見ながら調整していきます。

CSSに慣れている方であれば、スムーズに調整できるかと思いますが、そうでない方は、まずは上記参考URLに記載されているデフォルトCSSを見て使用するフィールドを一旦すべてコピペして、少しずつ変更⇒プレビューで確認しながら調整してみましょう。

（ちなみに私はWEBデザイナーではありませんので、そのようにして最適化しました。）

参考までに、上記のブレイクポイント記述を、｝で閉じた後、bodはこんな感じで設定しています。

body {

text-align: left;

margin: 0px;

padding: 0px;

line-height: 170%;

background-position: center 0px;

font-family: “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif;

}

さて、ここまでCSSを書いてきましたが、全部書き終えたら次は</style>と</head>で閉じて<body>タグの記述に移ります。

・Googleのタグマネージャーを入れたい場合もここに記述してください。

・その他、フォームの上にタイトルバーやロゴ、その他画像など入れたい場合もここに記述。私はこんな感じでシンプルにロゴとパンくずリストを入れてみました。

※左がPC画面、右がスマホ画面。それぞれ違うサイズのロゴを用意し、各フィールドの幅はスマホ用にwidth:100%の設定を入れています。

 

※スマホ画面

そして、肝心の「フォーム」ですが、フォームの項目などはこちらのレイアウトテンプレートではなく、予めpardotの「フォーム」にて作成しておきます。

（※今回は、pardotフォームを作ったことのある方向けの記事になっています。）

初めての方は、こちらをご参考にしていただくか、弊社の記事アップをお待ちください。

http://help.pardot.com/customer/en/portal/articles/2132705-forms-overview?b_id=11139

フォームの「Look and Feel」のところで今回作成したレイアウトテンプレートを選択します。

以下のように、%%content%%の部分が予め作成しておいたフォーム部分になります。

※今回作成したレイアウトテンプレート

このようにして作成されたレスポンシブ対応pardotフォームの完成形はこちらです。

※PC画面

このように、とても使いやすいフォームが完成しました。

今回のように、自社でpardotの設定にチャレンジしてみても良いでしょうし、そんな手間は省きたいといった場合は弊社にて導入支援をさせていただくことも可能です。

お気軽にお問合せください。

 

---

❏pardot導入に関してZENofficeへのお問合せ

http://go.pardot.com/l/94582/2016-04-27/zmcfp

B2B MARKETING REPORT　国内 / 米国マーケティング比較　2016

－需要創出・売上拡大に最も影響を与えた施策とは－