Creative Ways to Spice Up Your Pardot Forms: Part 1

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.

<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="&#9731;" />
		
		<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>

%%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%%

%%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%%

%%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%%

</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.

<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>

100

101

102

103

104

105

106

/* 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.

<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>

$('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:

<!-- 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>

</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.

22 comment(s)

George

21/03/2019 at 3:43 am
Reply

Hi Jenna, Love this but i'm having a bit of trouble we ReCaptcha. The box isn't showing up on the form so everytime i try to submit it fails ...
- Jenna Molby
  
  to George
  
  21/03/2019 at 3:05 pm
  Reply
  
  Hi George, Sorry you're having trouble with the reCaptcha. Can you send a link to your landing page to [email protected] and I can help you troubleshoot. Cheers, Jenna
Casey

20/03/2019 at 1:27 pm
Reply

Hi Jenna - thanks so much for this! I had a question - I implemented this style on a Pardot landing page that I'm practicing with: https://go.deltarisk.com/l/513911/2019-03-19/cv44jh You can see at the bottom there is a checkbox field, asking if the user wants to sign up for the newsletter. But it looks like the label is still showing up below the field for that one. Anything I can do to correct this? Everything else looks perfect, my boss is really impressed : )
- Jenna Molby
  
  to Casey
  
  20/03/2019 at 2:39 pm
  Reply
  
  Hi Casey, Nice job! Adding this CSS should fix the issue form.form span.value { position:absolute; top:35px; left:0; margin-left:0 !important; } form.form span.value label { margin-left:5px !important; } form.form p.submit { margin-top:40px !important; } Cheers, Jenna
Kacia

06/03/2019 at 4:21 pm
Reply

I ended up pulling from your initial example and tweaking that - thanks! :)
Kacia

06/03/2019 at 3:48 pm
Reply

Hey Jenna! I am IN LOVE with this form style. I'm struggling with the button :( I don't love the grey one it is defaulting to, but when I add CSS for the button, it's pushing it far to the right outside of the form margin. :/ I'm struggling here! HA!
Nicky

02/03/2019 at 8:23 am
Reply

Thanks for this - it's great! Do the CSS and JS get pasted at the end of the layout template or at the top? My form labels are still showing underneath the text I'm entering into the fields and I'm not sure why?
- Jenna Molby
  
  to Nicky
  
  02/03/2019 at 9:37 am
  Reply
  
  Hi Nicky, You're welcome! I recommend putting the CSS between the HEAD tags of your layout template and the Javascript right before the closing BODY tag. Cheers, Jenna

1 2 3 Older

Creative Ways to Spice Up Your Pardot Forms: Part 1

1. Floating labels

Adding this effect to your Pardot forms

Step 1: Edit your layout template

Step 2: Add the CSS

Step 3: Add the Javascript

The result

2. Searchable dropdowns

Demo

Adding this effect to your Pardot forms

Questions?

22 comment(s)

George

Jenna Molby

to George

Casey

Jenna Molby

to Casey

Kacia

Kacia

Nicky

Jenna Molby

to Nicky

Leave A Comment Cancel reply

About Me

Categories

Most Commented

Popular Posts

Creative Ways to Spice Up Your Pardot Forms: Part 1

1. Floating labels

Adding this effect to your Pardot forms

Step 1: Edit your layout template

Step 2: Add the CSS

Step 3: Add the Javascript

The result

2. Searchable dropdowns

Demo

Adding this effect to your Pardot forms

Questions?

Like This Article?

Related Posts

22 comment(s)

George

Jenna Molby

Jenna Molby

Nicky

Jenna Molby

Leave A Comment Cancel reply

About Me

Categories

Most Commented

Popular Posts