I’m working on moving the alerts for invalidation to a div directly above the contact form. A current working example can be seen here: https://www.biosimilarfacts.com/contact-us/index.aspx
I’m using WordPress Contact Form 7 plugin and the alerts are currently being displayed directly under the field for what is being returned as invalid. I need to group all of them at the same place above the form and preferably have a soft scroll to those error messages.
Thanks
You can use the
[response]tag in your form to change the location of the response message.For example:
You can find more information here: http://contactform7.com/locating-response-message-box-anywhere/
jQuery(‘.wpcf7-not-valid-tip’).insertBefore(‘#form-id’);
You can style your error messages by targeting their css classes like .wpcf7-not-valid, .wpcf7-response-output, wpcf7-validation-errors. With a little jQuery you can move them around.
For more information: http://fellowtuts.com/wordpress/styling-contact-form-7-validation-with-css-and-border/