In Pardot

How to Add Placeholder Text Within Pardot Forms

1 Min Read

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.

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.


Questions?

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

Author

I'm a Freelance Marketing Operations Consultant With 15 years of experience in Marketing Operations, I’ve worked with a wide range of tools including Salesforce, Marketing Cloud Account Engagement (Pardot), Marketo, and many other sales and marketing platforms. I help teams optimize their tech stacks, improve processes, and get accurate, actionable reporting. Whether it’s setting up your Marketing Automation Platform, building Salesforce reports, managing lead lifecycles, tracking attribution, or integrating your tech stack, I ensure everything is aligned to drive real results.

67 Comments

  1. Joe Reply

    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

    • Jenna Molby Post Author

      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);
      }
      }

  3. isabelle pilon Reply

    hello Jenna,

    Thank you for the bit of code, it works well. how can I change the color of the placeholder text?

    Best,
    Isabelle

    • Jenna Molby Post Author

      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;
      }

  4. Ina Reply

    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!

    • Jenna Molby Post Author

      Hi Ina, You would need to use this script instead

      var input = document.querySelector(‘.email input’);
      input.placeholder = “Type in your Email address”;

  5. Ajay Reply

    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.

Write A Comment