CODEWITHSUNDEEP
wordpresscontact-form-7
Adam Barrett
Adam Barrett

Reputation: 41

Move alert for Contact Form 7 to top of form WordPress

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

Upvotes: 4

Views: 18334

Answers (2)

Cristian Oana
Cristian Oana

Reputation: 1718

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/

Upvotes: 0

vicente
vicente

Reputation: 2633

You can use the [response] tag in your form to change the location of the response message.

For example:

[response]

<p>Your Name (required)<br />
    [text* your-name] </p>

<p>Your Email (required)<br />
    [email* your-email] </p>

<p>Subject<br />
    [text your-subject] </p>

<p>Your Message<br />
    [textarea your-message] </p>

<p>[submit "Send"]</p>

You can find more information here: http://contactform7.com/locating-response-message-box-anywhere/

Upvotes: 28

Related Questions