Hide element if box is checked/ Billing address same as Shipping
Last updated
Last updated
You can use the Forms checkbox element to hide other elements on the page if the box is checked. This is very useful if you want a checkbox for Billing and Shipping is the same, or if you want to hide a payment option if a different one is chosen
Checkout pages require billing fields to successfully transact. If your page only contains one set of address fields, they must be the billing fields. However, you may label them as “shipping”. The field names are the portion that must use the billing field names.
If you are using both shipping and billing address fields, shipping fields would use the shipping filed names. For example: The shipping input would use “shipState”. The billing input would use “state”.
Using the billShipSame checkbox, you can display the shipping fields and hide the billing fileds unless unchecked.
The billShipSame checkbox must be preselected to function properly. When selected, the alternate address inputs will be hidden. When deselected, the alternate address fields will be displayed and ready to accept a different address. If re-selected, the section will close and the original billing inputs will be used as the selected checkbox denotes the addresses are once again the same.
The label containing the text next to the checkbox can be written as needed. However, considering the checkbox must be checked as default, the content should inform the customer the two addresses are currently the same. For example, “Billing and Shipping addresses are the same”. If the checkbox is then deselected, that would indicate the addresses are no longer the same and the customer should enter an alternate shipping address.
Either the billing address or the shipping address fields can be hidden. However, the CRM defaults to billing address when an alternate shipping address is not specified.
To get started, place a Form-checkbox onto the page. Normally this is placed between the Shipping and Billing Info.
Select the checkbox and open the element’s Settings. Set “Name” to billShipSame
Next, locate the form that you want to be hidden if the form-checkbox is selected. This form will have a random ID assigned, but changing to something more familiar is helpful. In the example below, the Id of the Billing Address form was adjusted to be billingAddress
Now that you have identified the form to be hidden, select the form-checkbox once more, open the settings, and set the Open Id value to be the Id of your to-be-hidden form.
If the designated form-checkbox is selected it will hide the Credit Card payment fields.
Follow same steps as above but locate form containing the payment information and use this as the Open Id value.
