Contact Form 7 - No border around text fields - need help please

5 replies
  • WEB DESIGN
  • |
I've been using the Hulk theme on my site Noisy Cicada | Digital Chirps for a while now and recently added contact forms on several pages using the shortcode with the Contact Form 7 plugin.

The forms do display and are useable but the text fields don't have an outline. For a visual, do me a favor and check out the Contact Us page.

I've messed with the CSS file for Contact Form 7 and just can't get a border to display around the text fields.

I'm worried it will prevent visitors from using the form. Any suggestions (before I have to pay someone to do it)? Any help is much appreciated.
#border #contact #fields #form #issues #text
  • Profile picture of the author yuccarichard
    looks like that upper form is using:

    a, input, textarea {
    border: medium none;
    outline: medium none;


    }

    coming from style.css line 38

    most likely the reason you don't see border around inputs nor textarea in there.

    hope this helps
    {{ DiscussionBoard.errors[6588882].message }}
  • Profile picture of the author BillyW
    .wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required, .wpcf7-form-control.wpcf7-text.wpcf7-email.wpcf7-validates-as-required.wpcf7-validates-as-email, .wpcf7-form-control.wpcf7-text, .wpcf7-form-control.wpcf7-textarea {

    border: 1px solid black;

    }

    Add this to your CSS. Let me know if this was what your were looking for.
    Signature
    Qosso.com - Exceptional Branding At Affordable Prices
    {{ DiscussionBoard.errors[6589693].message }}
    • Profile picture of the author Jeremy Bratcher
      Originally Posted by BillyW View Post

      .wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required, .wpcf7-form-control.wpcf7-text.wpcf7-email.wpcf7-validates-as-required.wpcf7-validates-as-email, .wpcf7-form-control.wpcf7-text, .wpcf7-form-control.wpcf7-textarea {

      border: 1px solid black;

      }

      Add this to your CSS. Let me know if this was what your were looking for.
      This worked just fine by adding it to the css file for the plugin. Thanks a ton!

      It is a little dark but I can modify the border attribute. At least I know how to do that. :rolleyes:

      Thanks to everyone who replied!
      Signature
      “The question isn’t who is going to let me; it’s who is going to stop me.” – Ayn Rand
      {{ DiscussionBoard.errors[6590853].message }}
  • Profile picture of the author copilu0
    try this code and it will work:
    a, input, textarea {
    border: 1px solid #000000;
    outline: medium none;


    }
    {{ DiscussionBoard.errors[6590313].message }}
  • Profile picture of the author ALicenseToCode
    While your issue is resolved here I thought I'd give ya a little bit of useful advice you can use in the future.

    Get the dev tools extension for your browser so you can inspect elements on your page. For chrome check out this video (It's an official video from google) You can get a similar thing for firefox, but chrome is really starting to pull ahead in the browser market for just being better.

    Once you have that setup any time you have a styling issue on your website you can go in and INSPECT the element with the dev tools. This will give you all the information on all of the code and styles that effect that particular element. So in the future if text isn't the right color or your borders aren't right you'll be able to figure out with laser precision what's wrong with it.
    {{ DiscussionBoard.errors[6591448].message }}

Trending Topics