Skip to main content
A
Anonymous
September 12, 2013
Question

Customizing text in a form

  • September 12, 2013
  • 5 replies
  • 2313 views
We are trying to italicize text in a form. Is there JavaScript code that we can drop on the landing page that would take certain text on the form and italicize it?

Also, is there a way to view the HTML of a form? 
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

5 replies

Kenny_Elkington
Adobe Employee
Kenny_ElkingtonAdobe Employee
Adobe Employee
September 12, 2013
Hey Amber,

You can do this with some simple CSS.  You can style the mktField class with {font-style:italic} to set your field labels to italic.
A
Anonymous
September 12, 2013
You may review the HTML of a form by approving the landing page that the form lives on.  

When viewing said landing page in your web browser, take a look at the source.  

Here's a great community article that may help you better understand how to retrieve the HTML of a form in order to put it onto a non-Marketo page: http://community.marketo.com/MarketoArticle?id=kA050000000KyqgCAC 

Hope that helps.
A
Anonymous
September 12, 2013
There is no method to view the HTML of a form on its own.
You can add the form to a blank landing page and copy the entire block defining the form.

Fonts, size and colours can be easily changed through a custom CSS. The following example sets Century Gothic as default font. Please keep in mind the double quotes are relevant.

Please note the HTML block needs to be placed *after* the form otherwise it will have no effect. 
 
Other attributes can be added. Examples: 
 
color: #781351; 
background: #fee3ad; 
border: 1px solid #781351
 
 
 
<style> 
form.lpeRegForm ul { 
font-family:"Century Gothic",Arial, Helvetica, sans-serif; 
font-size: 12px; 
} 
form.lpeRegForm ul select { 
font-family:"Century Gothic",Arial, Helvetica, sans-serif; 
font-size: 12px; 
} 
form.lpeRegForm ul textarea { 
font-family:"Century Gothic",Arial, Helvetica, sans-serif; 
font-size: 12px; 
} 
form.lpeRegForm ul input[type="text"] { 
font-family:"Century Gothic",Arial, Helvetica, sans-serif; 
font-size: 12px; 
} 
</style> 

 
A
Anonymous
September 12, 2013
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 Unthank
Marketing Operations Specialist
Yesler


A
Anonymous
September 13, 2013
Thank you for all of this advice!

We are interested in just italicizing certain words in our field labels. I think this is a great start. I am going to pass this off to our development team and see if they can take it from here!
Terms & ConditionsAccessibility statement

Loading footer...