Lesley

Sep 29, 20194 min read

Creating horizontal forms in Pardot

Updated: Jan 2, 2020

One of my favorite challenges when helping someone implement Pardot is to recreate forms that they have on their website with Pardot forms. This is a challenge because Pardot comes with a very generic out-of-the-box form style and does not have any user-friendly mechanism for making that form look like what you want it to look like. However, they do allow exposure to the code behind the form, which allows a certain degree of manipulation. The horizontal form is a problem I have solved three different ways now, the third way being the best solution so far. For this solution, I leveraged Bootstrap css for all of my formatting needs. Bootstrap is an incredibly handy, publicly accessible framework for building responsive websites. The also have a website chockfull of explanations and examples of how to use their code. The first thing you are going to do is create a new layout template and access the Layout tab. There are six changes you are going to make on this Layout tab.

1. Add the following line in amongst the other metas on the layout tab. This will allow the form to display properly on a mobile device:

2. Insert the link to bootstrap’s css in <head> section on the layout tab:

3. Add a little css before the </head> tag. The short explanation for this bit of css is that the way Pardot generates the inputs in the HTML does not allow you to add an important css class to the inputs. I pulled this css out of the bootstrap file and applied it directly to the inputs. This will make the form fields look much more attractive. You can also make adjustments here if you want a little different look to the form fields:

form.form input.text, form.form textarea.standard, form.form select, form.form input.date {

display:block;

width:100%;

padding:.375rem .75rem;

font-size:1rem;

line-height:1.5;

color:#495057;

background-color:#fff;

background-clip:padding-box;

border:1px solid #ced4da;

border-radius:.25rem;

transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;

}

</style>

4. Throw a div class="container" around the %%content%% tag. This will especially be a benefit if you are planning on inserting this form onto a website via iframe.

5. Add bootstrap’s javascript code to the bottom of the page, right above the </body> tag:

6. Finally, uncheck the “Include default CSS stylesheet” box because we do not care about Pardot’s css right now, and we do not want to risk it conflicting with bootstrap css, or any other css we might add for styling.

Here are all the changes in one place:

The next step is to jump over to the Form tab:

Pardot’s form code runs on a loop and what is ultimately generated is an HTML form. At first glance, though, it just looks bizarre:

When I create a form that has the fields of First Name, Last Name and Email, this is what the HTML of the form ends up looking like when it is published:

Pardot has their form code running on a loop so that it can accommodate whatever form fields you use and so you can reuse one form layout template for an endless iteration of forms. This is what the form looks like with the only change being adding in the Bootsrap CSS:

What we want it to look like is more like this sample from Bootstrap:

The challenge, then, is to make the above code look more like this sample from Bootstrap:

NOTE: the above sample leverages placeholder text, which we are not going to delve into at this point. I will save that for another post. For now, we are focusing on the form-row and col classes from Bootstrap.

The first thing we need to do to the form code is add the <div class=“form-row”> line. This will allow the form to recognize the columns that we will be creating. If you put this right below the <form> tag the form structure looks awful if required fields are not filled out. Therefore, place it below all of the error messages, right above where the form loop starts:

Further down, we are going to replace the <p> tags around the form loop with the next set of <div> tags. At the same time, we are going to add “col-auto” to the class list so that when the fields are looped through, they also create columns. This allows you to use this template on forms with a varying number of columns. The “col-auto” class works a little better then just the “col” class when the Submit button comes into play. Col-auto sizes the columns based on the contents.

You now need to delete the closing </p> tag and add the closing </div> tag in at the end of the loop:

This is now the full form loop:

We also need to treat the submit button like a column so that it falls in line with the other fields. Using bootstraps CSS for a submit button, we are going to replace the Pardot submit button code:

with the following Boostrap code:

I include a <br> above the input field to adjust for the lack of label in this element. I also include the bootstrap class mt-3 which adds a little extra padding to the top of the submit button. This should get your form in a straight line.

This is where we are with the Submit button updated:

I used the class "btn-primary" for the submit button, which makes it blue, but Boostrap has plenty of other options for Submit button styling. This feature is awesome because it eliminates the need to style buttons with css, as long as you don't want anything too fancy. Here is a link to bootstrap's button styling options.

The problem with hardcoding the form class into the layout template, though, is that you are committing to that color/style of submit button for any for that uses this template.

But here is a fun trick that will allow you to override the button design on a form-by-form basis, while still using the same layout template.

Finally, don’t forget to close your row div. Close this div before the below form content tag so that if there is any below form content it does not screw with your columns.

That's it! For your convenience, here is the entire form tab code:

#Pardot #Bootstrap #CSS #forms

HACKS FOR TECH, HACKS FOR LIFE

Creating horizontal forms in Pardot

Recent Posts