Chat with us, powered by LiveChat

How to Make a Custom Pardot Form with CSS Styling

Tim Edwards

How to Make a Custom Pardot Form with CSS Styling

Tim Edwards

Tim Edwards

Founder & CEO
Share on linkedin
Share on facebook
Share on twitter

Pardot’s default form styling can be somewhat lackluster. We thought it’d be helpful if we shared one our forms with you and explained how we went about making it.

This form is the same form we currently use on most of our landing pages, including the landing page for our Beginner’s Guide to Pardot.

One thing worth noting about this form is that it doesn’t make use of radio buttons or checkboxes, so your mileage may vary when using this styling with those field types.

Let’s jump in!

How to customize your Pardot lead form

First things first, you’ll need to create a new layout template and attach it to a form. Because we are heavily styling this form, we don’t want to include default Pardot’s CSS. Make sure to uncheck “include default CSS” on the Layout tab of the layout template editor.

1. Removing the boxes

Overall, what we wanted to do is create a relatively simple form that isn’t stylized like a typical Pardot form. We wanted to think outside of the box, so we got rid of the boxes on our form. Which, from a CSS perspective, is relatively easy to do.

The fields themselves are really just 1px thick border boxes, so all we need to do is hide the left, top, and right borders by setting their widths to 0px.

In our layout template that’s attached to our form, we added the following code to our CSS:

/*Single Line Field Tweaks*/
form.form input {
   border-top-width: 0px;
   border-left-width:0px;
   border-right-width:0px;
   border-color: #424242;
   border-bottom-width:1px;
}

/*Stylizes Dropdown Menus*/
select {
   border-color: #ddd;
   border-top-width: 0px;
   border-right-width: 0px;
   border-left-width: 0px;
   color: #75758b;
}

If you preview your form now, though, you’ll notice something a little odd.

The unselected field is now a single line, but the selected field will show a box around it. Luckily there’s an easy fix for this. This code will tell the visitor’s browser not to render the selection of the box:

/*Hides Outline Around Fields*/
input.text {
   user-select: none;
   padding-left: 5px;
}

input.text:focus {
   outline: none !important;
}

select:focus {
   outline: none !important;
}

But like most things in CSS, fixing one problem causes another. Now we have a very real problem: the user can’t clearly see what field they’re typing in.

Our solution here was to simply change the color of the bottom border with a smooth transition.

Whenever someone clicks into one of the fields, the color of the bottom border changes to our LearningCurv branded red.

/*Transitions Bottom Border to Red*/
form.form input.text:focus {
   border-color: #fc6e62;
   border-bottom-width: 1px;
   transition-duration: .3s;
   transition-timing-function: ease-in-out;
}

select:focus {
   border-color: #fc6e62;
}

2. Placeholder Text

For our forms, we decided to use placeholder text instead of labels.

This JavaScript should be added between <script> tags at the bottom of the Form tab of the layout template, not in the Layout tab.

JavaScript sourced from dedevillela on CodePen.

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);
}

var selected = document.getElementsByClassName("select")[0];
selected[0].innerHTML = selected.attributes.placeholder.nodeValue;
selected[0].value = "";

After this, you’ll have to add another snippet to the CSS, as we’ve only added new labels into the field but haven’t removed the old ones.

/*Hides Default Labels*/
label {
display:none !important;
}

3. Adding fonts & stylizing text

There are a few ways to add fonts to Pardot, and the best method depends on which fonts you use for your branding. The easiest fonts to add are Google fonts, which can be added via a couple of lines of HTML.

For our branding, we used a Google font called Roboto. To insert this Google font into a form, you need to visit the Google Fonts page for the font, select the particular style you want to use, copy the embed HTML code provided on the left side of the page, and then paste that into thetags of your form Layout code.

After that, you can use CSS to style the different types of text in your form.

You’ll notice that after font-family there are two font names. The first name, “Roboto,” is the font we’re using in the form, and the second name is our fallback font.

/*Text Styling*/
p {
   font-family: "roboto", sans-serif;
   font-weight: 300;
}

/*Input Text Styling*/
body form.form input.text, body form.form select {
   width: 100% !important;
   font-family: "roboto", sans-serif;
   font-size: 16px;
}

Some older browsers (and some modern ones too) don’t like pulling font files from third-party sites. So we need a fallback sans serif font to make sure our forms at least roughly follow our vision. Otherwise, it will default to a serif font like Times New Roman.

You might also notice our use of !important in some of our CSS. This sometimes needs to be included for lines of styling that don’t appear to be working. The !important tag ensures that those particular lines of CSS will override any default code stopping it from rendering.

4. Styling the button

For our buttons, we really wanted them to match what we had on our website, so we took the code we had for our website buttons and applied it to the form.

We applied separate styling for our button hover, so that a drop shadow appears when someone hovers over it. Even though we use a lot of code here, your buttons don’t need to be nearly this involved. We just wanted to make sure that we offered a consistent experience across our website and our forms.

/*Button Styling*/
form.form p.submit input {
   color: #fff;
   font-family: "roboto", sans-serif;
   font-weight: 500;
   font-size: 15px;
   letter-spacing: 1px;
   padding: 15px 18px;
   position: relative;
   text-transform: uppercase;
   margin: 15px 0px !important;
   line-height: 37px;
   display: inline-block;
   border-width: 0px !important;
   background: #fc6e62;
}

/*Button Hover Styling*/
form.form p.submit input:hover {
   background: #f75a52;
   box-shadow: 0 20px 20px rgba(0, 0, 0, 0.16);
   -ms-transform: translateY(-3px);
   transform: translateY(-3px);
   -webkit-transform:    translateY(-3px);
   transition-duration: .2s;
   transition-timing-function: ease-in-out;
}

5. Error Text Tweaks

Beyond these steps, we made a few additional but minor tweaks to stylize the error text.

/*Recolors Error Text*/
p.errors {
   color: #ffffff;
   background: #fc6e62 !important;
   font-family: "Roboto", sans-serif !important;
   width: 100% !important;
   margin-left: 0px !important;
}

p.error.no-label {
   color: #fc6e62 !important;
   font-family: "Roboto", sans-serif !important;
   margin-left: 0px !important;
}

You can see that, with just a little CSS, there are many ways you can improve the visual appeal of your Pardot forms. Now try these customizations on your own forms and see if you can create something unique for your brand. 

Interested in learning more about Pardot? We wrote the Beginner’s Guide to Pardot, free for anyone who wants to take their understanding of Pardot to the next level.

Ready to make Pardot work for you?

LearningCurv_Consultant_Devin_Peach