Customize the design of the error message of form

[VincentFeruglio]

Hello,

Could we modify the design of the error message when a field is required in a form?

For instance, instead of having a text in white in a red bubble like in the screenshot, have just under the field a red text on a line with an exclamation mark icon.

I've found this post: https://nation.marketo.com/t5/product-discussions/form-error-message-placement/m-p/144388#M99204 that informs we can add some CSS.

For a form embedded on a non-Marketo landing page, should we add the CSS in the CSS of the form settings in Marketo or in the code of the page of our CMS (Adobe Experience Manager)?

I tried both using the code found in the post (just to test) but both don't work.

Thank you.

Regards,

Vincent

[torijeffers]

Hi Vincent,

The code in the post linked is only looking to adjust the placement of the error code, not change what it looks like. It may still be possible with CSS but it's likely going to be more complex than the example given. Did you paste the code as it was exactly in the other post or did you update it for your needs? If you did could you provide the code? 

[VincentFeruglio]

Hi @torijeffers ,

Thank you for your reply.

I just copy-pasted the code provided in the other post for testing purpose even if it doesn't meet my needs.

I just wanted to test if it change someting.

Thus, is in the CSS of Marketo form where the code must be implemented?

[Dave_Roberts · Accepted solution]

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

[VincentFeruglio]

Thank you so much @Dave_Roberts for your detailed reply!

I'll share with a developer these information and check what he can perform, maybe we will simplify the business need.

Kind Regards,

Vincent