Contact Form 7
No box around email field or send button (7 posts)

  1. Emily_G
    Posted 2 years ago #

    Everything seems to work ok, but there is no outilne around the email field or the send button.


  2. buzztone
    Posted 2 years ago #

    Please describe your problem in more detail. Include the code used in the Form section of the CF7 interface and a link to your CF7 form if possible. If others here are able to understand your actual problem, they may be able and willing to offer a possible solution.

  3. Emily_G
    Posted 2 years ago #

    Screenshot: http://www.mediafire.com/?cvp56z1ax15dx15


    <p>Your Name (required)
    [text* your-name] </p>

    <p>Your Email (required)
    [email* your-email] </p>

    [text your-subject] </p>

    <p>Your Message
    [textarea your-message] </p>

    <p>[submit "Send"]</p>

  4. Emily_G
    Posted 2 years ago #

    You can type an email in the email box and press send, there is no outline on either though.

  5. buzztone
    Posted 2 years ago #

    To fix this you will need to modify the CSS of the relevant html form elements in your CF7 form.

    CF7 now uses the new HTML5 input[type="email"] for email fields and input[type="text"] for other fields.

    Looks like the CSS in your current WordPress theme does not cater for this new HTML5 email input field. Similar with Send button.

    http://contactform7.com/faq/#Why_does_my_email_address_input_field_look_different gives some guidance on how make these fields look the same in your current WordPress theme.

    See Styling Contact Form for a general explanation of styling CF7 forms using CSS. If you are not familiar with CSS, this page also includes some links to where you can learn CSS..

    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.

  6. Emily_G
    Posted 2 years ago #

    Thanks, I'm not overly familiar with CSS but I can normally get by. Will give this a go in a bit.

  7. leanderbraunschweig
    Posted 2 years ago #

    Perfect answer - just what I was looking for. Thanks @buzztone!

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


No tags yet.