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

Back to Styling Contact Form 7 Forms