November 25, 2016
67 Comments

How to Add Placeholder Text Within Pardot Forms

There’s currently no feature for Pardot forms that allow you to use placeholder text instead of the label text. So, in this tutorial, I will show you how to add a bit of JavaScript to your Pardot forms to use the field labels as placeholders.

Step 1: Add the JavaScript

Navigate to Marketing > Forms > Layout Templates and select the layout you want to add the placeholder text to. Paste this Javascript at the bottom of the form tab and save.

<script>
var labels = document.querySelectorAll("p.pd-text label, p.pd-select label, p.pd-textarea label");
var i = labels.length;
while (i--) {
	var label = labels.item(i);
	var text = label.textContent;
	label.parentNode.classList.contains("required") && (text += " *");
	var nextElement = label.nextElementSibling;
	if (nextElement) {
		if (nextElement.tagName == 'SELECT') {
			nextElement.options[0].text = text;
		} else {
			nextElement.setAttribute("placeholder", text);
		}
		label.parentNode.removeChild(label);
	}
}
</script>

var labels = document.querySelectorAll("p.pd-text label, p.pd-select label, p.pd-textarea label");

var i = labels.length;

while (i--) {

var label = labels.item(i);

var text = label.textContent;

label.parentNode.classList.contains("required") && (text += " *");

var nextElement = label.nextElementSibling;

if (nextElement) {

if (nextElement.tagName == 'SELECT') {

nextElement.options[0].text = text;

} else {

nextElement.setAttribute("placeholder", text);

}

label.parentNode.removeChild(label);

}

</script>

Step 2: Add the CSS

If you want to use placeholder text instead of the form field labels, you will need to add some CSS that will hide the labels on the form.

Navigate to Marketing > Forms > Layout Templates and select the layout you added the JavaScript to. Paste this CSS at the top of the form tab and save.

<style>
p.pd-text label, p.pd-select label, p.pd-textarea label {display:none !important;}
</style>

<style>

p.pd-text label, p.pd-select label, p.pd-textarea label {display:none !important;}

</style>

Questions?

Send them to me via email, send me a tweet @jennamolby, or leave a comment

67 Comments

Leave a Reply Cancel reply

Nick Mexal says:

August 10, 2017 at 7:28 am

Hi Jenna, first off, this is amazing. I’m new to Pardot and this sort of thing is just not my cup of tea. Your blog has been a huge help. Question for you on this solution. Is there a way to customize the font color on the labels? I’m using a transparent field background on a dark-ish browser fill so I’ll like to have the text be white rather than gray (it also matches our website design that way). Is this doable? Or did I miss something obvious? Thanks a million!

Reply
- Jenna Molby says:
  
  August 10, 2017 at 9:23 am
  
  Hi Nick, So happy you found it helpful. Are you looking to change the font color for the placeholder text. If so, you can do this using CSS. Here’s a good article explaining how to do it: https://css-tricks.com/almanac/selectors/p/placeholder/. Cheers, Jenna
Troy Meyer says:

August 7, 2017 at 2:14 pm

Thank you for the quick and helpful tip! Saved me from having to start from scratch and worked perfectly, allowing me to integrate my client’s overall website style into the Pardot forms.

Reply
Maeva Traoré says:

July 17, 2017 at 9:11 am

Hello Jenna,

I managed to add placeholder text within my Pardot form.
The problem appears when I add it to my landing page. I don’t have the placeholders anymore.
Do you know how to fix that?
Many thanks,

Reply
- Jenna Molby says:
  
  July 17, 2017 at 9:17 am
  
  Hi Maeva, Please email your landing page url to [email protected] and I can help investigate the issue. Thanks!
Katy says:

April 17, 2017 at 12:29 pm

Jenna, I thought I’d add that the jquery link needs to be added and this modified version works best for me:

Reply
Anna says:

February 15, 2017 at 5:55 am

Hi Jenna,

Thank you for this! I tried it but couldn’t get it to work on drop down menus. Do I need to add anything extra?

Reply
- Jenna Molby says:
  
  February 15, 2017 at 11:37 am
  
  Hi Anna, Placeholders don’t work for dropdowns. Instead, you need to create a default value for the first value of the dropdown.
- Jean M says:
  
  February 16, 2017 at 7:40 am
  
  Hi Jenna, how would you create a default value for the dropdown?
- Jenna Molby says:
  
  February 16, 2017 at 9:27 am
  
  Hi Jean, This is a bit more complicated since I don’t think there’s a way to add a default option in Pardot forms. Feel free to email me at [email protected] with a link to your form and I can show you how it’s done using some Javascript. Thanks!
- Terry Rourke says:
  
  May 11, 2017 at 12:46 pm
  
  I was able to add a label using the first “blank” value. Edit the form field, on “Values” tab click on the “A” next to the top blank value to show the label, place the field name here and save. Now the blank value at the top will have the value of the field name and be shown.
- Rhonda Hernandez says:
  
  September 18, 2018 at 1:37 pm
  
  I have everything working great except my dropdowns are not populating with the label. Is there some javascript code you could give me to make this work. Thanks alot…..