Each CF7 form has a unique id which can be targeted in your CSS changes. Use Firebug or Chrome Dev Tools to find this unique id in your CF7 form. Then target only this CF7 form using CSS heirachy as follows: You can also add id and class attributes to a CF7 form by adding […]

The Contact Form 7 plugin uses very minimal CSS styling to allow CF7 forms to blend in with most websites. Default CF7 CSS style: div.wpcf7 { margin: 0; padding: 0; }   div.wpcf7-response-output { margin: 2em 0.5em 1em; padding: 0.2em 1em; }   div.wpcf7-mail-sent-ok { border: 2px solid #398f14; }   div.wpcf7-mail-sent-ng { border: 2px […]

Default CF7 Form We used Firebug to produce the following diagram which shows the overall structure of the default CF7 form we are using in this article. The diagram shows how each element of the form is created using standard HTML form elements and how those elements are arranged in relation to each other. The […]