Viewing 4 replies - 1 through 4 (of 4 total)
  • The actual look of CF7 forms on your website will depend largely on the current WordPress theme used and the CSS styling that theme applies to standard HTML form elements.

    To change the style of your CF7 forms you would need to edit the CSS style sheets used by your WordPress theme.

    See Styling Contact Form for a general explanation of styling CF7 forms using CSS.

    There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.

    The problem is caused by the CSS below

    input {
        background: #fff none repeat scroll 0 0;
        border: medium none; /* the cause of the problem */
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 2px;
        line-height: 22px;
        padding-bottom: 10px;
        text-transform: uppercase;
        width: 96%;
    }

    ​​​
    The CSS below would correct the error and make the your form fields visible

    .wpcf7-text, .wpcf7-textarea {
        border: 1px solid #ccc;
        padding: 10px ;
        border-radius: 5px;
    }
    .wpcf7-textarea {
        width: 718px;
    }

    ​​

    Thread Starter Meganbrandlective

    (@meganbrandlective)

    Hi, Thanks for your help.
    However, we’ve added it onto the bottom of the style.css file but it’s not working. Can you advise on why this is? Am I missing something?
    Thanks.

    Thread Starter Meganbrandlective

    (@meganbrandlective)

    Hi Thanks, for your help.
    However, we’ve added it onto the bottom of the style.css file but it’s not working. Can you advise on why this is? Am I missing something?
    Thanks.

    You may add your CSS via Child Theme or use custom CSS plugin.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Boxes do not show’ is closed to new replies.