Update 7/22/14: Turns out Infusionsoft DOES provide a way of making single column web forms, and I just completely missed it when I originally put this article together. I’ve updated this tip to work without requiring JavaScript or HTML changes.
Want to give your users a better form filling experience? According to the User Experience Research team at Google, simply switching from a two column form layout to a single column layout will make a dramatic difference. Fortunately, Infusionsoft gives you the option of using a single column or two columns.
To do this, edit your web form and go to the Layout section. Change the Label Position to be Above.
That’s it! I originally posted some fancy JavaScript to do this, but turns out it isn’t necessary, which is great!
In case you are interested in the JavaScript that was originally posted, here it is:
<script>
jQuery(document).ready(function () {
jQuery('.infusion-field-container').find('td').unwrap().wrap(jQuery(decodeURI('%3Ctr/%3E')));
jQuery('.infusion-field-label-container').css('padding-top', '10px');
});
</script>
You probably don’t need to use this code. For most people, changing Label Position to Above will give you a nice looking, single column form. If you want to use this JavaScript instead, add an HTML snippet to your web form with the above code. The JavaScript will convert the two column layout to a single column layout.
Thanks Jacob – great tip.
Can you give a screenshot of what you are talking about? Or explain a little more? It seems to me that you can make an Infusionsoft web form a single column, but maybe I just am not understanding what you mean.
Well I’m embarrassed. You are correct. There is an option to move the label position above the form field. Somehow I completely missed that when putting this tip together. I’ll update the article to reflect this. Thanks for letting me know!
Thanks Jacob! Keep the tips coming!!
A quick note about the code you had posted (luckily, I sniped it before you took it down!): Setting the label position to ‘Above’ only works for text fields, date fields, etc. Using the code you posted, checkboxes and radio buttons will also use the one-column style like the fields do. I think it would be worth putting the code back up, and explaining the difference!
Josh, thanks for the feedback. I’ve put the JavaScript back up in case anyone wants it.