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;
}
.png)