Check Box For Click Funnels 2 Step Order Form

Hey!

We have a 2 step checkout form and want to have the customer select a required checkbox to accept terms and conditions on their purchase. We want this as a field for someone before submitting a payment and clicking button.

We are still working on the page but we want is as a required checkbox.
I was told i can request a custom code here to get this.

https://marina.clickfunnels.com/sos-summit-vip-in-person

Hopefully that makes sense, let me know :slight_smile:

Thanks!
Marina

1 Like

Hello @MarinaAnnSimone,

Welcome onboard! However the link provided is not working! maybe you’ve changed the step URL? make sure to update it so we can help :slight_smile:

1 Like

Try now! sorry about that

@samlee Try now sorry!

1 Like

Hi @MarinaAnnSimone,

Here you go :

<script>
  // Change the line below "I accept" to the text you want to be shown on your checkbox.
  let TermsText = "I accept ";

// Change the URL below to the direct URL to your Privacy Policy.
  let TermsUrl = "https://google.com";

// Change the text below "terms and conditions" to the the Hyperlink text that will be clickable.
// This text can be empty, if you don't want to show any URL only text.
  let TermsLinkText = "terms and conditions";

$(function(){
  let code = $(`<label class="de elHeadlineWrapper de-editable " data-cb-required="yes" data-de-type="cb_headline" data-field-name data-ce="true" data-trigger="none" style="margin: 10px 0 16px;cursor: pointer;display: flex;align-items: center;">
  <input class="elInput elHeadlineCheckbox required1 garlic-auto-save" type="checkbox" name="custom_type" data-type="extra" data-custom-type="accepted_terms" value="" data-required="yes" style="appearance: auto; margin: 0px 10px 0px 0px; border-color: rgb(74, 137, 32); border-width: 3px;">
  <div style="text-align: left;font-size: 14px;">
    ${TermsText} <a href="${TermsUrl}" target="_blank">${TermsLinkText}</a>
  </div>
  </label>`);

  $('.o2step_step2 [href="#submit-form-2step-order"]').before(code);
});
</script>

How it works?

  1. Copy the code above as is, into your funnel step, Footer Tracking Code box (inside Clickfunnels page editor).

  2. Change the first line TermsText into the checkbox’s label text.

  let TermsText = "I accept ";
  1. Change the second line TermsUrl to your Terms & Conditions URL.
  let TermsUrl = "https://google.com";
  1. Change the third line TermsLinkText to the hyperlink text that you want to be shown, this can be empty (keep empty double quotes) if you don’t want your customers to click away from your order form.
  let TermsLinkText = "terms and conditions";

PS. if the TermsLinkText is given, the URL will open in a new tab to keep checkout experience disruption to minimum.

PPS. The default values should work fine for most cases, the only thing you need to change is the TermsUrl line (second line).

Hope that helps, do let us know how it goes or if you face any problems.

Thank You I am going to give this a try and let you know how it goes!!!

Hey can you have this mobile friendly? we were trying to test it and the check box is reallllllllly small and will deter people from purchasing Here is screen shot example

1 Like

@yassine see above i wasn’t sure if you get notified on this

1 Like

Thanks for the tag @MarinaAnnSimone ,

Ok here is how to fix that:

  1. Make the text shorter:
    instead of:
    “Yes, I Agree To The Terms & Conditions AS Outlined Below Click Here To Read The Terms and Conditions”.
    Do something like this:
    “Yes, I Agree to the terms and conditions”, there is no point in repeating the text!

  2. Increase your font size of the row containing the element or the element itself that will increase the font-size of the text making it more readable and clickable!

Generally if your customers click on the element itself it will be selected!

Also, the message (Please do not hit submit twice…double charged) is quite scary might turn off some of your customers! and it’s unnecessary simply reverse any charges if your customers were double charged without notifying them.

Hope that helps :slight_smile: do let me know if need further help or the above suggestions didn’t fix the mobile friendliness issue!

Thanks so much I will give it a try and thanks for the feedback

Hi i tried to change the font size to 18… here is an example i pulled from a different page on someone’s funnel to show the sizing we wanted.

am i maybe doing it incorrectly? i increased the size on the coding from above

Yes, my fault, you can change the font size on the code itself like this:

<script>
  // Change the line below "I accept" to the text you want to be shown on your checkbox.
  let TermsText = "I accept ";

// Change the URL below to the direct URL to your Privacy Policy.
  let TermsUrl = "https://google.com";

// Change the text below "terms and conditions" to the the Hyperlink text that will be clickable.
// This text can be empty, if you don't want to show any URL only text.
  let TermsLinkText = "terms and conditions";

$(function(){
  let code = $(`<label class="de elHeadlineWrapper de-editable " data-cb-required="yes" data-de-type="cb_headline" data-field-name data-ce="true" data-trigger="none" style="margin: 10px 0 16px;cursor: pointer;display: flex;align-items: center;">
  <input class="elInput elHeadlineCheckbox required1 garlic-auto-save" type="checkbox" name="custom_type" data-type="extra" data-custom-type="accepted_terms" value="" data-required="yes" style="appearance: auto; margin: 0px 10px 0px 0px; border-color: rgb(74, 137, 32); border-width: 3px;">
  <div style="text-align: left;font-size: 18px;">
    ${TermsText} <a href="${TermsUrl}" target="_blank">${TermsLinkText}</a>
  </div>
  </label>`);

  $('.o2step_step2 [href="#submit-form-2step-order"]').before(code);
});
</script>

All I did was change this line:

  <div style="text-align: left;font-size: 18px;"> 

You can increase it further if needed, or are you still facing other issues with it (if you do maybe screenshots comparing the end result and target result would help)?

1 Like

Hello, i have found this code and it looks great but for some reason it isn’t submitting the form when i add the code to the footer. Is the submit tag off? by submit tag i mean : $(’.o2step_step2 [href="#submit-form-2step-order"]’).before(code);

i tried matching it to name of the element in click funnels but it didnt show up at all then.

here is the URL im working on: https://www.easyweights.co.uk/order

Hoping you can help : )

Hello, I’ve used the code above and for some reason the information (checked box and what they agreed to) is not being saved in contact. How do I make sure the information they put is being stored?