How to Add Placeholder Text Within Pardot Forms

In:

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

Related Posts

  • 08/09/2017
    How to Create Responsive Marketo Forms

    Marketo forms, by default, have set widths for many elements including all the form fields, labels and even the form itself. If you’re embedding your form in a responsive landing page, you might want to make the form fully responsive as well. With a bit of CSS, you can make your one-column and two-column Marketo forms look great on every device.

  • 24/08/2017
    12 Noteworthy Features in the Salesforce Winter ’18 Release

    The Salesforce Winter ’18 release is coming soon. So it’s time to do a recap of my favorite features coming up in the new release. This release builds artificial intelligence (AI) right into the Salesforce platform, so you can build apps that get smarter with every interaction. Here are my top 12 picks for the Winter ’18 release including dynamic branding in Communities, multi-touch campaign influence models and an enhanced out of office feature in Chatter.

  • 21/07/2017
    How to Integrate Zoom with Marketo: Tips and Best Practices

    A couple weeks ago my company decided to switch from using WebEx for webinars to Zoom for webinars. Since Zoom doesn’t have a native integration with Marketo, you need to use Marketo web hooks to get the data from Marketo to Zoom. I’m going to share with you everything I learned from integrating the two platforms to save you some headaches if you run into the same issues.

13 comment(s)
  • Nick Mexal

    10/08/2017 at 7:28 am
    Reply

    Hi Jenna, first off, this is amazing. I'm new to Pardot and this sort of thing is just not my cup of tea. Your blog has been a huge help. Question for you on this solution. Is there a way to customize the font color on the labels? I'm using a transparent field background on a dark-ish browser fill so I'll like to have the text be white rather than gray (it also matches our website design that way). Is this doable? Or did I miss something obvious? Thanks a million!

    • Jenna Molby
      to Nick Mexal

      10/08/2017 at 9:23 am
      Reply

      Hi Nick, So happy you found it helpful. Are you looking to change the font color for the placeholder text. If so, you can do this using CSS. Here's a good article explaining how to do it: https://css-tricks.com/almanac/selectors/p/placeholder/. Cheers, Jenna

  • Troy Meyer

    07/08/2017 at 2:14 pm
    Reply

    Thank you for the quick and helpful tip! Saved me from having to start from scratch and worked perfectly, allowing me to integrate my client's overall website style into the Pardot forms.

  • Maeva Traoré

    17/07/2017 at 9:11 am
    Reply

    Hello Jenna, I managed to add placeholder text within my Pardot form. The problem appears when I add it to my landing page. I don't have the placeholders anymore. Do you know how to fix that? Many thanks,

  • Katy

    17/04/2017 at 12:29 pm
    Reply

    Jenna, I thought I'd add that the jquery link needs to be added and this modified version works best for me: 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); } } var elements = document.querySelectorAll('.errors, .no-label'); Array.prototype.forEach.call(elements, function(el, i) { el.parentNode.removeChild(el); });

  • Anna

    15/02/2017 at 5:55 am
    Reply

    Hi Jenna, Thank you for this! I tried it but couldn't get it to work on drop down menus. Do I need to add anything extra?

    • Jenna Molby
      to Anna

      15/02/2017 at 11:37 am
      Reply

      Hi Anna, Placeholders don't work for dropdowns. Instead, you need to create a default value for the first value of the dropdown.

    • Jean M
      to Jenna Molby

      16/02/2017 at 7:40 am
      Reply

      Hi Jenna, how would you create a default value for the dropdown?

    • Jenna Molby
      to Jean M

      16/02/2017 at 9:27 am
      Reply

      Hi Jean, This is a bit more complicated since I don't think there's a way to add a default option in Pardot forms. Feel free to email me at [email protected] with a link to your form and I can show you how it's done using some Javascript. Thanks!

    • Terry Rourke
      to Jenna Molby

      11/05/2017 at 12:46 pm
      Reply

      I was able to add a label using the first "blank" value. Edit 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. Now the blank value at the top will have the value of the field name and be shown.

Leave A Comment

Your email address will not be published. Required fields are marked *

About Me

I am a results focused marketing automation expert, with a strong background in design and development. With a high level computer science background, I have the unique ability to design, code and understand data, while utilizing this skillset to further enhance my value and ROI in the digital marketing space.
LEARN MORE

Categories
Most Commented
Popular Posts