LPでフォームの表示項目を減らす方法
フォームの中でいらない項目を減らしたい場合の作業方法を説明いたします。
システムによるとある項目を入れなければ、フォーム上エラーが発生することがあります。
そのため、減らしたい項目をフォーム上で削除して、hidden を利用して固定の値を設定し、エラーを避けてご希望通り設定することができます。
例えば、フォームの中には名前、住所と電話番号だけを表示するフォームを用意する場合、メールアドレスなどをフォーム上から消さなければなりません。
1 |
{{ form_widget(form.email}} |
こちらはテンプレートでメールアドレスの読み込むコードです。
そのコードを設置することでブラウザー上で以下のhtmlが生成されます。
1 |
<input type="text" id="ec_client_landing_page_type_email" name="ec_client_landing_page_type[email]" maxlength="255" class="checkMail" placeholder="xxxx@xxxx" onpaste="return false;" oncopy="return false"> |
まず、
1 |
{{ form_widget(form.email}} |
このコードを削除します。
次にそのコードにより、生成されるコードの中にあるname とidを利用してhiddenの要素を設定します。
1 |
<input type="hidden" id="ec_client_landing_page_type_email" name="ec_client_landing_page_type[email]" value="仮の値を設置します。"> |
メールの場合は仮の値は一人以上のお客様に利用してはいけないため、ランダムなどを利用して、一人一人のお客様に違う値を与えることができます。
また、フォームの中身にそのように設定変更したら、バリデーションにかからないようにいらないところをコメントアウトします。
以下では例としてemailをコメントアウトしました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var validationInit = { "{{form.last_name.vars.id}}": {"required": true,}, "{{form.first_name.vars.id}}": {"required": true,}, "ec_client_landing_page_type_sex": {"required":false,}, "ec_client_landing_page_type_birthday": {"required": true}, "{{form.zipcode.vars.id}}": {"required": true,"number": true}, "city": {"required": true}, "street": {"required": true}, "{{form.street.vars.id}}": {"required": true}, "{{form.tel.vars.id}}": {"required": true,"number": true, "min": 10}, //"{{form.email.vars.id}}": {"required": true,"email": true}, "{{form.payment.vars.id}}": {"required": true}, "{{form.delivery_abroad.vars.id}}": {"required": true} } |
ここまでが必須の項目の削除方法です。
必須ではない場合はLP上で該当のタグを消すだけになります。