Joe Reitz

Form CSS Tip for All Fields

Discussion created by Joe Reitz Champion on Aug 31, 2015
Latest reply on May 9, 2019 by Dave Roberts

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;


       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