The Best Way to Create a 2 Column Pardot Form

In:

In this tutorial, I’ll show you the best way to create a two-column Pardot form. This is a follow up on my original post How to Create a 2 Column Pardot Form. By popular request, this new method includes a way to make certain form fields full width and is fully responsive. All you have to do is add CSS classes to your form fields and copy & paste the CSS provided into Pardot.

Add CSS classes to your form fields

The first step is to add CSS classes to your form fields. We will be using three different classes within the forms:

  1. form-col-1: Add this to form fields that will be in the left column.
  2. form-col-2: Add this to form fields that will be in the right column.
  3. form-col-full: Add this to form fields that you want in a single, full-width column.

To add a class to a form field, navigate to the fields tab of your form, click on the pencil icon to edit the form field. Then, click on the advanced tab and enter the class name in the CSS classes field.

Repeat this process until all form fields have one of the three classes. Here’s an outline of what my sample form looks like, where all the fields are in two columns except for the email field which is full width.

Edit the Form HTML

By default, every form field within your form will be wrapped in paragraph tags (<p></p>). This is not ideal when it comes to creating two-column forms, but it’s easy to update.

Navigate to your layout template and click on the Form tab. Change the paragraph tag to a DIV and close it right after the error message fields, as illustrated below.

Alternatively, replace the ENTIRE content within the form tab with the code below.

Add the CSS

Next, you need to add the following CSS in Pardot. You can add this in the layout template or within the form editor under look and feel > above form.

Here’s what my example form looks like with all the CSS added.



Questions?

Send them to me via email, send me a tweet @jennamolby, or leave a comment

Related Posts

  • 09/10/2019
    Creative Ways to Spice Up Your Pardot Forms: Part 2

    The 2nd part of the form customization series is finally here! In part 1, I showed you how to implement the popular floating label technique and how to create searchable, user-friendly dropdowns. In this post, I will show you how to create a conversational, paragraph-style form and how to create a form on a single line.

  • 17/06/2019
    How to Integrate Gravity Forms With Pardot

    Gravity Forms is one of the easiest tools to create advanced forms for your Wordpress website and with some customization they can be integrated with Pardot. In this post, I will show you how to integrate Gravity Forms using Pardot Form Handlers.

  • 28/02/2019
    Creative Ways to Spice Up Your Pardot Forms: Part 1

    Looking for some creative ways to spice up your Pardot forms? In this post, I will show you how to implement the popular floating label technique in three easy steps. I will also show you how to turn your long drop down menus into user-friendly, searchable dropdowns.

43 comment(s)
  • Taylor

    09/09/2019 at 8:33 am
    Reply

    Hi - If i have a checkbox field with 14 options, is there a way to wrap those 14 checkbox items into 2 columns so it isn't so long?Thanks!

    • Jenna Molby
      to Taylor

      10/09/2019 at 10:16 am
      Reply

      Hi Taylor, Adding this CSS should do the trick .pd-checkbox .value span { float:left; width:50%; } Cheers, Jenna

  • Elleisa Schloss

    20/08/2019 at 5:52 pm
    Reply

    Hi Jenna Thanks so much for providing these instructions - you are a lifesaver! However, I do have one problem where, when not all the required fields are filled in, and the error message appears, the "Please correct the errors below" message is appearing above the right hand column, instead of the left. It looks peculiar, how can I fix this? Here is a screenshot: https://overthewire.com.au/wp-content/uploads/2019/08/Pardot-Form-Error.png

    • Jenna Molby
      to Elleisa Schloss

      27/08/2019 at 4:12 pm
      Reply

      Hi Elleisa, You're welcome! Can you send a link to your form to [email protected] so I can take a look? There might be some CSS already embedded that might be causing the issue. Cheers, Jenna

  • Jason

    01/07/2019 at 10:43 am
    Reply

    I like how this works except with the way it reacts when stacking. I would like all of column 1 to come before all of column 2. Is there a way to have them stack that way instead of shuffle left, right, left, right...?

  • Michele

    09/05/2019 at 11:11 pm
    Reply

    Hi Jenna, How do you incorporate checkboxes and radio buttons into the layout and have them sit nicely underneath the 2-col text fields?

  • Jamieson

    08/05/2019 at 8:02 am
    Reply

    Hey Jenna Thank you for the code I find it super useful, just a FYI there is an extra semi colon on the fourth line of the CSS.

1 3 4 5 6

Leave A Comment

Your email address will not be published. Required fields are marked *

About Me

Welcome to my blog, where I share, tips, tricks, thoughts and solutions that I learn in my daily life as a sales and marketing professional.

LEARN MORE

Categories
Most Commented
Popular Posts