Hi Jason, the only option style-wise I set in the actual form was the width of each field. The rest of the styling was done by adding this into the Custom CSS section. IE7 completely ignores the styling.
/* Add your custom CSS below */
form.mktoForm {
width: 100% !important;
}
.mktoForm .mktoOffset, .mktoForm .mktoGutter {
display: none;
}
.mktoForm .mktoFormCol {
min-height: auto;
}
.mktoForm fieldset legend, .mktoForm label {
display: none;
}
.mktoForm input[type="text"], .mktoForm input[type="email"], .mktoForm input[type="tel"] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #cccccc;
padding:5px 10px;
color:#666666;
font-size:13px;
font-family:'Avenir LT W01 45 Book','Lucida Grande',Arial,Verdana,helvetica,sans-serif;
}
.mktoForm select.mktoField {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 5px 5px 5px 5px;
padding: 4px 5px 4px 7px;
color: #666666;
font-family: 'Avenir LT W01 45 Book','Lucida Grande',Arial,Verdana,helvetica,sans-serif;
font-size: 13px;
height: 28px;
}
#FirstName {
margin-right: 6px !important;
}
#Email {
margin-right: 6px !important;
}
#City {
margin-right: 6px !important;
}
#State {
margin-right: 6px !important;
}
#PostalCode {
}
#Lead_Source_Detail__c {
background: url("http://www.astrumsolar.com/images/uploads/GetStarted/Form_Arrow.png") no-repeat #ffffff 0 3px;
padding-left: 30px;
}
.mktoForm input.mktoInvalid:focus, .mktoForm select.mktoInvalid:focus{
border: 1px solid #ff0000;
}
.mktoForm input.mktoInvalid, .mktoForm select.mktoInvalid {
border: 1px solid #ff0000;
}
.mktoForm .mktoRadioList > label, .mktoForm .mktoCheckboxList > label {
color: #666666;
font-family: 'Avenir LT W01 65 Medium','Lucida Grande',Arial,Verdana,helvetica,sans-serif;
font-size: 11px;
line-height: 16px;
margin-top: 0;
text-align: left;
}
.mktoForm fieldset {
border: 0;
margin: 0 !important;
padding: 0 !important;
}
.mktoForm .mktoButtonWrap {
margin-left: 0px !important;
}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton {
background: url("http://www.astrumsolar.com/images/uploads/GetStarted/Form_FreeSolarConsultation_Button.png") no-repeat !important;
display: block;
float: left;
height:45px;
line-height:45px;
padding:0;
margin-top:0px;
margin-bottom: 15px;
margin-left: 0px;
width:273px;
border:0 !important;
text-indent: -9999px;
}
input::-webkit-input-placeholder {
color: #666666;
}
input:focus::-webkit-input-placeholder {
color: #CCCCCC;
}
/* Firefox < 19 */
input:-moz-placeholder {
color: #666666;
}
input:focus:-moz-placeholder {
color: #CCCCCC;
}
/* Firefox > 19 */
input::-moz-placeholder {
color: #666666;
}
input:focus::-moz-placeholder {
color: #CCCCCC;
}
/* Internet Explorer 10 */
input:-ms-input-placeholder {
color: #666666;
}
input:focus:-ms-input-placeholder {
color: #CCCCCC;
}
And my EMBED code (I took out our personal info):
<script src="//app-sj02.marketo.com/js/forms2/js/forms2.js"></script>
<form id="OURFORMCODE"></form>
<script>MktoForms2.loadForm("//app-sj02.marketo.com", "OURFORMCODE", OURFORMCODE);</script>