How to Add Placeholder Text in Gravity Forms

How to hide Gravity Form field labels when using placeholders
Mamie Mitchell

Before we dive in, I do want to note that for accessibility reasons, removing field labels is not recommended as it will make the form more difficult for users with visual impairments to use. The best practice approach is to use field labels to describe the type of information and the placeholders to provide users with an example of what that information should look like. With that said, let’s move on forward!

How to Add Placeholder Text in Gravity Forms
Mikaela Werner

If you don’t know already, Gravity Forms by far is the most beginner friendly WordPress contact form plugin out there. We use it on our WordPress Gallery site, WordPress Coupons site, and pretty much all new clients as well. Recently while working on a client’s site we had to tweak the styling of the form to match the design which required us to put placeholder text in Gravity Forms. Unfortunately and surprisingly, this feature is not built-in to Gravity Forms (Yet). While they do have an option to add placeholder text in drop down fields and post field: category, there is no option to add placeholder on input fields and textarea fields. This became a huge issue for us. We searched through the Gravity forms support area where the only solution available was a hack which didn’t even work properly. While it allowed us to put placeholder text, it had major issues. If the user just hit submit without actually filling the field, the form will validate rather than returning errors. After a good search, we ended up finding the solution. In this article, we will show you how to add placeholder text in gravity forms using jQuery and Gravity Form filters.

How to Add Placeholder Text Within Pardot Forms
Sara Romero

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’);, function(el, i) {el.parentNode.removeChild(el);});

How to Use Gravity Forms Placeholders & Hide Field Labels
Classie Dover

Hi. Was able to remove the field labels using the code snippet. Worked great but I have a gap between my fields which I’m guessing is the space where the field label would be shown if it wasn’t hidden. Is there a way to remove this gap so the fields stack on top of each other with little space between (say 5px)? I’m not great with CSS.

Be the first to comment

Leave a Reply

Your email address will not be published.