Re: Form – Custom CSS Question

Joe_Reitz
Level 10 - Champion Alumni

Form – Custom CSS Question

Hi all,

This is probably going to seem like a fairly obvious question to anyone with more CSS experience... Essentially, I'm wondering if there is a general CSS class I can use with Marketo that makes all my picklists look the same. Currently, my form looks like this:

form-select.png

I want that second drop down to look like the first. I've tried just using "Select" as a CSS parameter, but that doesn't seem to change anything. What I've found in working with Marketo forms is that the CSS seems to be tied to the Field Value. For example, Industry is a mapped field from SFDC into Marketo, while the Sub-Industry field, Industry (L), is not. I believe that's the reason the second drop-down styling doesn't look like the first.

One last side note: this is a progressive form. I'm not sure if that could be affecting anything... the idea is that if the user selects "Healthcare," the "sub-industry" field pops up. We do this so we can gain more information for our database and learn what type of facility they have (i.e., hospital, outpatient facility, assisted care/senior living, etc.) so we can ultimately plug them into the right engagement program.

***

Here is the current CSS if it helps:

***

input{margin-bottom:5px !important}

#FirstName{

  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;

}

input:-webkit-autofill, input:-webkit-autofill:focus {

    -webkit-box-shadow: 0 0 0px 1000px white inset;

}

#Company{

  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;

}

#PostalCode{

  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;

}

#LastName{

  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;

}

#Title{

  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;

}

#Email{

  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;

}

#Phone{

  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;

}

#Select{

  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;

}

#City{

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;

}

#Address{

  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;

}

#Country{

  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;

}

#State{

  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;

}

#SystemType{

  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;

}

#LeadSource{

  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;

}

#referringSource{

  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;

}

#Industry{

  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;

}

#CompanyType{

  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;

}

#CurrentFormComments{

  width:480px !important;

  height:150px;

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

  background-position:5px 5px;

  border: 1px solid #dedede;

  background-color: #ffffff;

    border-radius: 5px;

}

button{

background-color:#0098c3; width:240px;

}

button:hover{

background-color:#2faeff !important;

}

.mktoButton{align:right;width:240px;background-color:#0098c3 ;background-image:none !important;text-shadow:1px 1px #000000 !important;font-size:14px !important;}

.mktoButtonRow > span{margin-left:10px;}

::-webkit-input-placeholder {

    color:    #c5c5c5;

font-size:16px;

}

:-moz-placeholder {

    color:    #c5c5c5;

font-size:16px;

}

::-moz-placeholder {

    color:    #c5c5c5;

font-size:16px;

}

::-ms-input-placeholder {

    color:    #c5c5c5;

font-size:16px;

}

:-ms-input-placeholder{

color:    #c5c5c5;

font-size:16px;

}

.placeholder{top:10px !important;font-size:16px !important;}

.mktoForm input[type=“text”], .mktoForm input[type=“url”], .mktoForm input[type=“email”], .mktoForm input[type=“tel”], .mktoForm input[type=“number”], .mktoForm input[type=“date”], .mktoForm textarea.mktoField, .mktoForm select.mktoField {

    padding: 2px 17px;

}

.mktoAsterix{visibility:hidden !important;}

.mktoOffset{width:10px !important;}

If it doesn't look cool, you're probably doing it wrong.
17 REPLIES 17
SanfordWhiteman
Level 10 - Community Moderator

Re: Form – Custom CSS Question

One link to your active URL is worth hundreds of lines of pasted CSS.

Joe_Reitz
Level 10 - Champion Alumni

Re: Form – Custom CSS Question

I didn't link to the form because it was easier to paste in the image of the visibility rule in action, showcasing the issue more clearly. The CSS is there just for extra transparency for anyone who might know how to help.

If it doesn't look cool, you're probably doing it wrong.
SanfordWhiteman
Level 10 - Community Moderator

Re: Form – Custom CSS Question

Well, I'll fix it if you post the URL. I won't bother pasting the CSS and building my own test page. So it's up to you....

Anonymous
Not applicable

Re: Form – Custom CSS Question

Sanford (or anyone else willing!),

I'm trying to make the short little "select" dropdown field look more like the other fields on the Marketo form on this sample page - Contact copy | DH2i

Mostly, I want to make it taller.

Any ideas of how to tweak my form's custom CSS to make this happen?


Thank you!

SanfordWhiteman
Level 10 - Community Moderator

Re: Form – Custom CSS Question

You have a custom CSS rule, but it doesn't include the SELECT.  Should be:

input.mktoField, select.mktoField {

    font-size: 21px !important;

    height: 2em !important;

    padding-left: 10px !important;

}

(Also, you should start a new Community thread for new stuff, but hey, if you want to mark this one correct...)

Anonymous
Not applicable

Re: Form – Custom CSS Question

Thanks, Sanford! I will try this out.

And thanks for the heads up about starting a new thread. I'll do that next time. Appreciate your response.

Anonymous
Not applicable

Re: Form – Custom CSS Question

Maybe I misunderstood. I added just this to the custom CSS that I already had on the line that started with input.mktoField:

select.mktoField

I left everything else the same. It didn't seem to change my dropdown box and it did change my font: Contact copy | DH2i

What did I do wrong?

SanfordWhiteman
Level 10 - Community Moderator

Re: Form – Custom CSS Question

You should to explain what you expect a little more, and what browsers you're using to test.

Here's Chrome 40 with your original CSS:

pastedImage_0.png

And with the adjusted CSS:

pastedImage_1.png

You need to explain how that isn't what you described!

Anonymous
Not applicable

Re: Form – Custom CSS Question

Oh wow - that looks great! That is exactly what I want. It doesn't look like that on my computer. Here is my updated CSS on Chrome 44 (on a Mac):

Screen Shot 2015-08-28 at 4.35.34 PM.png

So your version above looks GREAT! I'll just need to look again at why mine isn't appearing like that.