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. Kurt Reply

    Hey Jenna, do you have any solutions for populating a default value for the drop-down menu? It seems there is no option to display a value for the drop down menu in Pardot.

    • Jenna Molby Post Author

      Hi Kurt, yes you can populate a default value for a drop-down field by editing 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.

  2. Muhammad Ali Fayyaz Reply

    Hi Jenna,
    Your posts on Pardot helped me a lot. I wanted to contribute on this post in case some one wants to add default fields for dropdown. Apparently pardot make removes the value and text for first entry of dropdown element. So adding to your above code we can add following lines as well
    if(label.nextElementSibling.tagName === ‘SELECT’) {
    label.nextElementSibling.options[0] = new Option(text + ” (Please Select)”, “”, true, true)
    }
    after
    label.nextElementSibling.setAttribute(“placeholder”, text);

  4. Kelley Reply

    Hi Jenna,
    Thank you for this snippet, it is exactly what I was looking for. The only thing now is I can’t figure out how to apply css for an error. Ideally, I’d like to be able to have the placeholder text and input field for required fields a different color if user tries to submit the form without completing the form field. I’ve been working on this one landing page for 2 days now and it’s really my last hangup. Can you help me here? THANK YOU!

    • Jenna Molby Post Author

      Hi Kelley, Glad it worked for you. Adding this CSS will change the styles of the error messages. It will outline the inputs in red and change the placeholder text to red as well. p.error input[type=text]{
      border-color:red !important;
      }
      p.error input[type=text]::-webkit-input-placeholder {
      color: red;
      }
      p.error input[type=text]::-moz-placeholder {
      color: red;
      }
      p.error input[type=text]:-ms-input-placeholder {
      color: red;
      }
      p.error input[type=text]:-moz-placeholder {
      color: red;
      }

    • Kelley

      Perfect. You are lifesaver! Thank you for responding so fast. Please keep these Pardot secrets and snippets coming. I haven’t found any other resources out there as quality as yours.

  5. Jason Church Reply

    Hi Jenna,

    I initially had this working no problem, however I’ve since added a checkbox to the form which seems to break the javascript – is there a way to incorprate checkbox field types in the script?

    Any help much appreciated!

    J

    • Jenna Molby Post Author

      Hi Jason, You can try using jQuery for this to only target text fields. Heres’ what it looks like: $("label").each(function() {
      var label = $(this);
      var placeholder = label.text();
      label.closest(".gfield").find("input[type=text]").attr("placeholder", placeholder).val("").focus().blur();
      });

Write A Comment