Hi Amber:
If I understand your request correctly, CSS will solve the problem—you don't even need JavaScript! (As a general web developer rule: if it's possible to do with pure CSS instead of JavaScript, don't use JavaScript.)
If you're trying to make the labels italic, you can add this code:
<style>label{font-style:italic}</style>
If you're trying to make the inputs (what the user types) italicized, you can add this code:
<style>input{font-style:italic}</style>
If you're just trying to make the submit button italicized, you can add this code:
<style>#mktFrmSubmit{font:style:italic}</style>
Where you put this CSS is another question. The commonly-accepted Marketo method of dragging in an HTML element onto a landing page and putting JavaScript/CSS in it is less-than-optimal in web development. Styling should go in the <head> section of a page, not in the <body>.
Where you place this CSS is another question. Here are your options:1. Drag on an HTML element and put the CSS in it (suboptimal).2. Put the styling in the CUSTOM HEAD HTML section of a landing page. This is a clean approach and allows some flexibility, but becomes a pain if you're using the same CSS for many landing pages. Also slightly less optimal because you'll have to open and close another <style> script instead of just adding onto the existing one in the landing page template.
2. Put the styling in the <head> along with the rest of the CSS. This is the cleanest approach, but it applies to all of the forms you have with that template, so in some cases it might not be what you need.
4. Put in a token in the <head> with no default option. Something like {{my.customCSS}}. Then on the program level, you can define a token at the program or campaign-folder level to apply specifically to the landing pages contained. I throw this in to all of our landing page templates because it's a nice backup in case it proves necessary later on. Tokens with CSS are way easier to edit and examine the results too, in my opinion. When the token is undefined, it doesn't end up on the final page.
On a somewhat similar note: If you're looking to only italicize certain words a user types (e.g., if a user types your company name), that will require JavaScript. If you're looking to do your own form validation on the page (e.g., italicizing an email field if it's not a valid email address), you'll need JavaScript. Most fancy Marketo form stylings can be done using some creative CSS and the existing code Marketo produces (or in combination with JavaScript, such as
to make in-field/placeholder labels). I have the styling CSS for Marketo forms in
this template I made, also available in LESS (kind of a short-hand for CSS) specifically containing Marketo stylings, all in that template.
Anything I missed in answering your question?
🙂Best,
Edward UnthankMarketing Operations Specialist
Yesler
.png)