Looking for some creative ways to spice up your Pardot forms? In this post, I will show you how to implement the popular floating label technique in three easy steps. I will also show you how to turn your long drop down menus into user-friendly, searchable dropdowns.
This is part 1 of the 3 part series. Check out part 2 here.
1. Floating labels
You have probably seen this technique before. The label appears as placeholder text and when you click on the field the text moves out of the way and allows you to type. This technique can be applied to your Pardot forms in three steps.
Here’s an example of what it looks like. Click on the field to see the effect.
See the Pen Pardot form floated labels (Styled) by Jenna Molby (@jennamolby) on CodePen.
Adding this effect to your Pardot forms
Step 1: Edit your layout template
In order for this to work the labels within your forms must be placed below the fields. By default, the labels are above the form fields. To modify this, you will need to edit the layout template, click on the form tab and replace everything within the editor with the code below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<form accept-charset="UTF-8" method="post" action="%%form-action-url%%" class="form" id="pardot-form"> %%form-opening-general-content%% %%form-if-thank-you%% %%form-javascript-focus%% %%form-thank-you-content%% %%form-thank-you-code%% %%form-end-if-thank-you%% %%form-if-display-form%% %%form-before-form-content%% %%form-if-error%% <p class="errors">Please correct the errors below:</p> %%form-end-if-error%% %%form-start-loop-fields%% <div class="form-field %%form-field-css-classes%% %%form-field-class-type%% %%form-field-class-required%% %%form-field-class-hidden%% %%form-field-class-no-label%% %%form-field-class-error%% %%form-field-dependency-css%%"> %%form-field-input%% %%form-if-field-label%% <label for="%%form-field-id%%">%%form-field-label%%</label> %%form-end-if-field-label%% %%form-if-field-description%% <span class="description">%%form-field-description%%</span> %%form-end-if-field-description%% <div id="error_for_%%form-field-id%%" style="display:none"></div> %%form-field-if-error%% <p class="error no-label">%%form-field-error-message%%</p> %%form-field-end-if-error%% </div> %%form-end-loop-fields%% %%form-spam-trap-field%% <!-- forces IE5-8 to correctly submit UTF8 content --> <input name="_utf8" type="hidden" value="☃" /> <p class="submit"> <input type="submit" accesskey="s" value="%%form-submit-button-text%%" %%form-submit-disabled%%/> </p> %%form-after-form-content%% %%form-end-if-display-form%% %%form-javascript-link-target-top%% </form> |
Step 2: Add the CSS
Add the CSS below to your layout template. This will create the effect of the floating labels for all form field other than radio buttons and checkboxes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
<style type="text/css"> /* The below styles are required for the floating labels */ .form-field { text-align: left; position: relative; margin-bottom:15px; } .form-field input[type="text"], .form-field input[type="email"], .form-field input[type="tel"], .form-field textarea, .form-field button, .form-field select { padding: 12px; font-size: 14px; border: 1px solid #c6c6c6; width: 100% !important; color: #888; font-size: 16px; font-weight: 300; background-color: #fff; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; box-sizing:border-box; } .form-field input[type="text"]:focus, .form-field input[type="text"]:hover, .form-field input[type="email"]:focus, .form-field input[type="email"]:hover, .form-field input[type="tel"]:focus, .form-field input[type="tel"]:hover, .form-field textarea:focus, .form-field textarea:hover, .form-field button:focus, .form-field button:hover, .form-field select:focus, .form-field select:hover { outline: none; border-color: #9FB1C1; } .form-field input[type="text"]:focus + label, .form-field input[type="text"]:hover + label, .form-field input[type="email"]:focus + label, .form-field input[type="email"]:hover + label, .form-field input[type="tel"]:focus + label, .form-field input[type="tel"]:hover + label, .form-field textarea:focus + label, .form-field textarea:hover + label, .form-field button:focus + label, .form-field button:hover + label, .form-field select:focus + label, .form-field select:hover + label { color: #077ABC; cursor: text; } .pd-text label, .pd-select label, .pd-textarea label { position: absolute; left: 8px; top: 12px; color: #999; font-size: 16px; display: inline-block; padding: 4px 10px; font-weight: 400; background-color: rgba(255, 255, 255, 0); pointer-events: none; -moz-transition: color 0.3s, top 0.3s, background-color 0.8s; -o-transition: color 0.3s, top 0.3s, background-color 0.8s; -webkit-transition: color 0.3s, top 0.3s, background-color 0.8s; transition: color 0.3s, top 0.3s, background-color 0.8s; } .pd-text label.active, .pd-select label.active, .pd-textarea label.active { top: -11px; color: #555; background-color: white; } .form-field textarea { resize: none; height: 200px; } form.form select { height:50px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Style the Pardot error messages */ form.form div.error { padding:0 !important; } form.form p.no-label, form.form p.email-pref { margin:0 !important; } #pardot-form { width:350px; margin:0 auto; box-sizing:border-box; } </style> |
Step 3: Add the Javascript
In addition to the CSS, this method uses some Javascript. Place the code below within your layout template as well.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> $('input[type=text], select, textarea').addClass('floatLabel'); (function($){ function floatLabel(inputType){ $(inputType).each(function(){ var $this = $(this); // on focus add classs active to label $this.focus(function(){ $this.next().addClass("active"); }); //on blur check field and remove class if needed $this.blur(function(){ if($this.val() === '' || $this.val() === 'blank'){ $this.next().removeClass(); } }); //manage the pre-populated values if($this.val() != '' ){ $this.closest('.form-field').find('label').addClass('active'); } }); } floatLabel(".floatLabel"); })(jQuery); </script> |
The result
Here’s what the floating labels look like after implementing all the code within the layout template.
See the Pen Pardot form floated labels (Simple) by Jenna Molby (@jennamolby) on CodePen.
2. Searchable dropdowns
I came across this technique when I was registering for a webinar recently. When I went to select my Country from the drop-down, I was greeted with a search feature for the drop-down. I immediately started Googling what JavaScript plugin they were using to see if I could use it on Pardot forms. It turns out, you can and not only is it super easy to implement, but it also makes long drop-down in your Pardot forms more user-friendly.
Demo
Here is what a searchable drop down looks like in action.
See the Pen Chosen.js Demo (Single Select) with Pardot Forms by Jenna Molby (@jennamolby) on CodePen.
Adding this effect to your Pardot forms
Navigate to your form and click edit form. Go to step 3: Look and Feel, click on the below form tab, click on the HTML icon and paste this code:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- load the chosen.js stylesheet --> <link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css" rel="stylesheet" /> <!-- load the jquery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- load the chosen.js library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"> </script> <!-- apply the chosen.js library to the country drop down --> <script> $(".country select").chosen({no_results_text: "Oops, nothing found!"}); </script> |
Update country with the name of your drop down field. Optionally, you can update the no_results_text to what ever you want to display when the no results are found for the searched term.
Questions?
Send them to me via email, send me a tweet @jennamolby, or leave a comment.
Hi there! Thanks for the great content – more than one of your articles has been extremely helpful in setting up Pardot for the first time. For this guide, I was able to get the floating labels, but my labels don’t move up like yours when the user types into the field. They just stay there, over the typed text. Any idea what’s going on? I checked for conflicting css and am not coming across any, but I may be looking in the wrong place. Thanks!
Hello! So happy you find my content helpful :). If the labels aren’t moving there might be an issue with the Javascript rather than the CSS. Send me an email with the link to your form and I can take a look.
Hi Jenna, I implemented the floating labels from this article.
I tried to combine it with the 2 column form code from here: https://jennamolby.com/the-best-way-to-create-a-2-column-pardot-form/ but that did not mix well with the labels as they did not react to the columns.
Do you have a fix for this?
Hi Will, I haven’t tried combining them myself, but it still should work. Send me the link to your page and I can take a look for you.
Hi Jenna,
I have a question, for the searchable dropdown field, is it only applicable for State/Country, or it can be used anywhere?
Thanks
Mandy
Hi Mandy, It can be used for any dropdown. All you have to do is modify the Javascript to include the proper field name. Cheers, Jenna