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-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%%
			Please correct the errors below:
		%%form-end-if-error%%
		
		%%form-start-loop-fields%%
			
				
				%%form-field-input%%
				
					%%form-if-field-label%%
				%%form-field-label%%
				%%form-end-if-field-label%%
				%%form-if-field-description%%
					%%form-field-description%%
				%%form-end-if-field-description%%
	
				
			%%form-field-if-error%%
				%%form-field-error-message%%
			%%form-field-end-if-error%%
			
		
		%%form-end-loop-fields%%
		
		%%form-spam-trap-field%%
		
		
		
		
		
			
		
	%%form-after-form-content%%
	
%%form-end-if-display-form%%

%%form-javascript-link-target-top%%

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.

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.

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:

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 me a tweet @jennamolby, leave a comment below, or book a Peer Chat.

52 Comments

Shonni 5 years ago Reply

Thanks so much for this! I am having an issue when I add new fields, each new field floats to the left. Can you offer any tips?
- Jenna Molby Post Author 5 years ago
  
  Hi Shonni, You’re welcome! My guess is you might have some custom CSS on your page that is causing this. Email the link to your page to [email protected] and I can help you troubleshoot :). Cheers, Jenna
Ali 6 years ago Reply

Is it possible to get the floating style to work for dropdown fields too? I noticed in your sample the Country value doesn’t work the same way, but I was just hoping there could be an option because my form only requires Email and Country, so it looks a little off. Love the effect!
- Jenna Molby Post Author 6 years ago
  
  Hi Ali, So happy you like the style! No, it’s not possible to do the same effect with dropdown fields. Dropdown fields do not use a “placeholder” like the text-based fields. Cheers, Jenna
Dan 6 years ago Reply

Hi Jenna,

Thank you for a wonderful blog with great ideas.
I was curious if there was a way to combine the two styling options above into the one form, I have tried myself but can’t seem to get it to work.
- Jenna Molby Post Author 6 years ago
  
  Hi Dan, You’re welcome! Yes, it’s possible to combine the two styling options. You should be able to copy the tutorial for both and it would work. If you’re experiencing issues email me at [email protected] and I can take a look. Cheers, Jenna
Jaco van Zyl 6 years ago Reply

Hey Jenna

Thanks again for all the posts. I’m learning loads.

I’ve used the code and works well on the form, but not when I use the form on a landing page. I saw a previous comment where someone had the same issue. I check and double-checked to make sure the code is in the correct place. I also checked to see if it may because I used a stock template, but when testing ‘start from scratch’ template, the form goes back to default.

Thanks in advance for you help
- Jenna Molby Post Author 6 years ago
  
  Hi Jaco, You’re welcome! Make sure your landing page and form are using the same template. Cheers, Jenna
Mike Rohde 6 years ago Reply

Hi,
I get the code to work when I preview the Form, but when I place the form on a landing page, it reverts back to default. Does this only work with Pardot Lightning or can I use it in Classic? Thanks!
- Jenna Molby Post Author 6 years ago
  
  Hi Mike, Yes, it would work in both Lightning and in Classic. I would recommend double-checking that the form code is in the layout template that you are using for your landing page. Cheers, Jenna