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 great 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 our landing pages, including our B2B Marketer’s Guide to Pardot Landing page. The only thing worth noting, we don’t really make use of radio buttons or checkboxes in our forms, so your mileage may vary when using our form with those field types.

Let’s jump in:

Tutorial Form Example

Form Design

First things first, you’ll need to create a new layout template and it attach 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 wasn’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, all we need to do is hide the left, top, and right borders by setting their width 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; }

Like most things in CSS though, fixing one problem causes another. Now we have the very real problem of letting the user 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 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 and 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 and 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 you can add 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’ll first have 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 also tell the different types of text 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 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 buttons and applied it.

/*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 there’s 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; }

 

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 generate more leads for my sales pipeline.

Connect with a specialist