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.

two-column-pardot-form-layout-template

Edit the layout template and navigate to the form tab.

two-column-pardot-form-layout-template-form

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.


Author

I'm a Freelance Marketing Operations Consultant With 15 years of experience in Marketing Operations, I’ve worked with a wide range of tools including Salesforce, Marketing Cloud Account Engagement (Pardot), Marketo, and many other sales and marketing platforms. I help teams optimize their tech stacks, improve processes, and get accurate, actionable reporting. Whether it’s setting up your Marketing Automation Platform, building Salesforce reports, managing lead lifecycles, tracking attribution, or integrating your tech stack, I ensure everything is aligned to drive real results.

27 Comments

  1. Gary Galvin Reply

    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%;
    }

  2. 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.

    • Jenna Molby

      Hi Richard, send me a link to your Pardot form and let me know what fields should be full width.

  3. 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!

  4. Mark Howard Reply

    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!

Write A Comment