Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Contact form 7 issue

    • 7 years, 6 months ago flowio
      Participant

      Expired

      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.

       

    • 7 years, 6 months ago Mirela
      Participant

      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!

    • 7 years, 6 months ago flowio
      Participant

      Expired

      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!

    • 7 years, 6 months ago Mirela
      Participant

      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 7 years, 6 months ago by Mirela.
    • 7 years, 6 months ago flowio
      Participant

      Expired

      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/

       

       

       

    • 7 years, 6 months ago Mirela
      Participant

      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!

    • 7 years, 6 months ago flowio
      Participant

      Expired

      I made the changes but it is not working :(

    • 7 years, 6 months ago Mirela
      Participant

      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!

    • 7 years, 6 months ago flowio
      Participant

      Expired

      This reply has been marked as private.
    • 7 years, 6 months ago Mirela
      Participant

      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!

    • 7 years, 6 months ago flowio
      Participant

      Expired

      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.

Viewing 10 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password