Account Engagement（旧 Pardotフォーム）レイアウトテンプレート（無料公開）

当テンプレートについて

当テンプレートは、弊社のお客さまはもちろん、全てのPardotユーザが無料でご利用いただけます。既存のWebページにiframeで埋め込むことを前提とし、拡張性を考慮して装飾等は最低限のものとなります。

サンプルおよびダウンロード

下記より、ご希望レイアウトのサンプルフォームを開きます。
サンプルフォーム自体が、ダウンロード申込みフォームとなっています。

垂直レイアウト（Vertical Form）

Bootstrapフォームの基本となる、垂直（Vertical）レイアウトです。項目ラベルの下に入力エリア等が、縦積みで表示されます。どのデバイスでも同じような動作になるため、比較的扱い易いレイアウトです。

サンプル／ダウンロード

水平レイアウト（Holizontal Form）

Bootstrapのカラムレイアウトを適用した、水平（Holizontal）レイアウトです。項目ラベルの右に入力エリア等が表示されるため、表示するページの幅が広い場合、面積を有効に活用できます。特定幅以下のデバイスでは、垂直レイアウト同様の縦積みレイアウトとなります。

サンプル／ダウンロード

テーブルレイアウト（Table Form）

テーブルに組み込んだフォームレイアウトです。項目の背景に色を付けたい、枠線でエリアを明確にしたい、といった場合に好まれるレイアウトです。スマートフォンで縦積みに表示したい場合等は、少々カスタマイズが必要になります。

サンプル／ダウンロード

使い方

基本的には「コピペだけですぐに使える」ことを目的としていますが、ボタンやリンクの色、フォント設定等は、貴社サイトに合わせるのが良いかと思います。下記、「カスタマイズ方法」を参考に設定してみてください。

カスタマイズ方法

Bootsrapの仕様にできるだけ準じて構築していますので、公式のドキュメントを参照してください。
https://getbootstrap.jp/docs/4.5/getting-started/introduction/
ただし、以下の点に関して、日本のマーケティング目的のWebサイト・ランディングページに多く寄せられる要望に準じて、独自のスタイルを適用しています。テンプレートソースの「<style>」部分の記述が該当します。

また、サンプルとして、リンク色・ボタン色・チェックボックス／ラジオボタンの色を定義しています。
※もちろんこれら全ては、CSSのカスタマイズで自由に変更可能です。

その他、Input要素の表出など、どうしてもBootstrap同様の構造にならない箇所（例えばチェックボックス／ラジオボタン等）は、JavaScriptにて対処してあります。

※プレースホルダの実装方法は、テンプレートソース末尾の「Script」部分にコメントとして記述してあります。
※このテンプレートは「コピペだけで実装できること」を優先し、BootstrapのCDNにあるスタイルを参照しています。ソースをBootstrapのサイトから取得しSass等を利用すれば、カスタマイズの幅が拡がります。
※姓／名の横並び、プレースホルダの表示、iframeの自動高さ調整、送信ボタンの上にプライバシーポリシーを表示する等、フォームに対する要求は多く存在します。JavaScriptを利用すると解決するかもしれません。

ご注意・免責事項

• 本テンプレート使用の際は、ご利用者の責任の下使用するものとし、本テンプレートを使用した結果いかなる損害を負っても当社では責任を負わないものとします。予めご了承ください。
• 本テンプレートの転売・第三者への提供、商業利用などは固くお断りいたします。
• 本テンプレートに関する質問受付やサポートは、一切お受けできません。
• 本テンプレートに関連して当社に対するブランディング・SNSでの誹謗中傷その他、当社が損害を被る事象・事変などを発生させた場合、損害賠償を請求する場合がございます。