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

Odd frame around contact form

    • 8 years, 5 months ago cclindeman
      Participant

      Expired

      After pushing “send” on my contact form a strange border appears (screenshot). Any idea how to remove it?

    • 8 years, 5 months ago Mirela
      Participant

      Hello,

      Sorry for the late reply.
      Please add this code into your custom css box:

      div.wpcf7-validation-errors { margin-top: 100% !important;}
      div.wpcf7-mail-sent-ok { margin-top: 100% !important;}
      div.wpcf7-mail-sent-ng { margin-top: 100% !important;}
      div.wpcf7-spam-blocked { margin-top: 100% !important;}

      Result screenshot: https://pho.to/AbuFK

      Best regards!

    • 8 years, 5 months ago cclindeman
      Participant

      Expired

      When I plug that it, the yellow frame is right on the send button.

      Screenshot

      • This reply was modified 8 years, 5 months ago by cclindeman.
    • 8 years, 5 months ago Mirela
      Participant

      Hello,

      I can’t see the screenshot you send. Just edit the values until you are satisfied with the result.
      Let us know.

      Best regards!

    • 8 years, 5 months ago cclindeman
      Participant

      Expired

      That helped, but I noticed that it gets screwed up when the page is scaled or is viewed on mobile, how does that get fixed? Does it have to have the line around it?

    • 8 years, 5 months ago Mirela
      Participant

      Hello,

      This is a third party plugin so it’s he authors decision for the styling. To change it for every other screen size means to add a lot of other custom css. If you feel better to remove it, then add this code:

      div.wpcf7-validation-errors { border: none !important;}
      div.wpcf7-mail-sent-ok { border: none !important;}
      div.wpcf7-mail-sent-ng { border: none !important;}
      div.wpcf7-spam-blocked { border: none !important;}

      Let us know.

      Best regards!

    • 7 years, 1 month ago softwud
      Participant

      Expired

      I just thought I would put my 2c in since I just experienced the same issue.

      A proper solution is just to add the following to the custom css as this works on iphone as well:

      .wpcf7-response-output
      {
      clear: both;
      }

      FYI I’ve also emailed the author of contact-form-7 so they may release a plugin fix for the issue.

      Regards,

      Paolo

    • 7 years, 1 month ago Mirela
      Participant

      Hey,

      Cool! Thanks for sharing!

      Best regards!

Viewing 7 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