Form Error Message Placement

[Anonymous]

Hi Everyone -- I've conducted some searches on this topic and haven't been able to find an answer. I would like to determine where the 'error message' for forms is placed. Currently our error messages are appearing on the right hand side of the form (which is appearing on the iframe but off the view screen -- here's an example of what I'm talking about: www.schoolwires.com/makeoverreferral). We would like to avoid expanding the ifame window, hence why we are trying to relocate the error message.

Is there any way that we can choose where the error message gets displayed?

Thank you for your help!

[Anonymous]

I have seen the error messages moved to either above or below the field input.  You would have to include some custom CSS on your landing page to achieve this.

[Anonymous]

Thanks Kenny!
Do you have a reference you could point me towards for the custom CSS that I could share with my web designer?

[Anonymous]

We are facingi the same challenge...where could we see examples of custom CSS that would put the error messages below the field input?  Thanks!

[Anonymous]

h

[Anonymous · Accepted solution]

I have implemented this and it is supported in major browsers. Hope it helps! 
 

Moving the error messages

Depending on how you set up your form, the error messages that appear on each field may be in the wrong position. Use this CSS to move the error messages below the field. You may need to tweak the left or top amounts until it appears correct on your form.

<style type="text/css">

span.mktFormMsg

  {

    left: 0px !important;

    top: 15px !important;

  }

</style>

Source: https://community.marketo.com/MarketoArticle?id=kA050000000Kyss

[Anonymous]

wow, it's really helpful Preet!

Thanks