カスタマイズ自由度が低く使い勝手が良くないAccount Engagementフォームを最小限イケてる感じに持っていくため4つのカスタマイズを施した覚書です。
フォームの作成
レイアウトテンプレートにデフォルトでテンプレートが1つ用意されており、それを元にフォームを簡単に追加出来るようになっている。
カスタマイズ用レイアウトテンプレートを用意し、そこから1つ作成したフォームがこちら。
「素」ですね(°д°)..
足りない項目はフォーム→フォームウィザード→2.項目 で追加。
レイアウトテンプレートに戻り、
「レイアウトテンプレートを編集」ボタン押下
「レイアウト」タブを選択でエディタを開く
1.CSSを書く
レイアウトテンプレート →レイアウトタブ→/headタグ手前にstyleを書く。
important!だらけですが..
<style>
#pardot-form {
max-width: 580px !important;
margin: 0 auto !important;
font-size: 16px !important;
}
#pardot-form>p:nth-child(2) {
margin-bottom: 3em;
}
#pardot-form .form-field .field-label {
text-align: left !important;
}
/* チェックボックス選択部分の配置調整 */
#pardot-form.form span.value {
margin-left: 5% !important;
display: table-row !important;
}
/*以下略*/
以降は下記に書きます
<body>
<!--form-->
%%content%%
<!--カスタマイズ書くところ-->
</body>
2.住所自動入力
郵便番号を入れると都道府県と市区町村まで自動で入るようにします
jquery.jpostal.js
<script type="text/javascript" charset="UTF-8" src="https://jpostal-1006.appspot.com/jquery.jpostal.js"></script>
jquery本体なければそれも！
<script type="text/javascript" charset="UTF-8" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
jpostalプラグイン呼出し
※⚪︎⚪︎⚪︎はSalesForceプロスペクト項目名
$(window).ready(function () {
$('.zip > input').jpostal({
postcode: [
'.⚪︎⚪︎⚪︎ > input'//郵便番号にあたるプロスペクト項目
],
address: {
'.⚪︎⚪︎⚪︎ > input': '%3',//都道府県にあたるプロスペクト項目
'.⚪︎⚪︎⚪︎ > input': '%4%5'//市区町村にあたるプロスペクト項目
}
});
});
3.プレースホルダー
inputに予め表示させておく文字列を指定し地味に離脱対策。
※⚪︎⚪︎⚪︎はSalesForceプロスペクト項目名
$(".form-field.last_name input").attr('placeholder', '例）山田');//デフォルト項目
$(".form-field.first_name input").attr('placeholder', '例）太郎');
$(".form-field.⚪︎⚪︎⚪︎ input").attr('placeholder', '例）やまだ');//ふりがな
$(".form-field.⚪︎⚪︎⚪︎ input").attr('placeholder', '例）たろう');
$(".form-field.⚪︎⚪︎⚪︎ input").attr('placeholder', '例）1230000');//郵便番号
$(".form-field.state input").attr('placeholder', '例）東京都');//都道府県 デフォルト
$(".form-field.⚪︎⚪︎⚪︎ input").attr('placeholder', '例）新宿区');//市区町村
$(".form-field.⚪︎⚪︎⚪︎ input").attr('placeholder', '例）1-1-1');//番地・建物
$(".form-field.MobilePhone input").attr('placeholder', '例）08011110000 ※半角、ハイフンなし');// デフォルト項目
$(".form-field.email input").attr('placeholder', '例）entry@company.co.jp');// デフォルト項目
4.バリデーション
郵便番号とメールアドレスの形式が違うとエラーメッセージを表示。
エラー時表示させる文字列を指定。
※⚪︎⚪︎⚪︎はSalesForceプロスペクト項目名
$(function () {
//郵便番号入力形式チェック
$("p.⚪︎⚪︎⚪︎ input").blur(function () {
if (!$(this).val().match(/^\d{3}(\s*|-)\d{4}$/)) {
alert("正しくない形式の郵便番号です。");
}
});
//メール入力形式チェック
$("p.email input").blur(function () {
if (!$(this).val().match(/^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/)) {
alert("正しくない形式のメールです。");
}
});
});
//エラーメッセージ変換
document.getElementById("pardot-form").innerHTML = document.getElementById("pardot-form").innerHTML.replace("Please correct the errors below: ", "入力内容に誤りがあります。");
できあがり
おわりに
「フォーム」タブの中身を見ると、もっといろんなことが出来そう..
ランディングページカスタマイズもフォームと同じような方法で進められるようです。
夢が拡がりますが、なにしろ初めてなので何か罠が潜んでいないか気をつけていきたいと思います。