Form CSS Tip for All Fields

[Joe_Reitz]

So I feel like a bit of a doofus this morning.

Well... more than normal, I guess.

Previously, if I made CSS changes to a Marketo form template, I would specify the fields one by one. So First Name would have it's own CSS call out, Last Name, and so on. I formatted all these fields to be the same, with the only exception being the occasionally used "form comments" field. Whenever I needed to use a new field, I would have to add styling to the CSS.

This probably isn't news to a lot of you, but here's a much better way to do it:

.mktoForm input[type=text],

.mktoForm input[type=url],

.mktoForm input[type=tel],

.mktoForm input[type=email],

.mktoForm input[type=number],

.mktoForm input[type=date],

.mktoForm select.mktoField,

.mktoForm textarea.mktoField{

       width:280px !important;

       height:30px;

       padding:2px 0px 2px 10px !important;

       background-position:5px 5px;

       border: 1px solid #dedede;

       background-color: #ffffff;

       border-radius: 5px;

}

This catches all the various field types without having to specify CSS for individual fields. Replace the italicized text with your own CSS, and you're all set. You can still customize one-off fields, like comments (I use the same CSS, just make the box taller and wider).

... Which leads me to one of the more useful pieces of life advice I've ever received: "If it doesn't look cool, you're probably doing it wrong."

Happy Monday, everyone

[SanfordWhiteman]

Sure, though if you're generalizing, not sure why you wouldn't just use .mktoForm INPUT.  You can even do all but one special type:

  .mktoForm INPUT:not([type=password])

[Joe_Reitz]

Fair point– it's just my personal preference. I'm not a web designer, so by the time a need arises to customize something, having all the different parameters there for easy reference makes me have to think less and make the change faster.

[SanfordWhiteman]

But don't forget the other INPUT types which you can add to a Marketo form even if they don't show up in the builder...

[Anonymous]

I would like to know those types

[SanfordWhiteman]

Stuff like this​. Browser support varies, of course.

[Dave_Roberts]

I like to use the form.mktoForm... {...} selector b/c it's "more specific" (adds the 'form' element to the selector) and will override styles without the 'form' element in the selector (which is how the native css is generated). 

Also, don't forget about my homies, the checkbox and radio fields:

form.mktoForm input[type=checkbox],

form.mktoForm input[type=radio] {

...

}

There is at least one more that I've never used in a professional project but took some time to work out in my stylesheets for the "slider" (range) field type:

form.mktoForm input[type=range] {...}

*Note: there are a bunch of add'l browser-specific pieces needed to completely style this. I ended up with about as many lines for the range field styles as I did for the rest of the form styles.

and while we're at it, here's a few lines that I use to style the buttons on a form - this may be heavy (more than needed) in the selector, but it's what I've gotten used to [you could probably get away with losing the .mktoButtonRow and/or .mktoButtonWrap parts of the selector]:

default state:

form.mktoForm .mktoButtonRow .mktoButtonWrap button.mktoButton {...}

active state:

form.mktoForm .mktoButtonRow .mktoButtonWrap button.mktoButton:hover,
form.mktoForm .mktoButtonRow .mktoButtonWrap button.mktoButton:focus,
form.mktoForm .mktoButtonRow .mktoButtonWrap button.mktoButton:active {...}

[Dave_Roberts]

@Joe - the reason you've got to add new rules for things like the textarea field (comments field) is that the height is getting set in the code to 30px and the height of the textarea field is set by the row="" attribute that gets put on the input based on the user selection in the form interface. You can either manually set that each time, or you can setup the textarea field rules separately and exclude the height rule so Marketo's CSS can style the height for that. 

It'd look the same as what you posted, but the textarea rule would fall off that list and get its own rule like this:

.mktoForm input[type=text],
.mktoForm input[type=url],
.mktoForm input[type=tel],
.mktoForm input[type=email],
.mktoForm input[type=number],
.mktoForm input[type=date],
.mktoForm select.mktoField {
       width:280px !important;
       height:30px;
       padding:2px 0px 2px 10px !important;
       background-position:5px 5px;
       border: 1px solid #dedede;
       background-color: #ffffff;
       border-radius: 5px;
}

.mktoForm textarea.mktoField{
       width:280px !important;
       height:auto; /*----- THIS PIECE CHANGES ----*/
       padding:2px 0px 2px 10px !important;
       background-position:5px 5px;
       border: 1px solid #dedede;
       background-color: #ffffff;
       border-radius: 5px;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Here's what the default styles look like for the height of the textarea field based on the number of rows you've shown using the handles in the form editor: