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

  • 23/07/2020
    How to Add an Opt-in Message & Privacy Policy Message to Pardot Forms

    GDPR and CASL compliance are just a few reasons to add an explicit opt-in message or a privacy policy to your Pardot forms. In this post, I’ll show you how to add a custom opt-in message to your form and a privacy consent message above the form submit button.

  • 23/06/2020
    How to Use Pardot Form Handlers

    Pardot form handlers allow you to use your own forms to post your data to Pardot. A Form handler is a great alternative to use instead of Pardot iFrame forms. They allow you to fully customize the look of your form and submit data to more than 1 database. In this tutorial, you will learn how to create a form handler from scratch.

  • 05/03/2020
    How to Create a Better Date Picker Within Pardot Forms

    Want to be able to restrict the date range of a date picker within your Pardot forms? The default date picker with Pardot does not provide this option, but with a couple of lines of JavaScript, you can enhance the functionality of the date picker. In this tutorial, I’ll show you how to use the jQuery UI date picker within your Pardot form.

52 comment(s)
  • Thomas

    02/04/2020 at 1:45 am
    Reply

    Hi, great to find someone so dedicated and willing to share. I just have one question. For required fields the error message shows up below the field on the left column and above the field for the right column. Any thoughts on this? Thanks!

    • Jenna Molby
      to Thomas

      02/04/2020 at 7:24 am
      Reply

      Hi Thomas, You're welcome! The DIVS you added in your layout template might not be closed properly. Double check that and if you still have issues, email me at [email protected] and I can take a look. Cheers, Jenna

  • Adam

    02/03/2020 at 7:22 am
    Reply

    What an incredibly easy to follow guide! Thank you, very helpful. Made my day :)

  • Gavin

    28/01/2020 at 3:24 am
    Reply

    Hi Jenna - thanks heaps for this blog (and a few others of yours). I'm relatively new to front-end stuff and totally new to Pardot - you saved me hours!

    • Jenna Molby
      to Gavin

      29/01/2020 at 10:22 am
      Reply

      Thanks so much! Cheers, Jenna

  • Kevin

    01/11/2019 at 8:26 am
    Reply

    Hi Jenna! I love your tutorials! Extremely helpful! I played around with this code to allow my to set up 2 columns where needed - worked great. I also had the field labels showing in the fields as placeholders which also worked great - thank you! But when I added this 2-column code, all the field labels reverted to above the field boxes. Does this mean I can only have one or the other?

    • Jenna Molby
      to Kevin

      01/11/2019 at 9:13 am
      Reply

      Hi Kevin, So happy you like my tutorials! If you are using this code along with the code for the placeholder text, you will need to modify this line var labels = document.querySelectorAll("p.pd-text label, p.pd-select label, p.pd-textarea label"); to this var labels = document.querySelectorAll(".pd-text label, .pd-select label, .pd-textarea label");. Cheers, Jennna

  • Wenda McMahan

    28/10/2019 at 7:52 pm
    Reply

    I have tried pasting the style (flanked with <style> and </style> in both the "Above Form" tab of the "Look and Feel" section of my form and the bottom of the "Form" tab of the actual layout template code. I am using the first example, replacing the <p> with </div>, deleting the </p> after the form code, and adding an </div> after the %%form-field-end-if-error%%. The first version includes the styling text in the form. The second one does not, but neither of them create two columns. Any ideas? It seems like many fans of this post have gotten it to work. Thank you!

    • Jenna Molby
      to Wenda McMahan

      29/10/2019 at 4:39 pm
      Reply

      Hi Wenda, Sorry it's not working for you. Please email me at [email protected] with a link to your form or landing page and I can help you troubleshoot. Cheers, Jenna

1 4 5 6 7

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 Marketing Operations leader.

Categories
Most Commented
Popular Posts