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 or radio button, you can display the shipping fields and hide the billing fileds unless unchecked.
The billShipSame checkbox/radio button 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/radio button 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/radio button 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. Using the instructions below, add either a billShipSame checkbox or billShipSame radio button to your checkout pages.
billShipSame Radio Button
Using the radio button method requires th euse of two radio buttons, both named "billShipSame".
Drag the radio button element from the Forms section.
Select the radio element and add the "cc-same-as-shipping" class to identify the element as bill-ship-same.
Select the radio element and mark the checked option from the settings panel.
Select the radio element and update the name as "billShipSame" and select the Open ID of the billing input's parent element. In the example, the box surrounding the billing fields has the "billing-info" ID.
Update radio text to alert the user the billing and shipping fields are the same when checked, like "Billing and shipping are the same".
You will need to add a second radio button to allow the user to use a different shipping address.
Drag a second radio button element below the bill-ship-same radio from the Forms section.
Select the radio element and update the name to "billShipSame" and select the Open ID of the billing input's parent element. In the example, the box surrounding the billing fields has the "billing-info" ID.
Please note: This radio will NOT have the "cc-same-as-shipping" class.
Update radio text to alert the user the billing and shipping fields are NOT the same when checked, like "Use a different shipping address".
Style the radio elements as needed and save the page.
Note:
If the page is scraped or imported, ensure the radio button's onclick attribute is set to "checkBoxChange(attributes)".
The billing section will auto-hide on the live page. Do not manually hide the billing fields section.
Wrap shipping inputs within a form element and place billshipSame element along with shipping inputs inside the form. The billing inputs section should be outside that form in its own div.
billShipSame Checkbox
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.
