Contact Form 7 does not work with validation errors

Trentors · July 2014

When validation fails, CF7 will scroll up to the top field with the validation error. This does not work with the Be Theme.

I does not work on your own site as well:

http://themes.muffingroup.com/betheme/pages/contact

It does partially work with IE but not Firefox and Chrome. It may due to your Jquery libs conflicting with CF7's.

Albert · July 2014

We already tested page you sent above in Firefox and Chrome and all works fine. If there is validation error then everything stay on it`s own place. Maybe the problem is with your browser (maybe is not up to date)? Because we really have no idea what can be wrong. We also checked javascript console and there is not errors of course so no conflict can be there.

Thanks for understanding!

Trentors · July 2014

Hi Muffingroup,

Thank you for answering. I have tried it again and still does not work in FF and Chrome. Both browsers are fully updated and I have tried on several PC's using both Windows 8 and Windows 7.

You can recreate the issue by going to your contact form test:

http://themes.muffingroup.com/betheme/pages/contact

Then scroll down so only the "Send" button is visible. When you press it, it should now scroll up to the validation errors. It does so "partially" on IE but not Chrome and FF.

With my own site I solved the issue by adding:

define('WPCF7_LOAD_JS', false);

to the wp-config.php file but this disables client-side scripting. However it does work but is very slow compared to javascript based validation. Using the plugin that enables Jquery scripting for Contact Form 7 also solves the issue. However this plugin is not multi-language and only supports english.

Albert · July 2014

We already checked it and as we thought all works fine. We already checked in FF, Chrome and Opera so the problem definitely must be on your side. To confirm it, we checked on 4 different computers and also 2 additional computers from different locations and all is ok so we have no idea what can be the problem.

This is how it looks in Firefox http://snag.gy/tOrHb.jpg
This is from Chrome http://snag.gy/E32bL.jpg

So as you see all is ok. Maybe you got old javascript cached in your browser or something totally else happen.

Trentors · July 2014

Hi Muffingroup,

Yes it works and shows the validation errors - that is clear from your screenshots however this was never the problem. It does not scroll up. Have you tested the "automatic scrolling" that would not trigger if you follow my approach described earlier? It is vital that you scroll so low that only the "Send" button is visible.

Imagine you have a long contact form and one of the top fields causes an validation error. CF7 will automatically scroll up to the first error. It does not scroll up on FF and Chrome.

The user has no idea if the form is submitted or not.

Albert · July 2014

Hmm, we think that we know what you mean now but can you tell us where did you found this option? Because this is first time when someone tell that there is possibility to back to form automatically while click on send button. As we understand, when page is scrolled and only button is visible is should scroll automatically to top and show whole form with errors... are we right? If is that what you mean, please tell us where you found this option in contact form 7 because we never heard about anything similar.

Thanks for understanding!

Trentors · July 2014

You are right but this is exactly the behaviour that does not happen. You can see Chrome tries to scroll up but fails.

Here is a video of what happens:

https://dl.dropboxusercontent.com/u/39832936/eb373f06-864d-43a2-8ea2-e871311b3e53.WMV

I have tried this on multiple machines.

Albert · July 2014

We watched this video and this is exactly what we thought you mean. But we asked if you can show us, where Contact Form 7 works as you want... We understand that in IE it goes to top but this is only IE behavior and this thing just can`t be setup from contact form 7 plugin as far as we know. Please show us example of contact form 7 plugin that works as you wish in Firefox or Chrome and only then we`ll be able to have a look on it. At this moment, we are sure that this possibility is not included with CF7 plugin.

We checked this plugin carefully and this plugin does not work with any additional javascript. So this request should be sent to plugin's author because he is the only person who can do it.

Trentors · July 2014

Hi Muffingroup,

Here is an example of auto-scrolling up. However it only partially works with the first example:

https://dl.dropboxusercontent.com/u/39832936/9c6226a4-a1c9-4312-8b19-57c09a3ce196.WMV

If I deactivate the Be Theme and uses the "classic" Wordpress theme it also works by showing an error message saying that all fields are not filled out. This error message is never shown with the Be Theme. Example:

https://dl.dropboxusercontent.com/u/39832936/257ce0d1-4b00-43e2-8f6b-5337f8134c96.WMV

I have to admit it does not scroll up either but at least the user is informed that fields are missing. And that is the essential part.

Albert · July 2014

We tested it and this won`t work at all as we wrote above. Contact Form 7 does not allow to use own javascript inside and this request should be sent to plugin's author. We also tested it on default wordpress theme and this also works the same on be so it is not scrolling up as you suggested. That`s why we really can`t help you because this is plugins problem, not our.

Thanks for understanding!

Trentors · July 2014

Hi Muffingroup,

Okay that makes CF7 unuseable then. I will hunt for another plugin then. I just felt it was the right plugin to use since you use it yourself.

Albert · July 2014

For us it is right plugin and to be honest you are the only person who said this plugin is unusable. So far nobody never reported this plugin and as you can see on http://wordpress.org/plugins/contact-form-7/ this plugin got nearly 19,000,000 downloads what makes him the most popular contact plugin. Also it is first time that someone mentioned that after button click it should go to top. So if you want something like that then you probably must look for another plugin.

BTW Of course if it will be possible to add this feature we`ll be able to do it, but unfortunately Contact Form 7 does not accept any additional javascripts.

Trentors · July 2014

Yes but the problem is not that it does not go the top. It would have solved the issue though and it appears to do so in some cases.

The problem is user feedback. When the users presses the Send button at the bottom of a long form it simply does not give ANY feedback about any potential errors. The user may be led to believe the form has been submitted because no error message is shown (when using the Be Theme - it does with the Wordpress classic theme).

So please let me summarize: Going to the top is not the problem. Not giving any user feedback about validation errors is. Going to the top would have solved this and CF7 does this on IE.

If you look at the videos I have posted only the classic theme displays the validation error message.

The pictures you posted yourself does not show any error messages other than the errors for each field. But without the overall error message and the "scrolling up" the user has no idea what goes on unless the fields with errors are present on the screen at once.

The Be Theme removes the "# Validation errors occurred" message that is a part of CF7 completely. It it did not do so - the scrolling up would not be necessary. Is this removal intentional? It is not shown on your test site either and is also not present in the screenshots you posted.

Albert · July 2014

Yes, you're right. This info which is under Contact Form 7 has been hidden by us because it does not look good with theme and this is not what we would like to do. But if you want to show this info, please use below custom css:

div.wpcf7-response-output { clear: both; margin: 2em 0.5em 1em; padding: 1.1em 1em; }

and also in css/layout.css file please remove below line:

.wpcf7-validation-errors { border: 0; display: none !important; }

Trentors · July 2014

Hi Muffingroup,

Thank you for that. I will try this out.

Thank you for helping with this :-)

jgoodhoofd · February 2015

My site is having problems with Contact Form 7 and after doing lots of research, it appears that the reason is due to a conflict with the BeTheme.

http://oakvillecounselling.com

When submitting the form correctly, the validation message no longer appears. Previously (about a month ago) it worked and displayed the green validation text below the form on the footer contact form and contact page contact form. Please help!

Albert · February 2015

@jgoodhoofd Please open your website in Firefox html mode (CTRL+U) and check how many html errors you got. Please fix them first and all should be fine.

Contact Form 7 does not work with validation errors

Comments