（2023/6/20 追記）
住所検索機能を追加した最新版を公開しています。
設定方法などはほぼ同じですが、scriptファイルなどは最新版をアップしていただく必要がありますので、最新版の導入方法のページをご確認ください。
【無料公開】Account Engagementのフォームレイアウトテンプレートに住所検索機能を追加しました。
（以下は2020/8/26公開の元記事です）
本業が忙しくなってしばらく記事更新をお休みしておりました・・・・
今回はPardotで利用いただけるフォームテンプレートについてご案内いたします。
Pardotユーザの皆様はWeb公開用のフォームっておそらく以下の3パターンで利用しているのではないかと思います。
①フォームテンプレートをカスタマイズして自社のフォームに合うように修正、またはパートナー企業から
汎用的なフォームテンプレートを融通していただきそちらをiframe等でページに埋め込んで公開
②Formhandlerを使って従来から公開しているWebフォームにインテグレーションをした（自社orパートナー企業）
③Pardotにあらかじめ用意されているフォームテンプレートを加工して使っている
のいずれかになると思います。
このうち、③はレイアウトのテイストなどが海外ツールのためか独特なレイアウトになっているので、国内でご利用されているユーザは少ないのではないかと思います。
②をご利用の企業様でたまにちょっとしたセミナーを行いたい時などにフォームを公開するのにいちいちFormhandlerの連携を・・・と考えるとちょっと面倒と感じませんか？
新規で自社のフォームにあったレイアウトテンプレートを作りたい、というケースも多いと思いますが（日本のWebで標準とされているスタイルにあった）気軽に公開可能なフォームのテンプレートが無いため、思いのほか施策を行うための時間的、コスト的なハードルが上がってしまう、というケースをよく聞きます。
今回は、そのような企業様向けにどなたでもご利用頂けるPardotのフォームテンプレートを用意いたしました。
ソースコードについてはGithub上で公開しており、どなたでもご利用頂けますが、導入にあたっての無償サポートは対応しておりません。必要に応じて導入サポートをご提案させていただきます。また、自社のWebサイトに合わせた追加カスタマイズ等については弊社でも対応しておりますのでお気軽にご相談ください。
現在このフォームテンプレートはversion1となり、追加改修のご要望（例えば住所の自動検索など）やその他のご要望についても順次対応していきますので
リクエストがある場合はハレフル社の永井のTwitterまでリクエストをお寄せください。
現在version1では以下の機能が搭載されています。
・レスポンシブ対応
・姓名など項目2個の横並び
・項目3個の横並び
・項目間の区切りライン
・項目の前または後ろにテキスト挿入
・プレイスホルダー（入力見本）
・規約の同意のための専用フィールド
・iframeでの既存ページ内公開/そのまま公開
・必須項目の未入力チェックNew!（2020/8/28更新）
■横幅が固定のフォームを作成する場合
（１）Githubから素材ファイルのダウンロード
まず以下のGithubにアクセスしてください。
https://github.com/harefull-inc/pardot_form
「Download Zip」からファイルをダウンロードしてください。
必要となるファイルは「style.css」と「script.js」の2つのファイルです。
（２）2つのファイルをサーバにアップします。
どこか適当な場所に2ファイルをアップします。適当な場所が無い場合はPardotのコンテンツ領域でも問題ありません。
アップロードが完了したら「場所」と記載されているURLをメモしておきます。
（３）レイアウトテンプレートの新規作成①
次にレイアウトテンプレートの新規作成を行います。
まず、「レイアウト」のタブを次のように変更します。
<!DOCTYPE html>
<html>
<head>
<base href=”” >
<meta charset=”utf-8″/>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>
<meta name=”description” content=”%%description%%”/>
<title>%%title%%</title>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanjp.min.css”>
<link rel=”stylesheet” type=”text/css” href=”https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css”>
<link rel=”stylesheet” type=”text/css” href=”https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<link rel=”stylesheet” type=”text/css” href=”{生成されるCSSのURL}”>
<script src=”https://code.jquery.com/jquery-3.5.1.min.js” crossorigin=”anonymous”></script>
<script src=”{生成されるjsファイルのURL}”></script>
</head>
<body class=”form-width-fix”>
%%content%%
</body>
</html>
{生成されるCSSのURL}と{生成されるjsファイルのURL}の欄にはそれぞれ（２）の手順でアップしたURLを貼り付けてください。
また、横幅を固定したフォームを生成する場合body要素にclassを追加する必要がありますのでご注意ください。
（４）レイアウトテンプレートの新規作成②
次に「フォーム」のタブに切り替えます。
コードの内容を次のように変更します。
<form accept-charset=”UTF-8″ method=”post” action=”%%form-action-url%%” class=”form” id=”pardot-form”>
<div class=”form-before-contents”> ←追加
%%form-opening-general-content%%
%%form-if-thank-you%%
%%form-javascript-focus%%
%%form-thank-you-content%%
%%form-thank-you-code%%
%%form-end-if-thank-you%%
%%form-if-display-form%%
%%form-before-form-content%%
%%form-if-error%%
<p class=”errors”>Please correct the errors below:</p>
%%form-end-if-error%%
</div> ←追加
%%form-start-loop-fields%%
….（省略）….
%%form-if-field-label%%
<label class=”field-label” for=”%%form-field-id%%”>%%form-field-label%%</label>
%%form-end-if-field-label%%
<span class=”input-wrapper”>%%form-field-input%%</span> ←囲むspanを追加
%%form-if-field-description%%
<span class=”description”>%%form-field-description%%</span>
%%form-end-if-field-description%%
….（省略）….
div要素を追加するのと<span>でフォームの項目要素を囲んでいただきます。
設定が完了したら保存をクリックしてください。
（５）フォーム各要素のカスタマイズ
フォームテンプレートが完成したのであとはフォームを作成してレイアウトテンプレートを適用していきます。
項目を設定して表示レイアウトを変更するには各項目ごとに詳細メニューにCSSクラスという値があるので
そちらの値に追加をしていきます。
例えば 姓名の値を上下ではなく横並びに配置したい場合は姓の項目のCSSクラスに
input-inline_2-1
と入力します。加えてplaceholder（入力の見本）を指定する場合は
input-inline_2-1 has-placeholder
とスペースで開けて複数設定することが可能です。
（６）完成見本
サンプルでアクセス可能なフォームをご用意してみました。
https://www3.harefull.co.jp/l/120203/2022-02-01/ngszc
■既存のページ内に埋め込んでフォームを作成する場合
※こちらのフォームを作成するにはある程度のHTML/CSSの知識が必要です。
既存のWebページにiframeで埋め込んで作成することも可能です。
その場合はレイアウトテンプレート作成時にbodyの要素を指定しない事で100％横幅のフォームとなります。
あとはこのフォームをiframeで埋め込んで頂きます。レスポンシブできちんと表示を切り替えるためには元ページ側に
メディアクエリ等でブレークポイントを指定する必要がありますのでご注意ください。
<!DOCTYPE html>
<html>
<head>
<base href=”” >
<meta charset=”utf-8″/>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>
<meta name=”description” content=”%%description%%”/>
<title>%%title%%</title>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanjp.min.css”>
<link rel=”stylesheet” type=”text/css” href=”https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css”>
<link rel=”stylesheet” type=”text/css” href=”https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<link rel=”stylesheet” type=”text/css” href=”{生成されるCSSのURL}”>
<script src=”https://code.jquery.com/jquery-3.5.1.min.js” crossorigin=”anonymous”></script>
<script src=”{生成されるjsファイルのURL}”></script>
</head>
<body>
%%content%%
</body>
</html>
