The Best Way to Create a 2 Column Pardot Form

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.

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