MarketingPardot

Making a Custom Pardot Form with CSS

By January 4, 2019 No Comments

Pardot’s out-of-the-box form can be somewhat lacking. 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 B2B Marketer’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 form with those field types.

Let’s jump in!

Tutorial Form Example

Email-Marketing

Want to learn more about Pardot?

Our free B2B Marketer’s Guide to Pardot shows you how to grow your business with Pardot marketing automation.

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’re trying to do here 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 pretty 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’re going to add the following code to our CSS:

/**********STEP ONE*********/ /* Single Line Field Tweaks */ form.form input { border-top-width: 0px; border-left-width:0px; border-right-width:0px; border-color: #ddd; 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 Blue Highlight 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.

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

/* Recolors Bottom Border to Blue with Smooth Transition */ form.form input.text:focus { border-color: #2979f2; border-bottom-width: 1px; transition-duration: .3s; transition-timing-function: ease-in-out; } select:focus { border-color: #2979f2; }

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

2. Placeholder Text

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

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

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 = "";

Sourced from dedevillela on CodePen.

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.

.pd-text label, .pd-select label, .pd-textarea label { display:none !important; } /*Hides Required label*/ #pardot-form p.required label, #pardot-form span.required label { display: none !important; }

This code simply tells the labels not to display.

3. Adding fonts & stylizing text

There are a few ways to add fonts to Pardot, and those different methods are really going to depend on what fonts you use for your branding. The easiest fonts to add would be Google fonts that can be added via a couple of lines of HTML.

For our branding, we use an Adobe Font (formerly Typekit) and link those to the spreadsheet. To do this with an Adobe Font, you first need to create a web project at fonts.adobe.com. After you create the project, you’ll be given a line of code that you can add to the <head> section of your Layout tab.

After that, you’ll need to use CSS to tell the different text types in your document to be stylized with that font.

/*Font Family & Weight */ p { font-family: proxima-nova, sans-serif; font-weight: 300; } /* Input Text Styles */ body form.form input.text, body form.form select { width: 100% !important; font-family: proxima-nova, sans-serif; font-size: 16PX; }

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

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

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.

/*Button Styling*/ form.form p.submit input { border-radius: 5px 5px 5px 5px; box-shadow: 0 -3px rgba(0,0,0,0.1) inset; color: #FFF; font-family: proxima-nova, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 2px; padding: 13px 18px; position: relative; text-transform: uppercase; top: -3px; margin-bottom: 10px; opacity: 1; line-height: 20px; display: inline-block; border-width: 0px !important; background: linear-gradient(125deg,#2979f2,#2979f2); padding-left: 60px; padding-right: 60px; display: table; margin: auto; margin-top: 50px !important; } /*Button Hover Styling*/ form.form p.submit input:hover { background: linear-gradient(125deg,#4a8df4,#4a8df4); box-shadow: 0 20px 38px 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; }

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.

5. Tweaks

Beyond these steps, we also made a few minor style tweaks to this form to add spacing and stylize the error text.

/* Recolors Error Text Red */ .errors { color: red; } .error .no-label { color: red; } /* Adds Margin Below Fields */ input { margin-bottom: 10px; } /* Adds Margin to Form fields */ .form-field { margin-bottom: 30px; }

6. Code Pastebin

Feel free to grab the complete codes for our custom Pardot form at the links below:

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

Yes, I want to convert & qualify more marketing leads.

Connect with a specialist