How To Make Infusionsoft Web Forms Look Great

Let’s face it, Infusionsoft web forms are pretty ugly out of the box.

And, in order to avoid the ugly, many people turn to other tools such as LeadPages, Gravity Forms, ClickFunnels and others.

But there are four major reasons you should avoid using these additional tools:

  • The first, and least important, is the cost.  These tools aren’t expensive, but I hate paying for stuff that isn’t necessary.  And these tools are NOT necessary if you’re using Infusionsoft
  • Second, and most important, is you lose Lead Source tracking.  This is one of the most powerful features of Infusionsoft.  And it breaks in most cases when you’re using 3rd party web form tools.
  • Third, you can also lose affiliate tracking.  If you’re tracking affiliate activity with cookies and referral partner history, then you’ll lose some of that tracking if leads are captured through a 3rd party tool.
  • Fourth, you can lose some native web form functionality like checkboxes, radio buttons, and custom fields.  Most 3rd party form tools don’t effectively map all of those options and allow you to trigger tags and segmentation from them.

Now, that we’ve gotten that out of the way, let me show you how easy it is to make Infusionsoft forms look great.

WARNING! This gets a little techie!

DON’T RUN! It’ll only cost you like $50 to get someone to do this for you if you can’t figure it out yourself.

So, let’s get to it.  Here’s how you make Infusionsoft web forms look great!

The first thing to know is that you shouldn’t use the Javascript or the Styled versions of the web form code that Infusionsoft spits out.  Lead source tracking can break when you use the Javascript version because the Javascript version is hosted in an iframe on your page.  And plus, the design capabilities in Infusionsoft aren’t all that great anyways.  And the Styled version comes with a bloat of code that makes the penal code look mild.

The Unstyled code is your key to success.  Once you publish your web form (and make SURE you publish first), then go and copy the Unstyled form code.

You see, unlike the Styled code, the Unstyled code is clean and simple. And VERY easy to work with.

Since it’s unstyled, it’s really plain looking.  When you paste that code onto your website, it’s going to look plain, and possibly ugly.

So, your site needs a little CSS code to make the forms look good.

This is where you hire someone on Fiverr or Upwork to do $50 worth of work.  Show them an example of what you want your web forms to look like, then pay them a few bucks to write the CSS code necessary to make your Infusionsoft forms to look the way you want.  Be sure to give them a sample of an Infusionsoft form code and ask them to style it using the classes.

They should give you some code that looks like this:

.infusion-field {
position:relative;
margin-bottom: 8px;
padding: 8px 12px;
border-radius: 5px;
box-shadow: 0 0 0 2px transparent, 0 1px 0 rgba(0,0,0,0.08) inset;
line-height: 1.5em;
width: 100%;
}

I’d recommend giving the contracted developer a web form sample with a checkbox, a radio button, a textbox, and a dropdown field in it.  That way they can style those as well.

And make sure they apply those styles to your website theme.

That way, any time you make a new Infusionsoft web form, you just copy the unstyled code and paste it into your website and Voila!  It’ll look great!

Here are a couple more tips:

  1. You may want to strip the labels from the code and put the field labels into the form fields as placeholders.  Like this: placeholder=”First Name*”
  2. You may consider using Font Awesome to add icons to your forms (again, have your $50 coder do it)

Here’s what it looks like when you do it right:

So, save yourself the monthly fee from 3rd party form tools.  And keep the great functionality built into Infusionsoft forms.  And have your forms look great!

About Tyler Garns

Tyler Garns is best known for his work as the Director and VP of Marketing at Infusionsoft, where he led the marketing efforts that produced massive results between 2007 and 2012. But he’s also been the “go-to” Infusionsoft guy for many of the top marketers and Infusionsoft users out there. His combination of technical skill, Infusionsoft expertise, and marketing experience make him one of the most reliable sources of business breakthroughs for Infusionsoft customers.

1 thought on “How To Make Infusionsoft Web Forms Look Great”

  1. Pingback: How to Make Web Forms Look Great in Infusionsoft - Box Out Marketing

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top