How to Make A Responsive (Mobile-Friendly) Infusionsoft Order Form

UPDATE [February 2016]: All NEW Infusionsoft order form themes are now responsive in Infusionsoft, making this process obsolete.

Infusionsoft order forms combined with Infusionsoft’s campaign builder provide an amazing ability for any business to automate some really cool stuff. Unfortunately, the Infusionsoft order forms aren’t natively responsive (mobile-friendly).

If a large portion of your prospects and customers shop from their mobile device, you’ll want to make sure that your order forms are responsive so your customers have great experience purchasing from you.

The following code will allow you to create a mobile responsive order form theme in Infusionsoft. Please note that right now, this only works for digital products, meaning products you don’t ship. The shipping address hasn’t been made responsive yet.

With some basic CSS knowhow (or Google searches), you should be able to additional elements to your theme like fonts and background color to better match your website and brand. Check out this site for some basic tutorials for the do-it-yourselfers.

Go ahead and swipe & implement this and let me know if you have any questions along the way. Would love any feedback you have.

Heads up: As with any custom coding within Infusionsoft, this can break at anytime due to an Infusionsoft update and Infusionsoft support will not be able to support you on it.





photo credit: ♡ Love you to ♡ via photopin (license)

Leave a Reply 9 comments

Lyndi MacRae - September 21, 2015 Reply

Totally Awesome Brett, perfect timing for me as I am setting up 2 order forms and wanted it to be mobile responsive. Yay, you are my super hero of the day. – hope it doesn’t break too soon.

Sterling - February 18, 2016 Reply

Great video Brett! I have had many people ask how this can be done and without using a legacy form and bootstrap, it was almost impossible. Thanks for sharing!

Carl - December 7, 2016 Reply

Hey Brett,
Thank you. And, 1 question: How would one move the payment info into the blank area on the right (where shipping info usually is)?
Do you have any quick tips for that?
Thank you again

    Farr Brett - December 7, 2016 Reply

    Hi Carl, sorry – I don’t have any quick tips for that. Did you see that all order forms are now mobile responsive? If you create a new one, you should have any mobile responsive issues anymore (out of the box with Infusionsoft), which is awesome!

    Another option would be to check out, which makes really nice-looking order form themes.

Debbie - February 2, 2018 Reply

Thanks so much for the code! It’s working great for the most part, but I am having a problem with the font. It’s a sans serif font in my previews, but reverts to a serif font on the live forms. I found your notes about moving the googleapis link to Appearance from the Layout, but I must be doing something wrong. I was hoping your video would show that part, but you didn’t mention it. Is there something else I need to do?

    Debbie - February 2, 2018 Reply

    Never mind. I figured it out. Thanks again!!

      Brett Farr - February 7, 2018 Reply

      Great, glad to hear you got it!

Debbie - February 8, 2018 Reply

I’m back. I noticed that when a product requires a shipping address, the Shipping table does not render as nicely as the Billing table. The form fields collapse into only a few pixels wide. I’ve played around with the code, but haven’t hit on anything that will fix it. Do you have any suggestions?

Your Step-by-Step Guide to On-Page SEO | Blick Digital - January 9, 2019 Reply

[…] Website is mobile-responsive […]

Leave a Reply: