Insights

Best 6 Contact Form 7 Html Template Code

Victor
October 20, 2023

So you have Contact Form 7 installed on your WordPress and looking for Contact Form 7 HTML Template Code.

Contact Form 7 Html Template Code
Instead of many blogs that seem to have an abundance of unnecessary “what is” paragraphs, I believe in efficiency and respect for your time. So here, I’m trimming the fat and cutting straight to the chase. No more beating around the bush or lengthy explanations.

I’m here to provide you with concise yet valuable information that gets right to the point. Let’s dive in and make the most of your reading experience!

A nice-looking CF7 Form consists of two parts: HTML(controls the structure) + CSS(controls the color). Here’s how to add the CSS in WordPress in case you don’t know.

CF7 Template: Complaint Form – Berry Delight

CF7 Template: Complaint Form - Berry Delight

HTML

<div class="cf7s-berry-delight">
<fieldset>
	<legend>Complaint Form</legend>
	<p>Please let us know what you think.</p>
	<ol>
		<li> Which Department did you do business with? [radio cf7s-radio1 default:1 "Sales" "Marketing" "Accounting" "Customer Services"] </li>
		<li> My complaint involves [radio cf7s-radio2 default:1 "A pre-purchase problem" "A post-purchase problem" "A problem during purchase" "Other"] [text cf7s-other]</li>
		<li> State Of Residence [select cf7s-select1 "Alabama" "California" "Florida"] </li>
		<li> Subject [text* cf7s-subject] </li>
		<li> Message [textarea* cf7s-message] </li>
		<li> Please enter your email if you'd like us to follow up with you. [email cf7s-email] </li>
	</ol>
	[submit "Submit"]
</fieldset>
</div>

CSS:

/** Form & Controls
Use to style the overall CF7 form
------------------------------------------------------------ */
.wpcf7 .cf7s-berry-delight {
	padding: 20px;
	color: #363233;
	border: 1px solid #fbd4cf;
	background: #fff;
}

/** Fieldset, Legend, Label
------------------------------------------------------------ */
.wpcf7 .cf7s-berry-delight fieldset {
	margin: 10px 0;
	padding: 10px 20px;
	border: 1px solid #fbd4cf;
	background: #fbd4cf;
}

.wpcf7 .cf7s-berry-delight legend {
	font-size: 1.2em;
	padding: 3px 20px;
	color: #fff;
	border: 6px solid #fbd4cf;
	border-bottom: 0px solid #fbd4cf;
	background: #545454;
}

.wpcf7 .cf7s-berry-delight label {
}

.wpcf7 .cf7s-berry-delight fieldset p {
}

.wpcf7 .cf7s-berry-delight fieldset fieldset {
	margin: 10px 0;
	background: #f6babc;
}

.wpcf7 .cf7s-berry-delight fieldset fieldset legend {
	border: 6px solid #f6babc;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight fieldset fieldset input, 
.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight fieldset fieldset textarea {
	color: #363233;
	border: 1px solid #d77c7f;
	background: #fbd4d0;
}

/** Text Fields
------------------------------------------------------------ */
.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight input, 
.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight textarea {
	margin-bottom: 8px;
	padding: 7px;
	color: #fff;
	border: 1px solid #ffe0dc;
	background: #f6babc;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight input[type="text"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight input[type="email"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight input[type="tel"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight input[type="url"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight input[type="number"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight input[type="range"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight input[type=date],
.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight input[type=file] {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight input[type="text"] {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight input[type="email"] {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight input[type="tel"] {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight textarea {
}

/** Ordered & Unordered lists
------------------------------------------------------------ */
.wpcf7 .cf7s-berry-delight ol,
.wpcf7 .cf7s-berry-delight ul,
.wpcf7 .cf7s-berry-delight li {
}

.wpcf7 .cf7s-berry-delight ol {
}

.wpcf7 .cf7s-berry-delight li {
	margin-bottom: 5px;
}

.wpcf7 .cf7s-berry-delight li label {
}

.wpcf7 .cf7s-berry-delight .wpcf7-list-item {
}

.wpcf7 .cf7s-berry-delight .wpcf7-list-item-label {
	margin-right: 7px;
}

/** Checkboxes, Radio Buttons and Drop Down Menus
------------------------------------------------------------ */
.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight input[type="checkbox"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight input[type="radio"] {
	margin-right: 6px;
	background: none;
}

.wpcf7 .cf7s-berry-delight select {
	padding: 5px;
	border: 1px solid #d67c7e;
	background:#fbd4cf;
}

.wpcf7 .cf7s-berry-delight select option {
}

.wpcf7 .cf7s-berry-delight select option:hover {
	background: #f6babc;
}

.wpcf7 .cf7s-berry-delight .wpcf7-checkbox .wpcf7-list-item,
.wpcf7 .cf7s-berry-delight .wpcf7-radio .wpcf7-list-item {
	margin-left: 13px;
}

/** Other Fields
------------------------------------------------------------ */


/** Submit Buttons
------------------------------------------------------------ */
.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight input[type="submit"] {
	padding: 5px 15px;
	color: #fff;
	background: #404040;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight input[type="submit"]:hover {
	background: #f6babc;
}

/** Special Classes
NOTE: Special Classes are classes added in the CF7 Form HTML for a particular form 
------------------------------------------------------------ */


/** Ready Styles
------------------------------------------------------------ */
.wpcf7 .cf7s-berry-delight .singleline {
}

.wpcf7 .cf7s-berry-delight .singleline li {
}

.wpcf7 .cf7s-berry-delight .singleline input {
}

.wpcf7 .cf7s-berry-delight .horizontal,
.wpcf7 .cf7s-berry-delight .checkbox-horizontal,
.wpcf7 .cf7s-berry-delight .radio-horizontal {
}

.wpcf7 .cf7s-berry-delight .box {
	padding: 10px;
	border: 1px solid #fff;
	background: #f6babc;
}

.wpcf7 .cf7s-berry-delight .box select {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight .grid-hover [data-row-span] [data-field-span]:hover {
	background: #ffefef;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight .grid-lined {
	border-top: 1px solid #fff;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight .grid-lined [data-row-span] {
	border-bottom: 1px solid #fff;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight .grid-lined [data-row-span] [data-field-span] {
	border-right: 1px solid #fff;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight .grid-lined [data-row-span] [data-field-span]:first-child {
	border-left: 1px solid #fff;
}

	/* Needed to over-write Ready Default styling in cf7s-ready.css */
	@media only screen and (min-width: 0) and (max-width: 700px) {
		.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight .grid-lined [data-row-span] {
			border-bottom: none;  /* Needed so don't get additional line */
		}
		.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight .grid-lined [data-row-span] [data-field-span] {
			border-bottom: 1px solid #fff;
			border-left: 1px solid #fff; 
		}
	}

/** Multi Styles
------------------------------------------------------------ */

/* Multi Fixes */
.wpcf7 .cf7s-berry-delight.cf7multi {
}

.wpcf7 .cf7s-berry-delight.cf7multi .etabs li {
}

/* Easytabs */
.wpcf7 .cf7s-berry-delight.cf7multi .tab-container {
}

.wpcf7 .cf7s-berry-delight.cf7multi .etabs {
}

.wpcf7 .cf7s-berry-delight.cf7multi .tab {
	border: 1px solid #fbd4cf;
	border-bottom: none;
	background: #fbd4cf;
}

.wpcf7 .cf7s-berry-delight.cf7multi .tab a {
	color: #363233;
}

.wpcf7 .cf7s-berry-delight.cf7multi .tab.active {
	background: #fff;
}

.wpcf7 .cf7s-berry-delight.cf7multi .tab a.active {
}

.wpcf7 .cf7s-berry-delight.cf7multi .epanels {
	border: 1px solid #fbd4cf;
}

.wpcf7 .cf7s-berry-delight.cf7multi .panel-container {
}

/* Navigation */
.wpcf7 .cf7s-berry-delight.cf7multi .navigation {
}

.wpcf7 .cf7s-berry-delight.cf7multi .navigation .previous,
.wpcf7 .cf7s-berry-delight.cf7multi .navigation .next {
	font-weight: bold;
	padding: 5px 15px;
	color: #fff;
	border: 1px solid #ffe0dc;
	background: #f6babc;
}

.wpcf7 .cf7s-berry-delight.cf7multi .navigation .previous:hover,
.wpcf7 .cf7s-berry-delight.cf7multi .navigation .next:hover {
	background: #404040;
}

/* Pagination */
.wpcf7 .cf7s-berry-delight.cf7multi .pagination {
}

/* Start & End Tabs */
.wpcf7 .cf7s-berry-delight.cf7multi .navigation .start,
.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight.cf7multi .navigation .end {
	font-weight: bold;
	padding: 5px 15px;
	color: #fff;
	border: 1px solid #ffe0dc;
	background: #f6babc;
}

.wpcf7 .cf7s-berry-delight.cf7multi .navigation .start:hover,
.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight.cf7multi .navigation .end:hover {
	background: #404040;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight.cf7multi .navigation .end {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-berry-delight.cf7multi .navigation .end:hover {
}

/* Progress Bar */
.wpcf7 .cf7s-berry-delight.cf7multi .cf7m-progress {
	border: 1px solid #fbd4cf;
	background: #fbd4cf;
}

.wpcf7 .cf7s-berry-delight.cf7multi .cf7m-progress div {
	background: #f6babc;
}

/* Thank You Tab */
.wpcf7 .cf7s-berry-delight.cf7multi .cf7m-thanks {
}

CF7 Template: Contact Form – Blush

CF7 Template: Contact Form - Blush

HTML

<div class="cf7s-blush">
<fieldset>
	<legend>Contact Form</legend>
	<ol>
		<li> Your Name (required) [text* cf7s-name] </li>
		<li> Email Address (required) [email* cf7s-email-address] </li>
		<li> Your Message [textarea cf7s-message] </li>
	</ol>
	[submit "Submit"]
	<p>* Required</p>
</fieldset>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempus pharetra vehicula. Aliquam pellentesque mi non scelerisque placerat.</p>
</div>

CSS

/** Form & Controls
Use to style the overall CF7 form
------------------------------------------------------------ */
.wpcf7 .cf7s-blush {
	padding: 20px;
	color: #000;
	border: 1px solid #bb9393;
	background: #fff;
}

/** Fieldset, Legend, Label
------------------------------------------------------------ */
.wpcf7 .cf7s-blush fieldset {
	margin: 10px 0;  /* Add to cf7s-default? */
	padding: 10px 20px;
	border: 1px solid #bb9393;
	background: #dcc7c6;
}

.wpcf7 .cf7s-blush legend {
	font-size: 1.2em;
	padding: 2px 10px;
	color: #fff;
	border: 1px solid #bfbfbf;
	background: #3b3b3b;
}

.wpcf7 .cf7s-blush label {
}

.wpcf7 .cf7s-blush fieldset p {
}

.wpcf7 .cf7s-blush fieldset fieldset {
	margin: 10px 0;  /* Above CSS overwritten by cf7s-default */
	background: #e9d9da;
}

.wpcf7 .cf7s-blush fieldset fieldset legend {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-blush fieldset fieldset input,
.wpcf7 .wpcf7-form.cf7skins.cf7s-blush fieldset fieldset textarea {
}

/** Text Fields
------------------------------------------------------------ */
.wpcf7 .wpcf7-form.cf7skins.cf7s-blush input,
.wpcf7 .wpcf7-form.cf7skins.cf7s-blush textarea {
	margin-bottom: 8px;
	padding: 7px;
	border: 1px solid #b89090;
	background: #fff;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-blush input[type="text"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-blush input[type="email"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-blush input[type="tel"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-blush input[type="url"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-blush input[type="number"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-blush input[type="range"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-blush input[type=date],
.wpcf7 .wpcf7-form.cf7skins.cf7s-blush input[type=file] {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-blush input[type="text"] {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-blush input[type="email"] {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-blush input[type="tel"] {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-blush textarea {
	padding: 5px 7px;  /* deliberately different from Input */
}

/** Ordered & Unordered lists
------------------------------------------------------------ */
.wpcf7 .cf7s-blush ol,
.wpcf7 .cf7s-blush ul,
.wpcf7 .cf7s-blush li {
}

.wpcf7 .cf7s-blush ol {
}

.wpcf7 .cf7s-blush li {
	margin-bottom: 5px;  /* in many cases this adds to Input margin-bottom: 8px; */
}

.wpcf7 .cf7s-blush li label {
}

.wpcf7 .cf7s-blush .wpcf7-list-item {
}

.wpcf7 .cf7s-blush .wpcf7-list-item-label {
	margin-right: 7px;  /* adds space after Radio Button labels */
}

/** Checkboxes, Radio Buttons and Drop Down Menus
------------------------------------------------------------ */
.wpcf7 .wpcf7-form.cf7skins.cf7s-blush input[type="checkbox"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-blush input[type="radio"] {
	margin-right: 6px;
	background: none;  /* needed for IE - cf7s-default is not specific enough */
}

.wpcf7 .cf7s-blush select {
	margin-bottom: 8px;  /* Add to cf7s-default? */
	margin-left: 0;  /* same as Input */
	padding: 5px;
	border: 1px solid #b89090;
}

.wpcf7 .cf7s-blush select option {
}

.wpcf7 .cf7s-blush select option:hover {
	background: #dcc7c6;
}

.wpcf7 .cf7s-blush .wpcf7-checkbox .wpcf7-list-item,
.wpcf7 .cf7s-blush .wpcf7-radio .wpcf7-list-item {
	margin-left: 13px;
}

/** Other Fields
------------------------------------------------------------ */


/** Submit Buttons
------------------------------------------------------------ */
.wpcf7 .wpcf7-form.cf7skins.cf7s-blush input[type="submit"] {
	font-size: 1.2em;  /* Font size matches Legend */
	padding: 5px 15px;
	color: #fff;
	border: 1px solid #bfbfbf;
	background: #3b3b3b;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-blush input[type="submit"]:hover {
	color: #dcc7c6;
}

/** Special Classes
NOTE: Special Classes are classes added in the CF7 Form HTML for a particular form 
------------------------------------------------------------ */


/** Ready Styles
------------------------------------------------------------ */
.wpcf7 .cf7s-blush .singleline {
}

.wpcf7 .cf7s-blush .singleline li {
}

.wpcf7 .cf7s-blush .singleline input {
}

.wpcf7 .cf7s-blush .horizontal,
.wpcf7 .cf7s-blush .checkbox-horizontal,
.wpcf7 .cf7s-blush .radio-horizontal {
}

.wpcf7 .cf7s-blush .box {
	margin-bottom: 15px;
	padding: 10px;
	border: 1px solid #bb9393;
	background: #e9d9da;
}

.wpcf7 .cf7s-blush .box select {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-blush .grid-hover [data-row-span] [data-field-span]:hover {
	background: #ffeff0;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-blush .grid-lined {
	border-top: 1px solid #bb9393;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-blush .grid-lined [data-row-span] {
	border-bottom: 1px solid #bb9393;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-blush .grid-lined [data-row-span] [data-field-span] {
	border-right: 1px solid #bb9393;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-blush .grid-lined [data-row-span] [data-field-span]:first-child {
	border-left: 1px solid #bb9393;
}

	/* Needed to over-write Ready Default styling in cf7s-ready.css */
	@media only screen and (min-width: 0) and (max-width: 700px) {
		.wpcf7 .wpcf7-form.cf7skins.cf7s-blush .grid-lined [data-row-span] {
			border-bottom: none;  /* Needed so don't get additional line */
		}
		.wpcf7  .wpcf7-form.cf7skins.cf7s-blush .grid-lined [data-row-span] [data-field-span] {
			border-bottom: 1px solid #bb9393;
			border-left: 1px solid #bb9393;
		}
	}

/** Multi Styles
------------------------------------------------------------ */

/* Multi Fixes */
.wpcf7 .cf7s-blush.cf7multi {
}

.wpcf7 .cf7s-blush.cf7multi .etabs li {
}

/* Easytabs */
.wpcf7 .cf7s-blush.cf7multi .tab-container {
}

.wpcf7 .cf7s-blush.cf7multi .etabs {
}

.wpcf7 .cf7s-blush.cf7multi .tab {
	border: 1px solid #bb9393;
	border-bottom: none;
	background: #dcc7c6;
}

.wpcf7 .cf7s-blush.cf7multi .tab a {
	color: #000;
}

.wpcf7 .cf7s-blush.cf7multi .tab.active {
	background: #fff;
}

.wpcf7 .cf7s-blush.cf7multi .tab a.active {
}

.wpcf7 .cf7s-blush.cf7multi .epanels {
	border: 1px solid #bb9393;
}

.wpcf7 .cf7s-blush.cf7multi .panel-container {
}

/* Navigation */
.wpcf7 .cf7s-blush.cf7multi .navigation {
}

.wpcf7 .cf7s-blush.cf7multi .navigation .previous,
.wpcf7 .cf7s-blush.cf7multi .navigation .next {
	color: #fff;
	border: 1px solid #bfbfbf;
	background: #3b3b3b;
}

.wpcf7 .cf7s-blush.cf7multi .navigation .previous:hover,
.wpcf7 .cf7s-blush.cf7multi .navigation .next:hover {
	color: #dcc7c6;
}

/* Pagination */
.wpcf7 .cf7s-blush.cf7multi .pagination {
}

/* Start & End Tabs */
.wpcf7 .cf7s-blush.cf7multi .navigation .start,
.wpcf7 .wpcf7-form.cf7skins.cf7s-blush.cf7multi .navigation .end {
	font-size: 1.0em;
	padding: 5px 10px;
	color: #fff;
	border: 1px solid #bfbfbf;
	background: #3b3b3b;
}

.wpcf7 .cf7s-blush.cf7multi .navigation .start:hover,
.wpcf7 .wpcf7-form.cf7skins.cf7s-blush.cf7multi .navigation .end:hover {
	color: #dcc7c6;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-blush.cf7multi .navigation .end {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-blush.cf7multi .navigation .end:hover {
}

/* Progress Bar */
.wpcf7 .cf7s-blush.cf7multi .cf7m-progress {
	border: 1px solid #bb9393;
	background: #dcc7c6;
}

.wpcf7 .cf7s-blush.cf7multi .cf7m-progress div {
	border-radius: 3px 0 0 3px;
	background: #3b3b3b;
}

/* Thank You Tab */
.wpcf7 .cf7s-blush.cf7multi .cf7m-thanks {
}

CF7 Template: Event Form – Cargo

CF7 Template: Event Form - Cargo

HTML

<div class="cf7s-cargo">
<fieldset>
	<legend>Event</legend>
	<ol>
		<li> Name [text cf7s-name] </li>
		<li> Phone Number [tel cf7s-phone] </li>
		<li> Email [email* cf7s-email] </li>
		<li> Which workshops will you be attending? [checkbox cf7s-checkbox1 "Option 1" "Option 2" "Option 3"] </li>
		<li> Are you an existing customer? [radio cf7s-radio1 default:1 "Yes" "No"] </li>
		<li> How did find out about this event? [select cf7s-select1 "Option 1" "Option 2" "Option 3"] </li>
		<li> Comments or Questions [textarea cf7s-comments] </li>
	</ol>
	[submit "Submit"]
	<p>* Required</p>
</fieldset>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempus pharetra vehicula. Aliquam pellentesque mi non scelerisque placerat.</p>
</div>

CSS

/** Form & Controls
Use to style the overall CF7 form
------------------------------------------------------------ */
.wpcf7 .cf7s-cargo {
	padding: 20px;
	color: #544e2c;
	border: 1px solid #d6d09e;
	background: #fff;
}

/** Fieldset, Legend, Label
------------------------------------------------------------ */
.wpcf7 .cf7s-cargo fieldset {
	margin: 10px 0;
	padding: 10px 20px;
	border: 1px solid #d6d09e;
	background: #d6d09e;
}

.wpcf7 .cf7s-cargo legend {
	font-size: 1.2em;
	padding: 3px 20px;
	color: #fff;
	background: #b6b37c;
}

.wpcf7 .cf7s-cargo label {
}

.wpcf7 .cf7s-cargo fieldset p {
}

.wpcf7 .cf7s-cargo fieldset fieldset {
	margin: 10px 0;
	border: 1px solid #eae6c1;
	background: #eae6c1;
}

.wpcf7 .cf7s-cargo fieldset fieldset legend {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo fieldset fieldset input, 
.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo fieldset fieldset textarea {
	background: #d7d19f;
}

/** Text Fields
------------------------------------------------------------ */
.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo input,
.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo textarea {
	margin-bottom: 8px;
	padding: 5px 7px;
	border: 1px solid #d5d29f;
	background: #eae6c1;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo input[type="text"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo input[type="email"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo input[type="tel"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo input[type="url"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo input[type="number"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo input[type="range"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo input[type=date],
.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo input[type=file] {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo input[type="text"] {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo input[type="email"] {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo input[type="tel"] {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo textarea {
}

/** Ordered & Unordered lists
------------------------------------------------------------ */
.wpcf7 .cf7s-cargo ol,
.wpcf7 .cf7s-cargo ul,
.wpcf7 .cf7s-cargo li {
}

.wpcf7 .cf7s-cargo ol {
}

.wpcf7 .cf7s-cargo li {
	margin-bottom: 5px;
}

.wpcf7 .cf7s-cargo li label {
}

.wpcf7 .cf7s-cargo .wpcf7-list-item {
}

.wpcf7 .cf7s-cargo .wpcf7-list-item-label {
	margin-right: 7px;
}

/** Checkboxes, Radio Buttons and Drop Down Menus
------------------------------------------------------------ */
.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo input[type="checkbox"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo input[type="radio"] {
	margin-right: 6px;
	background: none;
}

.wpcf7 .cf7s-cargo select {
	padding: 5px;
	border: 1px solid #eae6c1;
	background: #d7d1a1;
}

.wpcf7 .cf7s-cargo select option {
}

.wpcf7 .cf7s-cargo select option:hover {
	background: #eae6c1;
}

.wpcf7 .cf7s-cargo .wpcf7-checkbox .wpcf7-list-item,
.wpcf7 .cf7s-cargo .wpcf7-radio .wpcf7-list-item {
	margin-left: 13px;
}

/** Other Fields
------------------------------------------------------------ */


/** Submit Buttons
------------------------------------------------------------ */
.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo input[type="submit"] {
	padding: 5px 15px;
	color: #fff;
	background: #b8b280;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo input[type="submit"]:hover {
	color: #534f29;
	background: #eae6c1;
}

/** Special Classes
NOTE: Special Classes are classes added in the CF7 Form HTML for a particular form 
------------------------------------------------------------ */


/** Ready Styles
------------------------------------------------------------ */
.wpcf7 .cf7s-cargo .singleline {
}

.wpcf7 .cf7s-cargo .singleline li {
}

.wpcf7 .cf7s-cargo .singleline input {
}

.wpcf7 .cf7s-cargo .horizontal,
.wpcf7 .cf7s-cargo .checkbox-horizontal,
.wpcf7 .cf7s-cargo .radio-horizontal {
}

.wpcf7 .cf7s-cargo .box {
	padding: 10px;
	border: 1px solid #d7d19f;
	background: #eae6c1;
}

.wpcf7 .cf7s-cargo .box select {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo .grid-hover [data-row-span] [data-field-span]:hover {
	background: #fffded;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo .grid-lined {
	border-top: 1px solid #b6b37c;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo .grid-lined [data-row-span] {
	border-bottom: 1px solid #b6b37c;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo .grid-lined [data-row-span] [data-field-span] {
	border-right: 1px solid #b6b37c;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo .grid-lined [data-row-span] [data-field-span]:first-child {
	border-left: 1px solid #b6b37c;
}

	/* Needed to over-write Ready Default styling in cf7s-ready.css */
	@media only screen and (min-width: 0) and (max-width: 700px) {
		.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo .grid-lined [data-row-span] {
			border-bottom: none;  /* Needed so don't get additional line */
		}
		.wpcf7  .wpcf7-form.cf7skins.cf7s-cargo .grid-lined [data-row-span] [data-field-span] {
			border-bottom: 1px solid #b6b37c;
			border-left: 1px solid #b6b37c;
		}
	}

/** Multi Styles
------------------------------------------------------------ */

/* Multi Fixes */
.wpcf7 .cf7s-cargo.cf7multi {
}

.wpcf7 .cf7s-cargo.cf7multi .etabs li {
}

/* Easytabs */
.wpcf7 .cf7s-cargo.cf7multi .tab-container {
}

.wpcf7 .cf7s-cargo.cf7multi .etabs {
}

.wpcf7 .cf7s-cargo.cf7multi .tab {
	border: 1px solid #d6d09e;
	border-bottom: none;
	background: #d6d09e;
}

.wpcf7 .cf7s-cargo.cf7multi .tab a {
	color: #544e2c;
}

.wpcf7 .cf7s-cargo.cf7multi .tab.active {
	background: #fff;
}

.wpcf7 .cf7s-cargo.cf7multi .tab a.active {
}

.wpcf7 .cf7s-cargo.cf7multi .epanels {
	border: 1px solid #d6d09e;
}

.wpcf7 .cf7s-cargo.cf7multi .panel-container {
}

/* Navigation */
.wpcf7 .cf7s-cargo.cf7multi .navigation {
}

.wpcf7 .cf7s-cargo.cf7multi .navigation .previous,
.wpcf7 .cf7s-cargo.cf7multi .navigation .next {
	padding: 5px 15px;
	color: #fff;
	background: #b6b37c;
}

.wpcf7 .cf7s-cargo.cf7multi .navigation .previous:hover,
.wpcf7 .cf7s-cargo.cf7multi .navigation .next:hover {
		color: #534f29;
		background: #eae6c1;
}

/* Pagination */
.wpcf7 .cf7s-cargo.cf7multi .pagination {
}

/* Start & End Tabs */
.wpcf7 .cf7s-cargo.cf7multi .navigation .start,
.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo.cf7multi .navigation .end {
	padding: 5px 15px;
	color: #fff;
	background: #b6b37c;
}

.wpcf7 .cf7s-cargo.cf7multi .navigation .start:hover,
.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo.cf7multi .navigation .end:hover {
	color: #534f29;
	background: #eae6c1;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo.cf7multi .navigation .end {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-cargo.cf7multi .navigation .end:hover {
}

/* Progress Bar */
.wpcf7 .cf7s-cargo.cf7multi .cf7m-progress {
	border: 1px solid #d5d29f;
	background: #eae6c1;
}

.wpcf7 .cf7s-cargo.cf7multi .cf7m-progress div {
	background: #b6b37c;
}

/* Thank You Tab */
.wpcf7 .cf7s-cargo.cf7multi .cf7m-thanks {
}

CF7 Template: Suggestion Form – Choc Shake

CF7 Template: Suggestion Form - Choc Shake

HTML

<div class="cf7s-choc-shake">
<fieldset>
	<legend>Suggestion Form</legend>
	<p><strong>Please let us know what you think.</strong></p>
	<ol>
		<li> In which of the following areas do you have a suggestion? [select cf7s-select1 multiple"Area 1" "Area 2" "Area 3" "Area 4"] </li>
		<li> <p>Note: You can select multiple items (Use Shift or Ctrl/Cmd + Click)</p> </li>
		<li> Suggestion [text cf7s-suggestion] </li>
		<li> Details [textarea cf7s-details] </li>
		<li> Your Email - please enter your email if you would like us to follow up with you. [email cf7s-email] </li>
		<li> Radio buttons [radio cf7s-radio1 default:1 "Option 1" "Option 2" "Option 3"] </li>
		<li> Checkboxes [checkbox cf7s-checkbox1 "Option 1" "Option 2" "Option 3"] </li>
	</ol>
	[submit "Submit"]
</fieldset>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempus pharetra vehicula. Aliquam pellentesque mi non scelerisque placerat.</p>
</div>

CSS

/** Form & Controls
Use to style the overall CF7 form
------------------------------------------------------------ */
.wpcf7 .cf7s-choc-shake {
padding: 20px;
color: #866c4a;
border: 1px solid #c9b3a0;
background: #fff;
}

/** Fieldset, Legend, Label
------------------------------------------------------------ */
.wpcf7 .cf7s-choc-shake fieldset {
margin: 10px 0;
padding: 10px 25px;
border: 1px solid #c9b3a0;
background: #e1cfbf;
}

.wpcf7 .cf7s-choc-shake legend {
font-size: 1.2em;
padding: 3px 20px;
color: #fff;
border: 1px solid #c9b3a0;
background: #bca17d;
}

.wpcf7 .cf7s-choc-shake label {
}

.wpcf7 .cf7s-choc-shake fieldset p {
}

.wpcf7 .cf7s-choc-shake fieldset fieldset {
margin: 10px 0; /* Above CSS overwritten by cf7s-default */
background: #ccb7a4;
}

.wpcf7 .cf7s-choc-shake fieldset fieldset legend {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake fieldset fieldset input,
.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake fieldset fieldset textarea {
}

/** Text Fields
------------------------------------------------------------ */
.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake input,
.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake textarea {
margin-bottom: 8px;
padding: 7px;
color: #fff;
border: 1px solid #bfa48e;
background: #dec29d;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake input[type="text"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake input[type="email"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake input[type="tel"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake input[type="url"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake input[type="number"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake input[type="range"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake input[type=date],
.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake input[type=file] {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake input[type="text"] {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake input[type="email"] {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake input[type="tel"] {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake textarea {
}

/** Ordered & Unordered lists
------------------------------------------------------------ */
.wpcf7 .cf7s-choc-shake ol,
.wpcf7 .cf7s-choc-shake ul,
.wpcf7 .cf7s-choc-shake li {
}

.wpcf7 .cf7s-choc-shake ol {
}

.wpcf7 .cf7s-choc-shake li {
margin-bottom: 5px;
}

.wpcf7 .cf7s-choc-shake li label {
}

.wpcf7 .cf7s-choc-shake .wpcf7-list-item {
}

.wpcf7 .cf7s-choc-shake .wpcf7-list-item-label {
margin-right: 7px;
}

/** Checkboxes, Radio Buttons and Drop Down Menus
------------------------------------------------------------ */
.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake input[type="checkbox"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake input[type="radio"] {
margin-right: 6px;
background: none;
}

.wpcf7 .cf7s-choc-shake select {
margin-bottom: 8px;
margin-left: 13px;
padding: 5px;
border: 1px solid #bfa48e;
background: #dec29d;
}

.wpcf7 .cf7s-choc-shake select option {
}

.wpcf7 .cf7s-choc-shake select option:hover {
color: #fff;
background: #bca17d;
}

.wpcf7 .cf7s-choc-shake .wpcf7-checkbox .wpcf7-list-item,
.wpcf7 .cf7s-choc-shake .wpcf7-radio .wpcf7-list-item {
margin-left: 13px;
}

/** Other Fields
------------------------------------------------------------ */

/** Submit Buttons
------------------------------------------------------------ */
.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake input[type="submit"] {
padding: 5px 15px;
color: #fff;
border: 1px solid #c9b3a0;
background: #bca17d;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake input[type="submit"]:hover {
color: #866c4a;
background: #dec29d;
}

/** Special Classes
NOTE: Special Classes are classes added in the CF7 Form HTML for a particular form
------------------------------------------------------------ */

/** Ready Styles
------------------------------------------------------------ */
.wpcf7 .cf7s-choc-shake .singleline {
}

.wpcf7 .cf7s-choc-shake .singleline li {
}

.wpcf7 .cf7s-choc-shake .singleline input {
}

.wpcf7 .cf7s-choc-shake .horizontal,
.wpcf7 .cf7s-choc-shake .checkbox-horizontal,
.wpcf7 .cf7s-choc-shake .radio-horizontal {
}

.wpcf7 .cf7s-choc-shake .box {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #c9b3a0;
background: #ccb7a4;
}

.wpcf7 .cf7s-choc-shake .box select {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake .grid-hover [data-row-span] [data-field-span]:hover {
background: #fff7ef;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake .grid-lined {
border-top: 1px solid #c9b3a0;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake .grid-lined [data-row-span] {
border-bottom: 1px solid #c9b3a0;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake .grid-lined [data-row-span] [data-field-span] {
border-right: 1px solid #c9b3a0;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake .grid-lined [data-row-span] [data-field-span]:first-child {
border-left: 1px solid #c9b3a0;
}

/* Needed to over-write Ready Default styling in cf7s-ready.css */
@media only screen and (min-width: 0) and (max-width: 700px) {
    .wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake .grid-lined [data-row-span] {
        border-bottom: none;  /* Needed so don't get additional line */
    }
    .wpcf7  .wpcf7-form.cf7skins.cf7s-choc-shake .grid-lined [data-row-span] [data-field-span] {
        border-bottom: 1px solid #c9b3a0;
        border-left: 1px solid #c9b3a0;
    }
}

/** Multi Styles
------------------------------------------------------------ */

/* Multi Fixes */
.wpcf7 .cf7s-choc-shake.cf7multi {
}

.wpcf7 .cf7s-choc-shake.cf7multi .etabs li {
}

/* Easytabs */
.wpcf7 .cf7s-choc-shake.cf7multi .tab-container {
}

.wpcf7 .cf7s-choc-shake.cf7multi .etabs {
}

.wpcf7 .cf7s-choc-shake.cf7multi .tab {
border: 1px solid #bfa48e;
border-bottom: none;
background: #dec29d;
}

.wpcf7 .cf7s-choc-shake.cf7multi .tab:hover {
background: #bca17d;;
}

.wpcf7 .cf7s-choc-shake.cf7multi .tab a {
color: #866c4a;
}

.wpcf7 .cf7s-choc-shake.cf7multi .tab a:hover {
color: #fff;;
}

.wpcf7 .cf7s-choc-shake.cf7multi .tab.active {
background: #fff;
}

.wpcf7 .cf7s-choc-shake.cf7multi .tab a.active {
}

.wpcf7 .cf7s-choc-shake.cf7multi .tab a.active:hover {
color: #866c4a;
}

.wpcf7 .cf7s-choc-shake.cf7multi .epanels {
border: 1px solid #bfa48e;
}

.wpcf7 .cf7s-choc-shake.cf7multi .panel-container {
}

/* Navigation */
.wpcf7 .cf7s-choc-shake.cf7multi .navigation {
}

.wpcf7 .cf7s-choc-shake.cf7multi .navigation .previous,
.wpcf7 .cf7s-choc-shake.cf7multi .navigation .next {
color: #fff;
border: 1px solid #c9b3a0;
background: #bca17d;
}

.wpcf7 .cf7s-choc-shake.cf7multi .navigation .previous:hover,
.wpcf7 .cf7s-choc-shake.cf7multi .navigation .next:hover {
color: #866c4a;
background: #dec29d;
}

/* Pagination */
.wpcf7 .cf7s-choc-shake.cf7multi .pagination {
}

/* Start & End Tabs */
.wpcf7 .cf7s-choc-shake.cf7multi .navigation .start,
.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake.cf7multi .navigation .end {
padding: 5px 10px;
border: 1px solid #c9b3a0;
background: #bca17d;
}

.wpcf7 .cf7s-choc-shake.cf7multi .navigation .start:hover,
.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake.cf7multi .navigation .end:hover {
color: #866c4a;
background: #dec29d;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake.cf7multi .navigation .end {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-choc-shake.cf7multi .navigation .end:hover {
}

/* Progress Bar */
.wpcf7 .cf7s-choc-shake.cf7multi .cf7m-progress {
border: 1px solid #c9b3a0;
background: #e1cfbf;
}

.wpcf7 .cf7s-choc-shake.cf7multi .cf7m-progress div {
background: #bca17d;
}

/* Thank You Tab */
.wpcf7 .cf7s-choc-shake.cf7multi .cf7m-thanks {
}

CF7 Template: Registration Form – Golden Brown

CF7 Template: Registration Form - Golden Brown

HTML

<div class="cf7s-golden-brown">
<fieldset>
	<legend>Registration</legend>
	<ol>
		<li> Name [text cf7s-name] </li>
		<li> Address [text cf7s-address] </li>
		<li> City [text cf7s-city] </li>
		<li> State / Province / Region [text cf7s-state] </li>
		<li> Phone Number [tel cf7s-phone] </li>
		<li> Email [email cf7s-email] </li>
		<li> Message [textarea cf7s-special-needs] </li>
		<li> Preferred Contact Method [radio cf7s-radio1 default:1 "Email" "Phone"] </li>
		<li> Drop-down menu [select cf7s-select1 "Option 1" "Option 2" "Option 3"] </li>
		<li> Checkboxes [checkbox cf7s-checkbox1 "Option 1" "Option 2" "Option 3"] </li>
	</ol>
	[submit "Submit"]
</fieldset>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempus pharetra vehicula. Aliquam pellentesque mi non scelerisque placerat.</p>
</div>

CSS

/** Form & Controls
Use to style the overall CF7 form
------------------------------------------------------------ */
.wpcf7 .cf7s-golden-brown {
	padding: 20px 50px;
	color: #fff;
	border: 1px solid #9c4a39;
	background: #853c1b;
}

/** Fieldset, Legend, Label
------------------------------------------------------------ */
.wpcf7 .cf7s-golden-brown fieldset {
	margin: 10px 0;	
	padding: 10px 15px;
	border: 1px solid #87230e;
	background: #bb763d;
}

.wpcf7 .cf7s-golden-brown legend {
	font-weight: bold;
	padding: 5px 50px;
	color: #cc9f58;
	border: 1px solid #cc9f58;
	background: #200d05;
}

.wpcf7 .cf7s-golden-brown label {
	font-weight:bold;
}

.wpcf7 .cf7s-golden-brown fieldset p {
}

.wpcf7 .cf7s-golden-brown fieldset fieldset {
	margin: 10px 0;
	background: #853c1b;
}

.wpcf7 .cf7s-golden-brown fieldset fieldset legend {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown fieldset fieldset input,
.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown fieldset fieldset textarea {
}

/** Text Fields
------------------------------------------------------------ */
.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown input,
.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown textarea {
	margin-bottom: 8px;
	padding: 8px;
	border: 1px solid #87230e;
	background: #cc9f58;
}

	/*** FIX - Placeholder text */

	.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown ::-webkit-input-placeholder {
    color: #bb763d;
	}
	.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown :-moz-placeholder {
	   color: #bb763d;
	   opacity: 1;
	}
	.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown ::-moz-placeholder {
	   color: #bb763d;
	   opacity: 1;
	}
	.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown :-ms-input-placeholder {
	   color: #bb763d;
	}

.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown input[type="text"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown input[type="email"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown input[type="tel"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown input[type="url"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown input[type="number"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown input[type="range"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown input[type=date],
.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown input[type=file] {
}

.wpcf7 .cf7s-golden-brown input[type="text"] {
}

.wpcf7 .cf7s-golden-brown input[type="email"] {
}

.wpcf7 .cf7s-golden-brown input[type="tel"] {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown textarea {
}

/** Ordered & Unordered lists
------------------------------------------------------------ */
.wpcf7 .cf7s-golden-brown ol,
.wpcf7 .cf7s-golden-brown ul,
.wpcf7 .cf7s-golden-brown li {
}

.wpcf7 .cf7s-golden-brown ol {
}

.wpcf7 .cf7s-golden-brown li {
}

.wpcf7 .cf7s-golden-brown li label {
}

.wpcf7 .cf7s-golden-brown .wpcf7-list-item {
}

.wpcf7 .cf7s-golden-brown .wpcf7-list-item-label {
	font-weight: normal;	
}

/** Checkboxes, Radio Buttons and Drop Down Menus
------------------------------------------------------------ */
.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown input[type="checkbox"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown input[type="radio"] {
	margin-right: 6px;
	background: none;
}

.wpcf7 .cf7s-golden-brown select {
	margin-bottom: 8px;
	padding: 5px;
	color: #200d05;
	border: 1px solid #87230e;
	background: #dfc9a7;
}

.wpcf7 .cf7s-golden-brown select option {
	padding: 2px 5px;
}

.wpcf7 .cf7s-golden-brown select option:hover {
	background: #cc9f58;
}

.wpcf7 .cf7s-golden-brown .wpcf7-checkbox .wpcf7-list-item,
.wpcf7 .cf7s-golden-brown .wpcf7-radio .wpcf7-list-item {
	margin-left: 13px;
}

/** Other Fields
------------------------------------------------------------ */


/** Submit Buttons
------------------------------------------------------------ */
.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown input[type="submit"] {
	font-weight: bold;
	padding: 5px 50px;
	color: #cc9f58;
	border: 1px solid #cc9f58;
	background: #200d05;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown input[type="submit"]:hover {
	color: #fff;
	border-color: #fff;
}


/** Special Classes
NOTE: Special Classes are classes added in the CF7 Form HTML for a particular form 
------------------------------------------------------------ */


/** Ready Styles
------------------------------------------------------------ */
.wpcf7 .cf7s-golden-brown .singleline {
}

.wpcf7 .cf7s-golden-brown .singleline li {
}

.wpcf7 .cf7s-golden-brown .singleline input {
}

.wpcf7 .cf7s-golden-brown .horizontal,
.wpcf7 .cf7s-golden-brown .checkbox-horizontal,
.wpcf7 .cf7s-golden-brown .radio-horizontal {
}

.wpcf7 .cf7s-golden-brown .box {
	margin-bottom: 10px;
	padding: 10px;
	border: 1px solid #853c1b;
	background: #cc9f58;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown .box input,
.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown .box textarea {
	color: #853c1b;
	background: #fff;
}

.wpcf7 .cf7s-golden-brown .box select {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown .grid-hover [data-row-span] [data-field-span]:hover {
	background: #dfc9a7;
	color: #200d05;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown .grid-lined {
	border-top: 1px solid #853c1b;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown .grid-lined [data-row-span] {
	border-bottom: 1px solid #853c1b;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown .grid-lined [data-row-span] [data-field-span] {
	border-right: 1px solid #853c1b;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown .grid-lined [data-row-span] [data-field-span]:first-child {
	border-left: 1px solid #853c1b;
}

	/* Needed to over-write Ready Default styling in cf7s-ready.css */
	@media only screen and (min-width: 0) and (max-width: 700px) {
		.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown .grid-lined [data-row-span] {
			border-bottom: none;  /* Needed so don't get additional line */
		}
		.wpcf7  .wpcf7-form.cf7skins.cf7s-golden-brown .grid-lined [data-row-span] [data-field-span] {
			border-bottom: 1px solid #853c1b;
			border-left: 1px solid #853c1b;
		}
	}

/** Multi Styles
------------------------------------------------------------ */

/* Multi Fixes */
.wpcf7 .cf7s-golden-brown.cf7multi {
}

.wpcf7 .cf7s-golden-brown.cf7multi .etabs li {
}

/* Easytabs */
.wpcf7 .cf7s-golden-brown.cf7multi .tab-container {
}

.wpcf7 .cf7s-golden-brown.cf7multi .etabs {
}

.wpcf7 .cf7s-golden-brown.cf7multi .tab {
	border: 1px solid #cc9f58;
	border-bottom: none;
	background: #200d05;
}

.wpcf7 .cf7s-golden-brown.cf7multi .tab a {
	color: #cc9f58;
}

.wpcf7 .cf7s-golden-brown.cf7multi .tab.active {
	background: #dfc9a7;
}

.wpcf7 .cf7s-golden-brown.cf7multi .tab a.active {
	color: #200d05;
}

.wpcf7 .cf7s-golden-brown.cf7multi .epanels {
	border: 1px solid #cc9f58;
	background: #dfc9a7;
}

.wpcf7 .cf7s-golden-brown.cf7multi .panel-container {
}

/* Navigation */
.wpcf7 .cf7s-golden-brown.cf7multi .navigation {
}

.wpcf7 .cf7s-golden-brown.cf7multi .navigation .previous,
.wpcf7 .cf7s-golden-brown.cf7multi .navigation .next {
	color: #cc9f58;
	border: 1px solid #cc9f58;
	background: #200d05;
}

.wpcf7 .cf7s-golden-brown.cf7multi .navigation .previous:hover,
.wpcf7 .cf7s-golden-brown.cf7multi .navigation .next:hover {
	color: #fff;
	border-color: #fff;
}

/* Pagination */
.wpcf7 .cf7s-golden-brown.cf7multi .pagination {
	color: #200d05;
}

/* Start & End Tabs */
.wpcf7 .cf7s-golden-brown.cf7multi .navigation .start,
.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown.cf7multi .navigation .end {
	padding: 5px 10px;
	color: #cc9f58;
	border: 1px solid #cc9f58;
	background: #200d05;
}

.wpcf7 .cf7s-golden-brown.cf7multi .navigation .start:hover,
.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown.cf7multi .navigation .end:hover {
	color: #fff;
	border-color: #fff;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown.cf7multi .navigation .end {
	font-weight: normal;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-golden-brown.cf7multi .navigation .end:hover {
}

/* Progress Bar */
.wpcf7 .cf7s-golden-brown.cf7multi .cf7m-progress {
	border: 1px solid #cc9f58;
	background: #dfc9a7;
}

.wpcf7 .cf7s-golden-brown.cf7multi .cf7m-progress div {
	background: #200d05;
}

/* Thank You Tab */
.wpcf7 .cf7s-golden-brown.cf7multi .cf7m-thanks {
}

CF7 Template: Survey Form – Fairy Floss

CF7 Template: Survey Form - Fairy Floss

HTML

<div class="cf7s-fairy-floss">
<fieldset>
	<legend>Survey Form</legend>
	<p>Please help us to serve you better by completing this survey. It should take around 5 minutes to complete.</p>
	<ol>
		<li> Overall, how satisfied are you with our product / service? [radio cf7s-survey1 default:1 "Very Satisfied" "Satisfied" "Neutral" "Unsatisfied" "Very Unsatisfied" " N/A"] </li>
		<li> Would you recommend our product / service to others? [radio cf7s-survey2 default:1 "Definitely" "Probably" "Not Sure" "Probably Not" "Definitely Not"] </li>
		<li> How long have you used our product / service? [radio cf7s-survey3 default:1 "Less than a month" "1-6 months" "1-3 years" "Over 3 Years" "Never used"] </li>
		<li> How often do you use our product / service? [radio cf7s-survey4 default:1 "Once a week" "2 to 3 times a month" "Once a month" "Less than once a month"] </li>
		<li> What aspect of the product / service were you most satisfied by? [radio cf7s-survey5 default:1 "Quality" "Price" "Purchase Experience" "Usage Experience" "Customer Service"] </li>
		<li> Overall, the product / service met my expectations? [radio cf7s-survey6 default:1 "Strongly Agree" "Agree" "Neutral" "Disagree" "Strongly Disagree" "Don't Know"] </li>
		<li> What do you like about the product / service?[textarea cf7s-survey7] </li>
		<li> Thinking of similar products / services offered by others, how would you compare the product / service offered by us? [radio cf7s-survey8 default:1 "Much Better" "Somewhat Better" "About the Same" "Somewhat Worse" "Much Worse" "Don't Know"] </li>
	</ol>
	[submit "Submit"]
</fieldset>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempus pharetra vehicula. Aliquam pellentesque mi non scelerisque placerat.</p>
</div>

CSS

/** Form & Controls
Use to style the overall CF7 form
------------------------------------------------------------ */
.wpcf7 .cf7s-fairy-floss {
	padding: 20px;
	color: #53568b;
	border: 1px solid #ffa8c6;
	background: #fff;
}

/** Fieldset, Legend, Label
------------------------------------------------------------ */
.wpcf7 .cf7s-fairy-floss fieldset {
	margin: 10px 0;
	padding: 15px 25px;
	border: 1px solid #ffa8c6;
	background: #ffd4e3;
}

.wpcf7 .cf7s-fairy-floss legend {
	font-size: 1.2em;
	padding: 3px 20px;
	color: #fff;
	border: 1px solid #fff;
	background: #b6b7ca;
}

.wpcf7 .cf7s-fairy-floss label {
}

.wpcf7 .cf7s-fairy-floss fieldset p {
}

.wpcf7 .cf7s-fairy-floss fieldset fieldset {
	margin: 10px 0;
	background: #ffdfeb;
}

.wpcf7 .cf7s-fairy-floss fieldset fieldset legend {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss fieldset fieldset input,
.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss fieldset fieldset textarea {
}

/** Text Fields
------------------------------------------------------------ */
.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss input,
.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss textarea {
	margin-bottom: 8px;
	padding: 8px;
	border: 1px solid #ffa8c6;
	background: #fff;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss input[type="text"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss input[type="email"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss input[type="tel"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss input[type="url"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss input[type="number"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss input[type="range"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss input[type=date],
.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss input[type=file] {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss input[type="text"] {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss input[type="email"] {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss input[type="tel"] {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss textarea {
}

/** Ordered & Unordered lists
------------------------------------------------------------ */
.wpcf7 .cf7s-fairy-floss ol,
.wpcf7 .cf7s-fairy-floss ul,
.wpcf7 .cf7s-fairy-floss li {
}

.wpcf7 .cf7s-fairy-floss ol {
}

.wpcf7 .cf7s-fairy-floss li {
	margin-bottom: 5px;
}

.wpcf7 .cf7s-fairy-floss li label {
}

.wpcf7 .cf7s-fairy-floss .wpcf7-list-item {
}

.wpcf7 .cf7s-fairy-floss .wpcf7-list-item-label {
	margin-right: 7px;
}

/** Checkboxes, Radio Buttons and Drop Down Menus
------------------------------------------------------------ */
.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss input[type="checkbox"],
.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss input[type="radio"] {
	margin-right: 6px;
	background: none;
}

.wpcf7 .cf7s-fairy-floss select {
	margin-bottom: 8px;
	padding: 5px;
	color: #53568b;
	border: 1px solid #ffa8c6;
	background: #fff;
}

.wpcf7 .cf7s-fairy-floss select option {
}

.wpcf7 .cf7s-fairy-floss select option:hover {
	background:#b6b7ca;
	color:#fff;
}

.wpcf7 .cf7s-fairy-floss .wpcf7-checkbox .wpcf7-list-item,
.wpcf7 .cf7s-fairy-floss .wpcf7-radio .wpcf7-list-item {
	margin-left: 13px;
}

/** Other Fields
------------------------------------------------------------ */


/** Submit Buttons
------------------------------------------------------------ */
.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss input[type="submit"] {
	padding: 5px 15px;
	color: #fff;
	border: 1px solid #53568b;
	background: #b6b7ca;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss input[type="submit"]:hover {
	color: #53568b;
	background: #ffd4e3;
}

/** Special Classes
NOTE: Special Classes are classes added in the CF7 Form HTML for a particular form 
------------------------------------------------------------ */


/** Ready Styles
------------------------------------------------------------ */
.wpcf7 .cf7s-fairy-floss .singleline {
}

.wpcf7 .cf7s-fairy-floss .singleline li {
}

.wpcf7 .cf7s-fairy-floss .singleline input {
}

.wpcf7 .cf7s-fairy-floss .horizontal,
.wpcf7 .cf7s-fairy-floss .checkbox-horizontal,
.wpcf7 .cf7s-fairy-floss .radio-horizontal {
}

.wpcf7 .cf7s-fairy-floss .box {
	margin-bottom: 15px;
	padding: 10px;
	border: 1px solid #ffa8c6;
	background: #ffdfeb;
}

.wpcf7 .cf7s-fairy-floss .box select {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss .grid-hover [data-row-span] [data-field-span]:hover {
	background: #ffeff5;

}.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss .grid-lined {
	border-top: 1px solid #ffa8c6;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss .grid-lined [data-row-span] {
	border-bottom: 1px solid #ffa8c6;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss .grid-lined [data-row-span] [data-field-span] {
	border-right: 1px solid #ffa8c6;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss .grid-lined [data-row-span] [data-field-span]:first-child {
	border-left: 1px solid #ffa8c6;
}

	/* Needed to over-write Ready Default styling in cf7s-ready.css */
	@media only screen and (min-width: 0) and (max-width: 700px) {
		.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss .grid-lined [data-row-span] {
			border-bottom: none;  /* Needed so don't get additional line */
		}
		.wpcf7  .wpcf7-form.cf7skins.cf7s-fairy-floss .grid-lined [data-row-span] [data-field-span] {
			border-bottom: 1px solid #ffa8c6;
			border-left: 1px solid #ffa8c6;
		}
	}

/** Multi Styles
------------------------------------------------------------ */

/* Multi Fixes */
.wpcf7 .cf7s-fairy-floss.cf7multi {
}

.wpcf7 .cf7s-fairy-floss.cf7multi .etabs li {
}

/* Easytabs */
.wpcf7 .cf7s-fairy-floss.cf7multi .tab-container {
}

.wpcf7 .cf7s-fairy-floss.cf7multi .etabs {
}

.wpcf7 .cf7s-fairy-floss.cf7multi .tab {
	border: 1px solid #ffa8c6;
	border-bottom: none;
	background: #ffd4e3;
}

.wpcf7 .cf7s-fairy-floss.cf7multi .tab a {
	color: #53568b;
}

.wpcf7 .cf7s-fairy-floss.cf7multi .tab.active {
	background: #fff;
}

.wpcf7 .cf7s-fairy-floss.cf7multi .tab a.active {
}

.wpcf7 .cf7s-fairy-floss.cf7multi .epanels {
	border: 1px solid #ffa8c6;
}

.wpcf7 .cf7s-fairy-floss.cf7multi .panel-container {
}

/* Navigation */
.wpcf7 .cf7s-fairy-floss.cf7multi .navigation {
}

.wpcf7 .cf7s-fairy-floss.cf7multi .navigation .previous,
.wpcf7 .cf7s-fairy-floss.cf7multi .navigation .next {
	padding: 5px 15px;
	color: #fff;
	border: 1px solid #53568b;
	background: #b6b7ca;
}

.wpcf7 .cf7s-fairy-floss.cf7multi .navigation .previous:hover,
.wpcf7 .cf7s-fairy-floss.cf7multi .navigation .next:hover {
	color: #53568b;
	background: #ffd4e3;
}

/* Pagination */
.wpcf7 .cf7s-fairy-floss.cf7multi .pagination {
}

/* Start & End Tabs */
.wpcf7 .cf7s-fairy-floss.cf7multi .navigation .start,
.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss.cf7multi .navigation .end {
	padding: 5px 15px;
	color: #fff;
	border: 1px solid #53568b;
	background: #b6b7ca;
}

.wpcf7 .cf7s-fairy-floss.cf7multi .navigation .start:hover,
.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss.cf7multi .navigation .end:hover {
	color: #53568b;
	background: #ffd4e3;
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss.cf7multi .navigation .end {
}

.wpcf7 .wpcf7-form.cf7skins.cf7s-fairy-floss.cf7multi .navigation .end:hover {
}

/* Progress Bar */
.wpcf7 .cf7s-fairy-floss.cf7multi .cf7m-progress {
	border: 1px solid #ffa8c6;
	background: #ffd4e3;
}

.wpcf7 .cf7s-fairy-floss.cf7multi .cf7m-progress div {
	background: #b6b7ca;
}

/* Thank You Tab */
.wpcf7 .cf7s-fairy-floss.cf7multi .cf7m-thanks {
}

Support My Work

If you enjoy my content, consider buying me a coffee or shopping through my Rakuten link to support me!

Buy Me a Coffee Shop with Rakuten

Victor

Founder of WPUtopia.com🕵️I would appreciate it if you could leave me a comment!

Website
Related Articles

You May Also Like

TypePad is shutting down

Blogging service TypePad is shutting down and taking all blog...

Typepad is the reliable, flexible blogging platform that puts the publisher in control. Plus great...

Read More
fake captcha malware

Fake Captchas: WordPress Sites Unwittingly Tricking Users into Executing Malicious...

In a startling revelation from cybersecurity experts at the Israel National Digital Agency, a global...

Read More
WordPress Contact Form 7 Redirection Plugin

WordPress Contact Form 7 Redirection Plugin Vulnerability Hits 300k Sites

A serious security problem has been found in the Redirection for Contact Form 7 plugin,...

Read More

Send Message

Chat with me

Start a Conversation

Hi! Let's connect on your preferred platform.

WhatsApp Fiverr Upwork
Victor Avatar