Check Box For Click Funnels 2 Step Order Form

MarinaAnnSimone · March 2, 2021, 4:56pm

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

Thanks!
Marina

samlee · March 2, 2021, 6:40pm

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

MarinaAnnSimone · March 2, 2021, 6:43pm

Try now! sorry about that

MarinaAnnSimone · March 2, 2021, 7:31pm

@samlee Try now sorry!

yassine · March 3, 2021, 6:58am

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?

Copy the code above as is, into your funnel step, Footer Tracking Code box (inside Clickfunnels page editor).
Change the first line TermsText into the checkbox’s label text.

  let TermsText = "I accept ";

Change the second line TermsUrl to your Terms & Conditions URL.

  let TermsUrl = "https://google.com";

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.

MarinaAnnSimone · March 9, 2021, 4:41pm

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

MarinaAnnSimone · April 15, 2021, 5:57pm

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

MarinaAnnSimone · April 15, 2021, 6:02pm

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

yassine · April 16, 2021, 11:05pm

Thanks for the tag @MarinaAnnSimone ,

Ok here is how to fix that:

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!
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 do let me know if need further help or the above suggestions didn’t fix the mobile friendliness issue!

MarinaAnnSimone · April 20, 2021, 7:40pm

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

MarinaAnnSimone · April 20, 2021, 8:01pm

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

yassine · April 20, 2021, 8:14pm

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)?

FraserSutton · July 23, 2021, 12:58pm

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 : )

ksoph · September 29, 2021, 6:14pm

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?

Humble · November 13, 2021, 7:45pm

Same. Have you found a fix to this?

Humble · November 13, 2021, 7:46pm

I’ve tried this code, but the order form won’t submit now. Is there a fix to it?

Kim_Celestial · June 6, 2023, 2:45pm

hey! I hope someone will help me to fix the code. I tried this code but submit button isn’t working.

Daisy_Dang · October 27, 2023, 8:53am

Same. Have you found a fix to this?