Funnelish™ Community

Adding “same as billing” CheckBox to your Funnelish page

In this brief tutorial I will be going through how to add a “same as billing” CheckBox to your page in Funnelish Just like this:

This is useful because it will save more time for the customer whose billing address is the same as their shipping address, so they won’t have to retype the same address.

As of now, Funnelish does not have a native feature to allow such functionality thus we will need to use a custom script to get the job done.

Step 1: Add 2 Containers one is static and always shown and one for billing fields (hidden if checkbox checked).

At first, we added a Two Column Row then at the left column we added two Containers, you can do so either by dragging elements from the left menu to your page or by clicking the Plus icon then selecting the element.
now that we have the two Containers we need to give the second one a unique ID, you can do it like this:

  1. select the 2nd container.
  2. head to the left menu then click on Advanced.
  3. put this id in the field named id: shipping_container

Step 2: Filling the First Container:

this container has to look something like this at the end.


=> Now you need to add these elements to the container by dragging them or by hitting the plus icon.

  1. Shipping Address title.

  2. Shipping address information fields.

  3. Billing Address title

  4. An Input Form of Type CheckBox (used to hide the billing address fields).


    => Ps: Now that you added the CheckBox form element make sure to name in the left menu like so:
    image

Step 3: Filling the Second Container (will have to be hidden if the checkbox is checked)

This container contains only the billing Fields, not the title nor the checkbox, and it is going to be hidden if a customer checks the ‘Same Shipping Address’ CheckBox.
Here is how we need it to be.

This container needs to be given a unique id so that we hide it using our script, you can do so by selecting the Container then heading to the left menu and clicking on Advanced, then giving it this id “billing_container”, we have also added few styling for this container.**

=> Make sure you add these fields to the second container:

  1. Billing Address information fields.

Step 2: Adding The Custom Code to Custom JS (body).

Again on the left menu head to custom JS and paste this code into the box:


<script>
    document.querySelector('input[data-name="same_billing"]').addEventListener('change', function (){
        let elements = ['country', 'city', 'address', 'state', 'zip'];
    
        if (this.checked) {
            elements.forEach(x=>{
               document.querySelector("[data-type='"+x+"']").value = document.querySelector("[data-type='shipping_"+x+"']").value;
            })
      document.getElementById("billing_container").style.display = 'none';
         }
        else{
          elements.forEach(x=>{
          document.querySelector("[data-type='"+x+"']").value = '';
          });
          document.getElementById("billing_container").style.display = 'flex';
        }
    })
 </script>

Step 3: Styling.

Container 1:

  • Select the container then at the left menu click background color:
    and past this color: #FAFAFA
  • Scroll down then add a Border to the container: border width: 1px; and border Color: #D9D9D9; style: solid;
    You can also add some padding to the container (head to Advanced tab in container options).

Shipping Input Fields:

All input fields in the shipping container need to have properties look something like this:
PS: Data type needs to be changed for each element to the data the element is supposed to get.

Example (for the Address field)

>Shipping address field needs to have these options:

image

>Billing address field needs to have these options:

image

How about if it’s the other way around? the Billing address section is not yet shown in Checkout page, and it will only show when people select “Use a different billing address”

image

1 Like

The code above does exactly that! It’s just worded differently:)