Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.


Here I have a form. I am using Contact Form 7 Plugin.

I have modified the CSS to suit my Design.

But When the form validates my design is ruined

How can I handle validation?

I just want to highlight the form border or background when its invalid.

share|improve this question

closed as off-topic by Pieter Goosen, Johannes Pille, toscho Jul 23 at 17:13

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

If its that critical just write a form yourself so you have total control, all cf7 does is validate and email. –  Andrew Bartel Apr 26 '13 at 6:26

1 Answer 1

In the first step: I think your theme misses wp_head() and/or wp_footer(). This means the cf7 is not able to load the Javascript for the 'pretty' ajax form submit.

If you checked that you have wp_head and wp_footer in your themes header.php and footer.php you can find additional suggestions for getting it working here: http://contactform7.com/why-isnt-my-ajax-contact-form-working-correctly/

Either way, the ajax submit looks more fancy and is always good to use (clearly gives a better user experience) but your problem is CSS related anyway. So you might want to fix your CSS for the users with disabled JS anyway.

You just have to override the .wpcf7-not-valid class with your own custom css styles.

Additionally your #footer overlaps with the submit button of the form. I was not able to submit the form until I removed the footer div from the DOM (Firefox 20 under Ubuntu).

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.