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

  • 15/10/2020
    How to Use Flex Fields in Pardot

    Flex fields are custom fields that can be used over and over again to limit the number of one-time-only fields within Pardot and Salesforce. They contain data that is required temporarily to execute a specific event or campaign. Once the data is no longer needed, the fields can be reset to blank using an Engagement Program or Automation Rule

  • 04/10/2020
    How To Embed a Pardot Form on Your Website The Right Way

    Pardot offers 2 methods for embedding forms on your website; embedding using an iframe, and form handlers. While the embedded iFrame forms allow marketers to have control over updating and configuring the forms, using an iFrame isn’t always ideal for website usability. In this tutorial, I will show you how to take advantage of the Pardot iFrame forms and make it look great embedded on your website.

  • 23/09/2020
    7 Ways Pardot Users Can Use Chrome Developer Tools For Troubleshooting & Testing

    Chrome Developer Tools is widely used by developers to help edit pages on-the-fly and diagnose issues. Pardot users can use DevTools to troubleshoot and test landing pages and forms. In this post, I’ll show you 7 ways you can use DevTools, including how to identify errors on a landing page, how to customize the CSS of a form and how to view hidden form field values.

58 comment(s)
  • Yee Khang

    02/08/2018 at 12:01 pm
    Reply

    Nevermind! I figured it out, it was a setting in the template form. THANKS!

  • Yee Khang

    02/08/2018 at 10:11 am
    Reply

    Great help!! So happy to have found this page. I had one question, if I'm looking on the landing page on my phone, I only see the email & submit button. Is there a way to make it show or is this something pardot is doing? Thanks for the help!

    • Jenna Molby
      to Yee Khang

      02/08/2018 at 1:20 pm
      Reply

      Hi Yee, The code is set up to be responsive. Is your landing page responsive? If you're still having trouble, email [email protected] with a link to your landing page and I can take a look. Cheers, Jenna

    • Shay
      to Jenna Molby

      05/08/2019 at 12:42 pm
      Reply

      Hi Jenna, this is a great post! I've followed your post and have a nice responsive form. However, I was wondering how you would make the error message text colour red ? I've tried adding the following code, but no luck. Any help would be appreciated! #pardot-form span.error { color: #FF8989; font-size: 8px; width: 100% margin-bottom: 0.1em; font-weight: 40; border-radius: 8px; font-family: 'Open Sans',sans-serif; } }

    • Jenna Molby
      to Shay

      06/08/2019 at 12:08 pm
      Reply

      Hi Shay, Thank you! Try changing your selector to #pardot-form .error. If that doesn't work there might be some other CSS on the page that is overriding your CSS. Cheers, Jenna

  • Carolin

    26/07/2018 at 6:36 am
    Reply

    HI Jenna. How do you put the Submit Button in the middle? Thanks

    • Jenna Molby
      to Carolin

      26/07/2018 at 9:14 am
      Reply

      Hi Carolin, Adding this CSS should do the trick body form.form p.submit { text-align: center !important; margin:0 !important; } body form.form input[type=submit] { margin-right:0 !important; margin-left:0 !important; } Cheers, Jenna

  • Jasmin

    23/07/2018 at 2:15 am
    Reply

    When I copy in the CSS by either method it just adds code to the page, it doesn't except it as actual code.

    • Jenna Molby
      to Jasmin

      23/07/2018 at 9:19 am
      Reply

      Hi Jasmin, Make sure you are wrapping the CSS with the style tags <style> THE CODE HERE </style>. Cheers, Jenna

  • Annaleece

    22/07/2018 at 11:20 pm
    Reply

    Hi there. Thanks for this however when I paste the above CSS code, it just appears as text. Is there a particular section or additional coding required? Thank you

    • Jenna Molby
      to Annaleece

      23/07/2018 at 9:19 am
      Reply

      Hi Annaleece, Make sure you are wrapping the CSS with the style tags <style> THE CODE HERE </style>. Cheers, Jenna

1 2 3 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