WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. Emily_G
    Member
    Posted 10 months ago #

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

    http://wordpress.org/extend/plugins/contact-form-7/

  2. buzztone
    Member
    Posted 10 months 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
    Member
    Posted 10 months ago #

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

    Code:

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

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

    <p>Subject
    [text your-subject] </p>

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

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

  4. Emily_G
    Member
    Posted 10 months ago #

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

  5. buzztone
    Member
    Posted 10 months 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
    Member
    Posted 10 months 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
    Member
    Posted 9 months ago #

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

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.