Having multiple custom styled Marketo 2.0 Forms | Community
Skip to main content
March 9, 2016
Question

Having multiple custom styled Marketo 2.0 Forms

  • March 9, 2016
  • 1 reply
  • 2368 views

We would like to implement multiple Marketo forms on the same page. The problem that is occurring is the styling from one Marketo form is overriding that of the other form.

On our contact page- we have a general contact form. This page also includes a single line email submit form that has custom CSS applied to it. Since this is loaded after the first form, the first form inherits all properties that have the !important attribute applied.

Is there a way to remove the inline styling that Marketo 2.0 forms generate? This way we could style the two forms separately but include them on the same page. Any insight would be appreciated. As you can see in the CSS below, the single line newsletter submit form requires us to use overrides for the button styling and row width.

/* Add your custom CSS below */

@media only screen and (min-width : 480px) {

    .mktoForm .mktoButtonWrap.mktoSimple .mktoButton {

        width: 100% !important;

           

    }

}

.mktoForm .mktoRequiredField .mktoAsterix{display: none;}

.mktoForm label {

   display:none;

}

.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 select.mktoField,

.mktoForm textarea.mktoField{

  -webkit-appearance: none;

  background-color:#fff;

  height: 48px !important;

  line-height:1.5em;

  text-align: left !important;

  font-size: 17px;

  font-weight: 300 !important;

  font-family: 'open sans' sans-serif; 

  color:#575f6b!important ;

  border:none !important; 

  border-radius: .8px !important;

  padding:10px 10px 10px 20px !important;

  box-shadow:none !important;

  margin:0px 20px 20px 0px !important;

  width:auto!important;

  min-width:250px!important;

  

}

.mktoGutter {

  width:0px !important;

    } 

.mktoForm .mktoOffset{

  width:0px !important;

}

/* remove width constraint to allow for float */

.mktoForm {

   width: auto !important

  }

/* remove left margin */

.mktoForm span {

    margin-left: 0px !important;

  }

/* align row */

.mktoFormRow {

    float: left !important;

    width: 100% !important;

   max-width:260px!important;

  min-width:250px!important;

  }

/* remove bottom margin */

.mktoFormCol {

    margin-bottom: 0px !important;

    width: 100% !important;

  max-width:260px!important;

  min-width:250px!important;

}

/* remove offset */     

.mktoOffset {

            width: 0px !important;

          }

/* remove gutter margin */

.mktoGutter {

      width:0px !important;

    }

 

 

/* Button */

 

.mktoForm .mktoButtonWrap.mktoMinimal .mktoButton {

-webkit-appearance: none !important; 

position: relative !important;

left: 0px !important;

height: 50px !important;

background: #ffffff !important;

border-radius: 3px;

-webkit-box-shadow: none !important;

box-shadow: none !important;

color: #F68F20   !important;

font-size:20px !important;

font-family: "open sans", sans-serif !important;    

font-weight: 500 !important; 

padding: 8px 0 9px;

text-align: center;

text-shadow: none !important;

letter-spacing: .8px !important;

float:left !important;

margin: 0px 0px 0px 0px!important; 

border-radius: 2px !important;

border:2px !important; 

border: 2px solid #ffffff !important;

border-color: #ffffff !important; 

width:100%!important;   

}

.mktoButtonRow {

  width: 100% !important;

  max-width: 250px !important;

}

.mktoButtonWrap {

  margin-left: 0px !important;

  width: 100% !important;

  float:left !important;

  max-width: 250px !important;

 

}

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

SanfordWhiteman
Level 10
March 9, 2016

The reason this is happening is you made your CSS too generic.  If you put the ID of an individual form in the selector (all forms have an ID) it will only apply to that form.  #mktoForm_999 blah > blah + blah {}

March 15, 2016

Pardon my CSS selector ignorance...

What is the proper syntax to target just the .mktoForm label of a particular form?

#mktoForm_1718 > .mktoForm > label {

   display:none;

}

That doesn't seem to be doing the trick and I figure this is a very simple fix. Appreciate the help!

March 15, 2016

#mktoForm_1718.mktoForm label {

   display:none;

}

Seems to work.