Support » Plugin: Contact Form 7 » No box around email field or send button

Viewing 6 replies - 1 through 6 (of 6 total)
  • 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.



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

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

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

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

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘No box around email field or send button’ is closed to new replies.