Styling a Specific Contact Form 7 Form

Each CF7 form has a unique id which can be targeted in your CSS changes.

<div id="wpcf7-f47-p339-o1" class="wpcf7">
<form class="wpcf7-form" novalidate="novalidate" enctype="multipart/form-data"
method="post" action="/forms/bogart/#wpcf7-f47-p339-o1">
<div style="display: none;">
<input type="hidden" value="47" name="_wpcf7">
<input type="hidden" value="3.4.1" name="_wpcf7_version">
<input type="hidden" value="wpcf7-f47-p339-o1" name="_wpcf7_unit_tag">
<input type="hidden" value="e6484ca73a" name="_wpnonce">
</div>

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:

#wpcf7-f47-p339-o1 {
	font-family: Verdana;
}

#wpcf7-f47-p339-o1 .wpcf7-form fieldset {
	padding:10px;
	background:#fff;
	margin-bottom:10px;
	border:1px solid #000;
}

You can also add id and class attributes to a CF7 form by adding html_id and html_class attributes into a CF7 shortcode. This can be used to target individual forms via the html_id attribute or a number of forms using the html_class attribute.

HTML:
[ contact-form-7 id=”1511″ html_class=”cf7-psForm” title=”Personal Service Form” ]

CSS:

.wpcf7 .cf7-psForm {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #9ffffe;
    padding: 20px;
}

Go back to Styling Contact Form 7 Forms.