Pardot placeholder text

Placeholder Text Pardot

The original tutorial for this is from jennamolby.com where she has explained out to update your form templates to create placeholder text in Pardot.

The JavaScript

Navigate to Marketing > Forms > Layout Templates and select the layout you want to add the placeholder text to. Paste this at the bottom of the form tab and save.

I have changed the code here so that you do not have to change any HTML in the form template visit https://jennamolby.com/how-to-add-placeholder-text-within-pardot-forms/ if you want to update the template HTML and use divs instead of the (p) tag.

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

The CSS

Add this 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 CSS at the top of the form tab and save.

p.pd-text label, p.pd-select label, p.pd-textarea label {display:none !important;} 

I use this as a reference for my own use.
The original blog post is from jennamolby.com – please visit her website for questions and great marketing resources.

Comments are closed.