-
-
Hi!
I always run into cf7 compatibility issues. Validation errors destroy the layout – the error message is running over the button.
https://www.blattspiel.at/angebote/waldlaeuferbande/
Thanks a lot for you help.
-
Helo,
Please add this code into your custom css box:
div.wpcf7-validation-errors { border: none !important; } div.wpcf7-response-output { margin: 9em 9.5em !important; }
Let us know.
Best regards!
-
Hi,
This is not working. I want the response text (in all error and success cases) to be between the last form element and the submit button as defined in CF7. It must also work on mobile devices.
An why is the checkbox to accept the terms and conditions below the text?
https://pasteboard.co/H4gAgnzi.png
Thanks a lot!
-
Hello,
First, please know that this is third partly plugin you are using. It’s free and very good so we often recommend it. But the layout and style of the contact form 7 is not created from us.
We can only help you customize it using custom css. Try this code instead:.wpcf7-form p { margin-top: 34px !important; margin-left: 26px !important; }
This is the result screenshot: https://postimg.org/image/ngjg0cn7p/
Note: This will affect other<p>
tags.-If you see this screenshot: https://postimg.org/image/c46uidrbp/
The code for the checkbox (of terms & conditions) is an independent line of code. It comes after the line configuring the ‘terms & conditions’ text. So to take it before the text, you will need to access the code and place the checkbox code before the text.
This is not recommended as it will keep you from updating the plugin in the future.Best regards!
- This reply was modified 6 years, 3 months ago by Mirela.
-
Hi,
I know that it a third party tool but without your theme the plugin is working as expected. I’m a little disappointed that your theme destroys the layout of such a common plugin.
Anyways, thanks a lot for your help! The error message is now working on the desktop, but not on the mobile: https://postimg.org/image/verx49kdp/
In the CF7 documentation, the checkbox and the text are in the same line as it is the standard for such forms. It is the theme css which is destroying this. https://contactform7.com/acceptance-checkbox/
-
Hello,
Please add this code into your custom css box:
@media (max-width: 480px){ div.wpcf7-validation-errors { margin-top: 1182px !important; }}
This should be the result: https://postimg.org/image/vjmo8u3ut/
You could also replace this block:
div.wpcf7-validation-errors { border: none !important; } div.wpcf7-response-output { margin: 9em 9.5em !important; }
With this:
div.wpcf7-validation-errors { margin-top: 106% !important; }
Let us know.
Best regards!
-
-
Hey,
Do you have any caching plugin installed? Please clear cache and refresh page. If you still can not see changes, send us some valid wp credentials in a private reply. So i can give it a closer look.
Best regards!
-
-
Hello,
I fixed it. I commented out a line of code in your custom css box that was overwriting this. See screenshots of how it looks now in mobile and desktop: https://postimg.org/image/n0m4didpx/
https://postimg.org/image/ayqqjihdx/Let us know.
Best regards!
-
Hi!
Basically it is working but to be honest, I’m not happy at all. The solution is not working for screen resolutions between 480 and 1270px width. I have to adapt it for every form I have and for every change I do to the forms.
-
You must be logged in to reply to this topic.