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. Jeffrey Travers Reply

    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

    • Jenna Molby

      Hi Jeffrey, I DM’d you some solutions. Cheers, Jenna

  2. Where do i find this part “The structure for the form HTML now looks like this”?

    • Jenna Molby

      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

  3. thank you jenna . I am newbie for pardot and also for salesforce .I was looking solution for this problem from last 1 month.

  4. Hi, I want to align the CTA(submit) button along side. How can we do it?

  5. Shelby Smith Reply

    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!

    • Jenna Molby

      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

Write A Comment