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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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.
|
1 2 3 |
<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
Hi Jenna,
I was reviewing this article as a possible work-around for a requirement I’m chasing. I have a checkbox field we’re using with a single value as a disclaimer. Unfortunately, the value field isn’t long enough to contain the full verbiage, so I wanted to see if a placeholder would work. Alternatively, do you have any ideas on other work-arounds in constructing a disclaimer “checkbox” field with a longer than usual value?
Thanks Jenna, really appreciate the super helpful articles.
Joe
Hi Joe, There might be some helpful ideas in this post: https://jennamolby.com/how-to-add-an-opt-in-message-and-privacy-policy-message-to-pardot-forms/
I want to add a placeholder to one field. how is that done?
Hi Mike, Here’s an example where only the email field will have the placeholder text
var labels = document.querySelectorAll(“.email 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);
}
}
hello Jenna,
Thank you for the bit of code, it works well. how can I change the color of the placeholder text?
Best,
Isabelle
Hi Isabelle, You’re welcome! You can change the placeholder text color by adding this CSS:
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: red;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: red;
}
Hi Jena,
how to add a placeholder text which is not a label name?
I want to have “Type in your Email address” as a placeholder on the email field.
Thanks a lot!
Hi Ina, You would need to use this script instead
var input = document.querySelector(‘.email input’);
input.placeholder = “Type in your Email address”;
The script is fine, however in my case it wasn’t working when applied to the form template as mentioned. It started working when I applied it to the ‘form’ (below form). Thanks for the script Jenna, as always very useful.