Let’s say you want to change the hint text color (also referred to as the placeholder text) in Forms 2.0. This is possible via custom CSS. For example, in the screenshot below I made the hint text in this Marketo Form blue.
There are three options on how to do this depending on how you are using Marketo Forms.
Option 1: If you are embedding a Marketo form, add the CSS below directly to your main CSS file.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
::-webkit-input-placeholder { color: blue; } ::-moz-placeholder { color: blue; } :-ms-input-placeholder { color: blue; } :-moz-placeholder { color: blue; } |
Option 2: When you are embedding a Marketo form, you can add the CSS directly on the page between <style></style> tags in the <head> section.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> ::-webkit-input-placeholder { color: blue; } ::-moz-placeholder { color: blue; } :-ms-input-placeholder { color: blue; } :-moz-placeholder { color: blue; } </style> |
Option 3: If you are using a Marketo form on a Marketo landing page, you can add this custom CSS through the Marketo UI.
Find the landing page in the Marketo navigation tree. Then click Edit Draft.
Click Edit Page Meta Tags.
Add the CSS below to the Custom HEAD HTML section. The <style></style> tags should be included.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> ::-webkit-input-placeholder { color: blue; } ::-moz-placeholder { color: blue; } :-ms-input-placeholder { color: blue; } :-moz-placeholder { color: blue; } </style> |
Click Approve Draft.
When you now visit the Marketo landing page, the hint text will be the color you defined in the CSS.
For more information about Marketo Forms, please visit the documentation.