Tuesday’s Tip: Add required terms to your Infusionsoft shopping cart or order form

Many Infusionsoft customers need their customers to agree to terms and conditions before placing an order. Infusionsoft doesn’t provide a way to do this, but we’ve written a code snippet that makes it easy. This solution is free and doesn’t require any custom fields.

This code will add a checkbox to your shopping cart or order form that has to be checked before the order will submit. You can easily change the text next to the checkbox and the text that is shown in the error message if they haven’t checked the box yet.

UPDATE 5/22/2014: Some visitors were unable to get the shopping cart code to work, so we’ve rewritten it to work in a different way that should be more reliable.

UPDATE 7/1/2014: This no longer works with the latest version of Infusionsoft. We are working on updating the code to work with Infusionsoft’s latest changes.

UPDATE 7/25/2014: We’ve updated the script below to work with the latest version of Infusionsoft. Simply follow the instructions below to add required terms to your shopping cart or order form.

 

To use with a shopping cart:

To add required terms and conditions to your Infusionsoft shopping cart, go to E-Commerce → E-Commerce Setup → Shopping Cart Themes → Edit → HTML Areas. Copy and paste the below code to the Custom Header section and click Save.

<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){

    jQuery("#BILLING_ENTRY").after(
        '<div id="TERMS_AND_CONDITIONS">' +
        '<table class="paymentMethodTable" style="width:100%;margin:0 0 20px 0">' +
        '<tr>' +
        '<th class="leftAlign">Terms and Conditions</th>' +
        '</tr>' +
        '<tr class="cellLow">' +
        '<td>' +
        '<input type="checkbox" id="termsandconditions" name="termsandconditions" value="accept"> ' +
        '<label for="termsandconditions">I accept the terms and conditions for this product.</label>' +
        '</td>' +
        '</tr>' +
        '</table>' +
        '</div>'
    );
    
    (function() {
        var proxied = Infusion.ManageCart.setupCartInitialView;
        Infusion.ManageCart.setupCartInitialView = function() {
            proxied();
            jQuery('body').undelegate('#checkoutButton, #checkoutButtonDup', 'click');
            jQuery('body').delegate('#checkoutButton, #checkoutButtonDup', 'click', function() {
                if (!jQuery("#termsandconditions").is(":checked")){           
                    alert("You must agree to the terms and conditions before placing your order.");
                } else {
                    Infusion.ManageCart.validateAndSubmitForm(jQuery('#isCartEmpty').val(), jQuery('#isShippingRequired').val(), 'checkout', true, 0, 0);
                }
            });
        };
        Infusion.ManageCart.setupCartInitialView();
    })();
    
});
// ]]></script>

 

To use with an order form:

To add required terms and conditions to your Infusionsoft order form, go to E-Commerce → E-Commerce Setup → Order Form Themes → Edit → HTML Areas. Copy and paste the below code to the Custom Header section and click Save.

<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){
    
    jQuery("#PAYMENT_SELECTION").before(
        '<div id="TERMS_AND_CONDITIONS">' +
        '<table class="paymentMethodTable" style="width:100%;margin:10px 0 0 0">' +
        '<tr>' +
        '<th class="leftAlign">Terms and Conditions</th>' +
        '</tr>' +
        '<tr class="cellLow">' +
        '<td>' +
        '<input type="checkbox" id="termsandconditions" name="termsandconditions" value="accept"> ' +
        '<label for="termsandconditions">I accept the terms and conditions for this product.</label>' +
        '</td>' +
        '</tr>' +
        '</table>' +
        '</div>'
    );
    
    jQuery(".checkoutLinks > a").each(function(){
	var original = '';
	if(jQuery(this).attr('href') != undefined){		
		original = jQuery(this).attr('href').replace(/javascript:/g, '');
		jQuery(this).attr('href', '');
	} else {
		original = jQuery(this).attr('onclick');
		jQuery(this).attr('onclick', '');		
	}
	
	jQuery(this).click(function(event){				
        event.preventDefault();
        
        if (!jQuery("#termsandconditions").is(":checked")){           
            alert("You must agree to the terms and conditions before placing your order.");
            return false;
            } else {
            eval(original);
                return true;
            }
        });
    });
});
// ]]></script>

 

You’ll probably want to add a link to the full terms and conditions (possibly using a lightbox), but this should get you started. Let us know if you run into any problems with it.

19 Comments

  1. Hi,

    I just placed this in my shopping cart and it doesn’t seem to be coming up. Any chance you could help me out?

    Reply
    • The latest changes to Infusionsoft have broken this tip. We’re working on putting together new instructions that will work with the latest version of Infusionsoft.

      Reply
      • Ok, great. Should I remove it from the shopping cart in the mean time?

      • You can leave it in or take it out. The current code won’t break your shopping cart, it just won’t display or require the terms of service.

    • The script has been updated to work with the latest version of Infusionsoft.

      Reply
  2. Used your updated version in an order form as suggested. The T&C comes up, but the address panels vanish. It worked a couple of weeks ago but now with no address panels.

    Reply
    • Can you provide an example link that isn’t working? Infusionsoft uses different versions of the order forms for different Infusionsoft apps, so I’d need to see an example of it not working in order to update the code again.

      Reply
  3. Hi Jacob – this would be very helpful to me as our new merchant is mandating this stupid checkbox (as if it makes any difference), but I cannot get it to work (nothing shows on the page). We are using the legacy cart. Here is the link: (try adding any product to cart then click checkout to see the IFS cart. View source shows the code is in place).

    http://www.hotyogadoctor.com/index.php/store

    Sample cart:

    https://hotyogadoctor.infusionsoft.com/app/manageCart/showManageOrder?l=n&cart_skin=17&productId=5&clearCart=true&productQuantity=1

    Thanks!

    Robert

    Reply
    • Sorry, we don’t provide tips or code for the legacy cart in our Tuesday’s Tip posts. I’m pretty sure this is something we’d be able to do at our normal hourly rate though. If you are interested, please contact me at jacob@novaksolutions.com.

      Reply
      • Fair enough, Jacob! I wondered if it was an easy tweak 😉

        I have a programmer who works with the IFS API and knows his way around well, so I will contact you if we cannot handle it ourselves!

        Many thanks for your prompt reply.

  4. This is awesome, but is there a way to add a popup or link to the actual terms and conditions?

    Reply
    • Yup, just add an HTML link to the terms and conditions text, so they can click it to view the terms. Something like: '<label for="termsandconditions">I accept the <a href="http://yoursite.com/terms.html" target="_blank">terms and conditions</a> for this product.</label>' +

      Reply
  5. looks like infusionsoft has made some more updates to their order forms. when you choose paypal, the terms and conditions seem to get removed 🙁

    Reply
  6. Hi Jacob, I can’t seem to get it to work… I think I’ve followed all the tips here in the comments section. I’ve updated the theme. Any ideas? This is the testing order form. I was able to enrol with ticking any terms and conditions box… in fact I couldn’t see the terms and conditions box. I can only see the “enrolment conditions” tick box which we set up previously but it’s not a required field. Help?

    Here’s a link to our order form: https://lf159.infusionsoft.com/app/orderForms/NEW-AWC-order-form-layout-2015

    Thanks for your help Jacob!! 🙂

    Cheers,
    Tracy

    Reply
  7. Hi Jacob, great tip as always, thank you!! By now, over the years, I must have wasted at least 50 plus hours on multiple projects trying to get a simple terms and conditions check box to work. In my opinion it is a disgrace that Infusionsoft still doesn’t listen and still hasn’t implemented it as a standard on their order forms. Each time that I find a solution somewhere in the depth of the internet, provided by excellent minds like yourself, I get my hopes high to have it solved once and for all, but then each time some update breaks everything and I start from scratch. This issue is probably the single biggest ongoing source of frustration for me with Infusionsoft. But enough of this rant 😉 I’m very grateful that you are continuing to be so wonderfully generous with your advice. I tried your code snippet, and sadly, I must second that it stops working as soon as paypal gets involved. When I offer only credit card as an option, it works fine. When I offer Paypal as an option, and I even only go to “Pay with paypal” and then go back to “Pay with credit card” the script no longer works. It’s difficult to describe coherently, because there are so many different variations, but somehow the switching between credit card and paypal and/or back from paypal to credit card seems to be messing it up. Here are some examples (using brand new order form templates): https://et221.infusionsoft.com/app/orderForms/Sarit-Test and https://ey990.infusionsoft.com/app/orderForms/Terms-Test-2016-06-01 Maybe you can discover something 🙂 I would be so happy to have found just one code snippet that works reliably with CC and Paypal. Thank you for all your good work!

    Reply
  8. Thanks Jacob, this is brilliant and very helpful. I seem to be having a problem with it working with Paypal. It works fine with my merchant payment button, but not when I click paypal. Do you know of a way to get around this? Thanks in advance 🙂

    Reply

Leave a Reply