
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

27 Comments
Thank you very much for all of these articles you’ve written- they’ve helped a lot!
However, I’m having problems with error messages messing up the form, and was wondering if you had any suggestions?
Thanks,
Jeff
Hi Jeffrey, I DM’d you some solutions. Cheers, Jenna
Where do i find this part “The structure for the form HTML now looks like this”?
Hi Crystal, That’s what you will see when you view the source of the form. No action is needed for that part, it’s just an FYI. Cheers, Jenna
thank you jenna . I am newbie for pardot and also for salesforce .I was looking solution for this problem from last 1 month.
Hi, I want to align the CTA(submit) button along side. How can we do it?
Hello Jenna,
Thank you!This article helped so much.
Question, how would I create a 2 Column and then 1 column long underneath?
The form I am trying to create is only three fields, First Name, Last Name, and Email.
First Name and Last Name side by side in 2 Column and Email below.
Thanks!
Hi Shelby, It’s definitely possible to do that, but it requires a bit more code. Please send a link to your landing page containing the form to [email protected]. Cheers, Jenna