There’s a newer, easier way to create 2 column forms in Pardot. Click here to learn the best way to create a 2 column Pardot form.
After launching my Form Style Generator for Pardot Forms, the number one question I receive is ‘how do I create a 2 column form in Pardot?’ I might update the style generator to include this in the future, but in the meantime, here’s how to create a 2 column Pardot form with minimal coding.
The basics
When you create a new form in Pardot, there is always a layout template attached to it which determines the styling and the HTML structure of the Pardot form. The out-of-the-box structure for a single form field within Pardot looks like this:
As you can see the field is wrapped within a paragraph tag and there’s a DIV below that to display any error messages.
Step 1: Add a DIV
The first step to creating a 2 column pardot form is to add a DIV to your layout template. Navigate to your form by going to Marketing > Forms and click on the layout template link to take you to the template assosicated with the form.
Edit the layout template and navigate to the form tab.
Scroll down in the code until you see %%form-start-loop-fields%% (around line 17) and paste this code directly after %%form-start-loop-fields%%.
Scroll down into the code until you see %%form-end-loop-fields%% (around line 32) and close the DIV on the line before %%form-end-loop-fields%%.
Here’s what my complete code looks like starting at %%form-start-loop-fields%%
%%form-start-loop-fields%%
%%form-if-field-label%%
%%form-end-if-field-label%%
%%form-field-input%%
%%form-if-field-description%%
%%form-field-description%%
%%form-end-if-field-description%%
%%form-field-if-error%%
%%form-field-error-message%%
%%form-field-end-if-error%%
%%form-end-loop-fields%%
The structure for the form HTML now looks like this:
Step 2: Add the CSS
Now, there’s a DIV that hold the form field as well as the error messages for the field, we can add some CSS to create the two columns. The basic CSS looks like this:
Add this to your the bottom layout template to create a two column form. Depending on what your landing page looks like, you might want to add in a width to the columns.
.col {
float:left;
width:50%;
}
Questions?
Send them to me via email, send me a tweet @jennamolby, or leave a comment
There’s a newer, easier way to create 2 column forms in Pardot. Click here to learn the best way to create a 2 column Pardot form.
27 Comments
Jenna,
This is awesome. Could you provide some guidance on where I would add
and then where would I add
2
3
4
.col {
float:left;
width:50%;
}
Hi Gary, Navigate to Marketing > Forms > Layout Templates and select your landing page template. Paste the CSS at the top of the Form tab and save. Screenshot: https://jennamolby.com/wp-content/uploads/2016/04/pardot-style-generator-edit-css.png
Hi Jenna! This article was very helpful for me. I was wondering if it would be possible to have most of the form within 2 columns but have my message box below in a full width row.
Hi Richard, send me a link to your Pardot form and let me know what fields should be full width.
Hi Jenna,
I’m confused on step two… where am I supposed to add the css?
Hi Sara, To add the CSS, navigate to Marketing > Forms > Layout Templates and select the layout to add the form styles to. Paste the CSS at the top of the Form tab and save [View screenshot: https://jennamolby.com/wp-content/uploads/2016/04/pardot-style-generator-edit-css.png%5D
Jenna, thanks so much for all your helpful resources in regards to Pardot forms! I’m trying to do a 5-column form but the labels don’t show up inside the form fields and there’s no spacing between the fields. Any idea how to fix it?
Thanks!
Hi Jenna, great article, thank you! One thing I spotted when implementing this recently was that the Pardot form validation would cause column layouts using nth-child selectors to break because validation injects an an additional paragraph element before the .col elements. A workaround for this is to use nth-type-of instead of nth-child to be more specific in targeting the .col elements. Hope this helps!