Contact Form 7
[resolved] Input Boxes Border Issue (4 posts)

  1. Bruno Silva
    Posted 2 years ago #

    Hi all!

    I'm having some problems with the borders of the input boxes in my contact page here:


    Basically the borders aren't showing and it's not easy for users to input text in there.

    I know it's probably a CSS issue, but I've tested a lot of stuff and am clueless on how to properly fix the thing.

    Can someone help out with this?

    Thanks a lot.



  2. KrissieV
    Posted 2 years ago #

    Looks like your resets are overriding any default styling... when I inspect the element in the browser if you uncheck the border property the fields show up. You probably don't want to remove that reset, as it's likely needed for other things on the site.

    What have you tried already? I didn't see any specific styling in your css for those inputs.

    You should be able to use something like:

    .wpcf7-form input {border:1px solid #000000;}

    or whatever styling you are wanting. Is that what you've tried?

  3. buzztone
    Posted 2 years ago #

    Use Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail. Once you understand how the HTML and CSS is configured in your CF7 form, you should be able to see the CSS changes you need to change the appearance of the form to suit your requirements.

  4. Bruno Silva
    Posted 2 years ago #

    @Krissiev - That solved the problem, thank you very much!
    I just had to create entries for the textareas and img also and everything is perfect.

    Thanks a Ton!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic