Unbounce Answers/FAQ/Page Builder - Pro Tips

How can I add placeholder (hint) text to form fields?

Carter Gilchrist
posted this on January 24, 2011, 12:20 PM

A number of people over on our Get Satisfaction community have asked how to add placeholder text to form fields. This is a greyed-out default value that will disappear as soon as your visitors start to type in the field.

We would love to get this feature built into Unbounce soon, but in the meantime, here's a workaround that uses a little bit of JavaScript:


Add the script

  1. Click the JavaScripts tab at the bottom left of the page builder.

  2. Paste in the following script:


Customize the field names and placeholder values

In the snippet above you'll see a list of fields at the top (first_name, last_name and email) with their associated placeholder text.

You'll need to change these to match the fields in your page that you want to give placeholders to. You can find these field names in the form builder, as shown in the following screenshot:




User photo
Keshab Dey

Why we can't access the default "value" attribute of a textbox element? This way its easier and we can set the "onfocus" and "onblur "properties

March 21, 2011, 5:01 AM
User photo
Saptarshi Nath

Doesn't work for me. I can still see the blank form, no hint in my e-mail box.  I am using the default paste from above without changing any of the script. Should I be doing something different?

November 19, 2011, 1:17 AM
User photo
CapitolCrypt L3C

Pretty sure this doesn't work for the "multi line text field" option.  Any suggestions for a tweak to make it work with these fields?

December 22, 2011, 9:39 PM
User photo
Phil Nind

Needs to be added to the header section, which is chosen when you click scripts. Theres a drop down at the top select "header" paste code and match up the labels and it should work...

March 5, 2012, 4:48 AM
User photo
Carter Gilchrist

Hey guys, sorry for such a delay on improving this. The original article/script has been updated to accomodate textareas (or multi-line text fields as they are called in the Unbounce form editor). 

April 10, 2012, 2:58 PM
User photo
Paul Cardwell

i would love for unbounce to incorporate an easier way to do this!

April 19, 2012, 12:19 PM
User photo
Ozgul Berkan

It's a very simple feature but it's still missing. Very annoying!

May 31, 2012, 5:23 AM
User photo
Colin Johnston

any way to make the hint text in italics?

December 1, 2012, 8:49 PM
User photo
Brendan Sera-Shriar

Awesome - worked like a charm ...

December 3, 2012, 10:02 AM
User photo
Ryan Engley

@Colin - you should be able to do that with some CSS.  Carter gives an example (above) for how you can change the font color and using that same code, you can add another line to make the text italic.  Try this out:

<style type="text/css">
  .lp-pom-form-field .hint {
    color:#999999 !important; /* Grey */
    font-style:italic; !important
December 3, 2012, 11:14 AM
User photo
Develon srl

hey, when i put this script, some of my requiredfield disappear..i meant, they became not required but they still marked as required.

is it clear? i hope so..

April 3, 2013, 2:21 AM
User photo
John Hopkins

If I wish really hard will this be suddenly incorporated into the UI? Because my javascript Kung Fu is pretty lousy. I can't get this to do what I want it to do. That is all.. carry on. And then there is me, wishing really hard that I was the guy that said "Awesome - worked like a charm ...".

Other than this, Unbounce is freaking awesome.

July 24, 2013, 11:50 PM
User photo
Jacquelyn Ma

Hey John - I updated your support ticket but wanted to provide an update here as well. Looks like everything was set up correctly in your page but the script was missing a comma - sometimes this happens just because the script needs to be modified to suit your form,but this should get you moving in the right direction now. If you see issues with this again, please don't hesitate to let us know! 

July 25, 2013, 2:54 PM
User photo
Sam Naus

Is this going to be implemented into Unbounce at any stage? (not to mention the placeholder actually staying visible like shown here on Litmus: https://signup.litmus.com/plus-plan

October 15, 2013, 3:55 PM
User photo
Ryan Engley

Hey Sam - we have this added to a list of potential features but right now, our page builder team is squarely focused on some high priority features like responsive design and dynamic content replacement. It will likely make it's way in to the app at some point, but I couldn't say for sure when that might be.

October 15, 2013, 3:57 PM
User photo
Finge Holden

I second Sam's request to have this as a feature. In my experience the js described here can often 'break' some other important js functionality like fancybox and more.

February 15, 2014, 1:04 AM
User photo
Finge Holden

Thanks for the tip, Mark! Still hoping for this as a built in feature. We need a solution that covers all scenarios :-)

March 3, 2014, 12:17 AM
User photo
Maxime Seligman

I was struggling is an old javascript when i see your post ! Thanks 

March 24, 2014, 2:22 PM
User photo
RPM Solutions

Works great for pre-defined fields, but I can't get it to work with any custom fields. Am I doing something wrong, or is that they way it is supposed to be.

This is what I have tried.

<script type="text/javascript">

lp.jQuery(function($) {

// Define your placeholder texts here, corresponding to Unbounce's field names
var placeholders = {
'first_name': 'First Name',
'last_name': 'Last Name',
'email': 'Email'
'phone_number': ‘Phone Number'
'address': ‘Address'
'suite_or_unit': ‘Suite or Unit'
'city': ‘City'
'state': ‘State'
'zip_code': ‘Zip Code'

// Sets the HTML5 placeholders
for(var id in placeholders){$("#"+id).attr("placeholder",placeholders[id])}

// Polyfill to add support for browsers like IE<=9
if(document.createElement("input").placeholder===undefined){$("html").attr("data-placeholder-focus","false");$.getScript("//jamesallardice.github.io/Placeholders.js/assets/js/placeholders.jquery.min.js",function(){$(function(){var e=window.module.lp.form.data.validationRules;var t=window.module.lp.form.data.validationMessages;lp.jQuery.validator.addMethod("notEqual",function(e,t,n){return this.optional(t)||$(t).attr("data-placeholder-active")!=="true"||e!==n},function(e,n){return t[$(n).attr("id")].required});for(var n in placeholders){if($("#"+n).length){if(typeof t[n].required!=="undefined"){e[n].notEqual=placeholders[n]}else{e[n]={}}}}})})}



September 19, 2014, 4:03 PM
User photo
Phillip Parisis

Doesnt work for custom fields....

October 2, 2014, 11:31 PM
User photo
Mark Wainwright

Hi RPM Solutions - you'll just need to add a comma after every line in the top 'placeholders' section, like how there's one after 'first name', 'last name' etc. Right now it's invalid JavaScript syntax which is likely stopping everything from working.

Phillip, could I ask you to send a quick email to support@unbounce.com with a link to the page you're working on? We'll be happy to help troubleshoot it with you.

October 3, 2014, 9:03 AM
User photo
Théau Ravier

It's just working fine, i love you

October 27, 2014, 3:17 PM
User photo
Frank van der Sluijs

Should be a built-in feature off course, perhaps together with some icons like an envelope and a person icon.... BUT just want to shout out that I love the support pages with answers that JUST WORK. Nice!

December 17, 2014, 11:56 AM
User photo
Quinn Omori

Hi Frank - Awesome to hear that you're finding our documentation helpful so far.

We are considering just adding hint text to the app, but there's some debate around whether it actually hinders conversions or not (here's an example of that argument), so there's been discussion internally about whether it should be a built in feature or not.

With that in mind, if you are adding hint text to your page, I would suggest using it in conjunction with regular form labels and/or testing against a form with just regular labels.

December 17, 2014, 12:39 PM