Adding Placeholder Text to a Form Field | Community
Skip to main content
A
Anonymous
July 2, 2013
Question

Adding Placeholder Text to a Form Field

  • July 2, 2013
  • 8 replies
  • 5325 views
I'm attempting to style a form on a custom landing page that I'm in the process of building. Instead of lables, I would like to use placeholder text to label the various input fields. Is that possible when using one of Marketo's forms? I only see the option to add an initial value.
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

8 replies

A
Anonymous
July 2, 2013
Laura:

I'm in the process of doing the same thing! This requires some Javascript knowledge and nuance. If anyone already has the code written, I'm sure the community would love to see it. 

If I get it figured out before someone posts, I'll keep you updated.


Best,
Edward Unthank
SEO/Web Specialist
Yesler
A
Anonymous
July 2, 2013
Yeah, in theory you should just be able to declare the placeholder property on the input field without a complicated Javascript fix. But I'm not sure if Marketo's form building interface allows for that.

Like so:
<input autofocuc="autofocus" type="text" name="firstname" id="firstname" placeholder="First Name"></input>
A
Anonymous
July 2, 2013
Of course, that's part of the argument for Forms 2.0. But even the "placeholder" attribute isn't supported by many previous browsers, so this needs a Javascript polyfill even with "placeholder" as inherent Marketo functionality.

Best,
Edward Unthank
A
Anonymous
July 2, 2013
I am not sure if you can pull Javascript from our page, but our webdesigner was able to make the intial value disapear when the end user clicked in the field. Check out the last field on our demo page.

<https://www.networkinstruments.com/resources/download-demos/index.php>

Hope this helps,
Taylor
A
Anonymous
July 2, 2013
There was a discussion a couple weeks back in regards to this, I posted a couple blog articles that are very recent and talk about using infield labels and what to watch out for.  I also included some sample code in there as well.

https://community.marketo.com/MarketoDiscussionDetail?id=90650000000PdCGAA0
A
Anonymous
July 2, 2013

Thanks, Kenny, that was pretty helpful! I used your work as a jumping-off point for a slightly different solution specific to Marketo and getting to use existing Javascript codes.

How it's done, technical side:

Set the "title" of the input field, then add a new "placeholder" attribute. Include Javascript for backward-compatible "placeholder" support for older browsers.

How this is different:

Uses HTML5 "placeholder" attribute instead of changing the value of the form. If someone hits "submit" on the form, it will not submit the placeholder values. 

Original setup and everything after is automated. Going through and adding jQuery lines by hand would be problematic if you plan to use different form fields or add fields in the future, requiring you to change each of your templates every time.

How to do it, the Marketo-specific way:

The "title" attribute on an input is actually the field's "Instructions" in the form editor. You can change the "instructions" to what you want the placeholder text to be. For our forms, these are pretty obvious: First Name*, Last Name*, Company, etc.

Copy and paste this into your landing page or template (right before the </head> tag for templates, or in the "Custom HEAD HTML" for individual landing pages) :

<script>
 
// use no conflict mode for jQuery
var $ = jQuery.noConflict();
 
$(document).ready(function() {
 
// loop through inputs and add placeholders from input titles
$('input').each(function() {
$(this).attr("placeholder", ($(this).prop('title')) );
});
 
});
</script>

Insert your desired placeholder polyfill. There are many placeholder polyfills that already exist, each with its own pros and cons. I chose to use this one (because it uses <span> instead of changing the actual value). If you want to use this version, copy and paste this code into your landing page or template:

<script>
/*! jquery.placeholder.js | https://github.com/diy/jquery-placeholder | Apache License (v2) */
(function(f){var j="placeholder"in document.createElement("input"),h="-moz-box-sizing -webkit-box-sizing box-sizing padding-top padding-right padding-bottom padding-left margin-top margin-right margin-bottom margin-left border-top-width border-right-width border-bottom-width border-left-width line-height font-size font-family width height top left right bottom".split(" ");f.fn.placeholder=function(g){var k=this;g=g||{};if(j&&!g.force)return this;window.setTimeout(function(){k.each(function(){var e=
this.tagName.toLowerCase();if("input"===e||"textarea"===e)a:{var b,d,a=f(this),c;try{b=a[0].getAttributeNode("placeholder");if(!b)break a;d=a[0].getAttribute("placeholder");if(!d||!d.length)break a;a[0].setAttribute("placeholder","");a.data("placeholder",d)}catch(g){break a}e={};for(b=0;b<h.length;b++)e[h[b]]=a.css(h[b]);b=parseInt(a.css("z-index"),10);if(isNaN(b)||!b)b=1;c=f("<span>").addClass("placeholder").html(d);c.css(e);c.css({cursor:a.css("cursor")||"text",display:"block",position:"absolute",
overflow:"hidden","z-index":b+1,background:"none","border-top-style":"solid","border-right-style":"solid","border-bottom-style":"solid","border-left-style":"solid","border-top-color":"transparent","border-right-color":"transparent","border-bottom-color":"transparent","border-left-color":"transparent"});c.insertBefore(a);e=a.offset().top-c.offset().top;d=parseInt(c.css("margin-top"));isNaN(d)&&(d=0);c.css("margin-top",d+e);c.on("mousedown",function(){a.is(":enabled")&&window.setTimeout(function(){a.trigger("focus")},
0)});a.on("focus.placeholder",function(){c.hide()});a.on("blur.placeholder",function(){c.toggle(!f.trim(a.val()).length)});a[0].onpropertychange=function(){"value"===event.propertyName&&a.trigger("focus.placeholder")};a.trigger("blur.placeholder")}})},0);return this}})(jQuery);
</script>


Placeholder Javascript has been written a million times, and I trust other people to have created better solutions than I could do from scratch. This way utilizes Marketo native functionality and then adds two lines of code to make it work for more intense placeholder polyfills.


Best,
Edward Unthank
SEO/Web Specialist
Yesler
A
Anonymous
July 3, 2013
Be sure to do some nice cross browser testing, the point of the polyfill is to fix IE & other older browsers. Just make sure it really works if you remove your labels. I have a placeholder in my search box, works fine in webkit browsers, IE ignores it. Just make sure that someone can't arrive at your form and have no clue which data you want in each field.
A
Anonymous
January 10, 2014
I can't seem to get this javascript to work from for IE 9, 8, or 7. Does anyone know if there is anything that I can do to make the above javascript compatible with those browsers?
Terms & ConditionsAccessibility statement

Loading footer...