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:

placeholders.png

 

Comments

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 05: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 01: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 09: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 05, 2012 04:48 AM
User photo
Carter Gilchrist
Unbounce

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 02: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 05:23 AM
User photo
Colin Johnston

any way to make the hint text in italics?

December 01, 2012 08:49 PM
User photo
Brendan Sera-Shriar

Awesome - worked like a charm ...

December 03, 2012 10:02 AM
User photo
Ryan Engley
Unbounce

@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
  }
</style>
December 03, 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 03, 2013 02: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
Unbounce

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 02: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 03:55 PM
User photo
Ryan Engley
Unbounce

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 03: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 01: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 03, 2014 12:17 AM
User photo
Maxime Seligman

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

March 24, 2014 02: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]={}}}}})})}

});

</script>

September 19, 2014 04:03 PM