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

By September 14, 2015Infusionsoft

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.

 

 

Downloads:

 

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

About Brett Farr

Brett is the founder of Blick Digital, a marketing automation agency. He’s an automation nerd, a top ASU Marketing graduate, and was honored to be the TIME Person of the Year in 2006. He's one-half Australian (g’day mate), grew up on an island and now calls the Arizona desert his home with his wife and two kids.

8 Comments

  • 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 says:

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

    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
    Carl

    • Farr Brett says:

      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 https://gospiffy.com/, which makes really nice-looking order form themes.

  • Debbie says:

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

    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? https://www.screencast.com/t/4zZoYvA8x

Leave a Reply

Tweet
Share
Share