Edit: Forms 2.0 came out! And this is now native functionality. The new attribute to change Placeholder in the form 2.0 editor is “Hint.” See it in action on our updated responsive landing page templates.
Oooohhh, pretty placeholders…
Why is this Marketo infield label solution the best?
- It’s scalable. There are mostly two lines of code that can be placed in every single template, and then there is (nearly) no maintenance work required. Add a new form field? Same code. Change forms? Same code. Change a field’s title? Same code.
- It uses native Marketo functionality (the “Instructions” field) to create the placeholder text. That means it’s rather intuitive, and non-coders will be able to edit the placeholder text down the line.
- It maintains Marketo auto-fill values. Because HTML5 placeholders are separate than setting field values, you don’t have to worry about overwriting any of that convenient information. Returning visitors still have their information filled instead of having to re-type anything.
How it’s done, technical side:
The magic secret of how to make these Marketo in-field labels is that the “title” attribute on a 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.
After you have all of these “Instructions” filled with your desired placeholder text, it’s time to place the code onto your pages with forms! There will be two snippets: the first adds the “placeholder” attribute to your fields, and the second makes “placeholder” work in all browsers (since it’s relatively new code, older browsers don’t have native support).
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) :
The next snippet is where you can 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:
Save your pages and templates, approve them, and wha-la! Working placeholders for your fields. As you can see in the example image I included at the top, some of our designs hide the label altogether. Feel free to do this with a few lines of CSS if you’d like.
Well now you know how to make HTML5 placeholders in Marketo… how about putting those into our free responsive Marketo landing page template?