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’ve implemented the placeholder text and it worked, then I implemented your 2 column approach and the labels went back to the top. Any suggestion on how I can have both 2 columns and placeholder text?
Hi Tommy, Yes, you would need to remove the “p” from the placeholder script so it looks like this
“.pd-text label, .pd-select label, .pd-textarea label
Hi Jenna,
Do you know how to add a placeholder to a field but keep the label as well?
Thanks
Hi Ana, Yes, you would remove this line from the script label.parentNode.removeChild(label); and remove the CSS.
Thanks a lot saved me a lot of time reaally thank you
Thanks for all the great tips you provide! I was wondering if there is a way to display both, label and place holder text at the same time.
Hi Wade, You’re welcome! Yes, you would remove this line of code label.parentNode.removeChild(label); and then not add the CSS described in the post.
Hi Jenna,
Is it possible to disable saturday and sunday in a pardot form date field?
Also disable certain holidays of my organization?
Thanks
Hi Sheila, Yes, jQuery datepicker has the ability to disable weekends. See here: https://api.jqueryui.com/datepicker/#utility-noWeekends. There’s no automatic way to disable holidays, though.