How to Create a 2 Column Pardot Form

In:

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%%

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.



Questions?

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

Related Posts

  • 04/01/2017
    Beautiful Marketo Forms: Styling Checkboxes and Radio Buttons

    Your Marketo forms don’t have to be boring. With a little extra CSS you can create beautiful Marketo forms with customized checkboxes and radio buttons. In this tutorial, I’ll show you how you can style checkboxes and radio buttons within Marketo forms with minimal coding.






  • 23/08/2016
    How to Improve Pardot Form Conversions by Using Google Places

    It’s a fact that shorter forms have a higher conversion rate, but in B2B marketing longer forms are needed to capture essential information for lead scoring and lead routing. In this tutorial, I will show you how to use the Google Places API to auto-fill city, state/province, country and postal code/zip code within your Pardot forms. Don’t worry, you don’t need to know how to code to implement this, you just need to know how to copy & paste.






  • 01/06/2016
    How to Localize a Date Field in Marketo Using a Velocity Script

    Earlier this month I was given the task of localizing the date formatting within a Marketo email. The email referenced a date field within Marketo that was formatted as yyyy-mm-dd. The issue was that it was a global email, sent out to different countries who do not format the date as yyyy-mm-dd. To fix this issue I created a simple velocity script to transform the date value into something that’s recognized within each country. Here’s a breakdown of how I did it and how you can implement something similar in your Marketo instance.






8 comment(s)
  • Katy Hege

    07/12/2016 at 10:46 am
    Reply

    Actually, if you plug in bootstrap css you can just assign a class to the field. col-sm-6 for 2 column col-sm-4 for 3 column, etc. No extra styles needed.

  • Christian

    05/12/2016 at 2:42 pm
    Reply

    One question: How do you show the field labels within the form field in Pardot? Do you have any examples / example code for this?

    • Jenna Molby
      to Christian

      05/12/2016 at 3:56 pm
      Reply

      Hi Christian, You can add some javascript to your form that will take the labels and turn them into placeholders. Here's what the script looks like <script> var labels = document.querySelectorAll("label"); var i = labels.length; while (i--) { var label = labels.item(i); var text = label.textContent; label.parentNode.classList.contains("required") && (text += "*"); label.nextElementSibling.setAttribute("placeholder", text); } </script> and then you will have to hide the labels using CSS like this: <style> label {display:none !important;} </style> Hope that helps!

  • Sarah Thomas

    08/11/2016 at 5:52 am
    Reply

    Many thanks for this! If I wanted 2 fields to be as a 2 column layout but then the other fields to be displayed underneath (one per row) how could I do that?

    • Jenna Molby
      to Sarah Thomas

      08/11/2016 at 4:18 pm
      Reply

      Hi Sarah, that's a bit more complicated but totally do-able. Send a link to the Pardot form along with the fields you want as 2-columns to contact@jennamolby.com and I can help you out.

  • Bertus Schoeman

    06/11/2016 at 7:00 am
    Reply

    Hi there, thank you for this article, helps a lot. I was wondering if you could tell me what to change for a 3 and/or 4 column form if you don't mind. Thank you!

    • Jenna Molby
      to Bertus Schoeman

      06/11/2016 at 10:46 am
      Reply

      Hello! For a 3-column form the CSS would look like this .col:nth-child(3n+1){ clear:left; } for a 4-column form the CSS would look like this .col:nth-child(4n+1){ clear:left; }

Leave A Comment

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

About Me

I’m a Marketo & Pardot expert with a strong background in design and development. I specialize in email marketing, lead nurturing and CRM integrations for marketing and sales alignment. LEARN MORE

Categories
Most Commented
Popular Posts