Hey Vincent --
I'd recommend placing any CSS for Marketo Forms on the web property on which they exist rather than packaging them with the form itself in the Custom CSS. It's certainly easier to add them to the form's Custom CSS field and I see it all the time, but the hang up there is that if you wanted to use this form on a Marketo LP it'll be packed with web-property-specific CSS which will probably cause an issue anywhere else that it is deployed and just makes the form more one-dimensional. When helping folks move to a global form strategy, this is one of the pieces (Custom CSS on forms themselves) that we normally have to start with teasing out. Do your future-self the favor and set up the CSS on your web property if you can and leave the Custom CSS on the form blank if possible.
Here's a look at the error box related CSS on the forms2.css file that comes packaged with Marketo Forms -- you could probably use this as a starting point to arriving at your own solution.
.mktoForm .mktoError {
position: absolute;
z-index: 99;
color: #bf0000;
}
.mktoForm .mktoError .mktoErrorArrowWrap {
width: 16px;
height: 8px;
overflow: hidden;
position: absolute;
top: 0;
left: 5px;
z-index: 100;
}
.mktoForm.ie7 .mktoError .mktoErrorArrowWrap {
top: -8px;
}
.mktoForm .mktoError .mktoErrorArrow {
background-color: #e51b00;
border: 1px solid #9f1300;
border-right: none;
border-bottom: none;
display: inline-block;
height: 16px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
-ms-transform: rotate(45deg);
width: 16px;
margin-top: 5px;
}
/** These two styles are for browsers that don't support css transforms */
.mktoForm .mktoError .mktoErrorArrowWrap.mktoArrowImage {
background: transparent url("../images/callout-arrow-up-red.png") top center no-repeat;
bottom: -7px;
}
.mktoForm .mktoError .mktoErrorArrowWrap.mktoArrowImage .mktoErrorArrow {
display: none;
}
.mktoForm .mktoError .mktoErrorMsg {
display: block;
margin-top: 7px;
background-color: #e51b00;
background-image: -webkit-linear-gradient(#e51b00 43%, #ba1600 100%);
background-image: -moz-linear-gradient(#e51b00 43%, #ba1600 100%);
background-image: linear-gradient(#e51b00 43%, #ba1600 100%);
background-image: -ms-linear-gradient(#e51b00 43%, #ba1600 100%);
border: 1px solid #9f1300;
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: rgba(0,0,0,0.65) 0 2px 7px, inset #ff3c3c 0 1px 0px;
box-shadow: rgba(0,0,0,0.65) 0 2px 7px, inset #ff3c3c 0 1px 0px;
color: #f3f3f3;
font-size: 1em;
line-height: 1.2em;
max-width: 16em;
padding: 0.4em 0.6em;
text-shadow: #901100 0 -1px 0;
}
.mktoForm .mktoError .mktoErrorMsg .mktoErrorDetail {
display: block;
}
IMPORTANT NOTE: This forms2.css file will be appended to the <head> of your document when the forms2.js file runs and thus will override any CSS you've got in a <style> tag in the <head> and/or any stylesheet <link>s you've got in the <head>. To work around this, you can either use a heavier selector in the CSS or use the same selectors and add the "!important" tag to the end of the CSS. My preferred method is to add the form element selector to whatever selector is already on the forms2.css file, for example:
Marketo forms2.css selector
.mktoForm .mktoError .mktoErrorMsg { ... }
Heavier custom CSS selector
form.mktoForm .mktoError .mktoErrorMsg { ... }
Here's a look the HTML markup for an error field, there are 4 main pieces you'll want to look into editing:
1. .mktoForm .mktoError - this is the parent element that positions the element. The inline CSS is generated when this element is added to the form during validation. Try using the form.mktoForm .mktoError selector for your code instead.
2. .mktoForm .mktoError .mktoErrorArrowWrap - this is the wrapper for the little red arrow at the top of the error box. It positions the arrow in the top left corner. Try using the form.mktoForm .mktoError .mktoErrorArrowWrap selector for your code instead.
3. .mktoForm .mktoError .mktoErrorArrow - this is the actual arrow insdie the ErrorArrowWrap. It's really a box that's rotated 45deg and then clipped at the bottom by the parent wrapper. Try using the form.mktoForm .mktoError .mktoErrorArrow selector for you code instead.
4. .mktoForm .mktoError .mktoErrorMsg - this is the actual text container within the error dialog box. Try using the form.mktoForm .mktoError .mktoErrorMsg selector instead.
Please let me know if you run into any specific issues styling or placing your CSS, I've done a few laps in the past with this stuff and would have happy to have a look at a page that's not working or answer any questions you have along the way.
Thanks,
Dave
