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
Thank you so much for this post… very helpful! I really appreciate the info.
Hi, Jenny. Thank you in advance for your help!
When I put the javascript in this page, my form couldn’t show error mesages properly. How can I fix it?
Hi Sun, I’ve updated the post to include the modified code which will show the error messages. Cheers, Jenna
Hey Jenna! Huge fan of your articles, they have helped me quite a lot.
I have a question: With this code, it simply puts the label into the text field. Is there a way to leave the subjects as they are, but put a specific placeholder text into the field?
For example: My team has a form on our website to request a quote. There is a field “subject” where they can write the reason they are filling the form, such as “Want quote for 2,000 licenses”. We would like this subject field to default with the text “Request a Quote”, instead of just being blank. Can this be done?
– Jay
Hi! This worked well for me, but is there a way to retain the default error messages (without showing on page load) and still use this solution?
Hi Jenna. Thank you for this. I am not a javascript expert by any means, so wanted to ask you this question before I venture off on modifying your code. The javascript above has the unfortunate consequence of hiding an entire checkbox/radio button field if there is no label (if you are displaying a checkbox with the inline value only). Any thoughts on modifying your existing code so that if no label then nothing is hidden? I have tried wrapping your code in various if statements with no success (yet). Thank you!