CF7 CSS Classes

Last Updated on July 24, 2018 by Neil Murray

For CF7 forms we have several ids & classes which can be used to ensure that our CSS changes don’t inadvertantly effect other elements on your website.

 
class="wpcf7":
 
<div id="wpcf7-f800-p709-o1" class="wpcf7">
 
div.wpcf7 {  /* ../contact-form-7/includes/css/styles.css */
	margin: 0;
	padding: 0;
}
 
class="wpcf7-form":
 
<form class="wpcf7-form" novalidate="novalidate" method="post" 
action="/ONLINE/CF7/cf7skinsPoC/styles/premium/cagney/#wpcf7-f800-p709-o1">
 
class="wpcf7-form-control":
 
<span class="wpcf7-form-control wpcf7-checkbox">
 
class="wpcf7-form-control-wrap":
 
<span class="wpcf7-form-control-wrap checkbox-0">
 
span.wpcf7-form-control-wrap {  /* ../contact-form-7/includes/css/styles.css */
	position: relative;
}
 
class="wpcf7-text":
 
<input id="cf7s-item1a" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required
cf7s-textfield" type="text" placeholder="default" aria-required="true" maxlength="100"
size="60" value="" name="cf7s-text-01">
 
class="wpcf7-textarea":
 
<textarea class="wpcf7-form-control wpcf7-textarea" rows="10" cols="40" name="cf7s
textarea-01"></textarea>
 
class="wpcf7-email":
 
<input class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email"
type="email" size="40" value="" name="cf7s-email-01">
 
class="wpcf7-url":
 
<input class="wpcf7-form-control wpcf7-text wpcf7-url wpcf7-validates-as-url" type="url"
size="40" value="" name="cf7s-url-01">
 
class="wpcf7-tel":
 
<input class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" type="tel"
size="15" value="" name="cf7s-tel-01">
 
class="wpcf7-number":
 
<input class="wpcf7-form-control wpcf7-number wpcf7-validates-as-number" type="number"
value="" name="cf7s-number-01">
 
class="wpcf7-range":
 
<input class="wpcf7-form-control wpcf7-range wpcf7-validates-as-number" type="range"
value="" name="cf7s-range-01">
 
class="wpcf7-date":
 
<input class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date" type="date" 
value="" name="cf7s-date-01">
 
class="wpcf7-file":
 
<input class="wpcf7-form-control wpcf7-file" type="file" size="40" value="1" 
name="cf7s-file-01">
 
class="wpcf7-quiz":
class="wpcf7-quiz-label":
 
<span class="wpcf7-quiz-label">12+48=?</span><input class="wpcf7-form-control wpcf7-quiz" 
type="text" aria-required="true" size="40" name="cf7s-quiz-01"><input type="hidden" 
value="1c7a729e1466603f91d3595d6afcac26" name="_wpcf7_quiz_answer_cf7s-quiz-01">
 
class="wpcf7-acceptance":
 
<input class="wpcf7-form-control wpcf7-acceptance" type="checkbox" value="1" name="cf7s 
acceptance-01">
 
class="wpcf7-captchac":
 
<img class="wpcf7-form-control wpcf7-captchac wpcf7-captcha-cf7s-captcha-01" width="72" 
height="24" src="http://localhost/ONLINE/CF7/cf7skinsPoC/wp-content/images/wpcf7_captcha
/1692768786.png" alt="captcha">
 
class="wpcf7-captchar":
 
<span class="wpcf7-form-control-wrap cf7s-captcha-01"><input class="wpcf7-form-control 
wpcf7-captchar" type="text" size="40" value="" name="cf7s-captcha-01"></span>
 
class="wpcf7-list-item":
 
<span class="wpcf7-list-item">
 
span.wpcf7-list-item {  /* ../contact-form-7/includes/css/styles.css */
	margin-left: 0.5em;
}
 
class="wpcf7-list-item-label":
 
<span class="wpcf7-list-item-label">Lieber.gleich.richtig.® Imagemappe</span>
 
class="wpcf7-checkbox":
 
<span class="wpcf7-form-control wpcf7-checkbox">
 
class="wpcf7-radio":
 
<span class="wpcf7-form-control wpcf7-radio">
 
class="wpcf7-select":
 
<select class="wpcf7-form-control wpcf7-select" multiple="multiple" name="cf7s-menu-01[]">
 
class="wpcf7-submit":
 
<input class="wpcf7-form-control wpcf7-submit" type="submit" value="Senden">

Back to Styling Contact Form 7 Forms