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 UnthankSEO/Web Specialist
Yesler
.png)