Contact Form 7 w motywach WordPress zbudowanych na framework-u Bootstrap 3

Contact form 7 - kod formularza

<div class="row">

	<div class="col-sm-6">
		<div class="form-group">
			<label for="imie">Imię</label>
			[text* your-name class:form-control id:imie]
		</div>
	</div>

	<div class="col-sm-6">
		<div class="form-group">
			<label for="nazwisko">Nazwisko</label>
			[text* your-surname class:form-control id:nazwisko]
		</div>
	</div>

	<div class="col-sm-6">
		<div class="form-group">
			<label for="email">Adres email</label>
			[email* your-email class:form-control id:email]
		</div>
	</div>

	<div class="col-sm-6">
		<div class="form-group">
			<label for="telefon">Telefon</label>
			[text* your-phone class:form-control id:telefon]
		</div>
	</div>

	<div class="col-sm-12">
		<div class="form-group">
			<label for="subject">Temat wiadomości</label>
			[text* your-subject class:form-control id:subject]
		</div>
	</div>

	<div class="clearfix"></div>
	
	<div class="col-sm-12">
		<div class="form-group">
			<label for="wiadomosc">Treść wiadomości</label>
			[textarea* your-message class:form-control id:wiadomosc]
		</div>
	</div>
	
	<div class="clearfix"></div>
	
	<div class="col-sm-12">
		<div class="form-group">
			[submit class:btn class:btn-primary class:pull-right "Wyślij"]
		</div>
	</div>

</div>

Dodatkowe style CSS dla lepszej integracji

label{font-weight:400;color:grey}
input,textarea{border-radius:0!important}
input:focus,textarea:focus{box-shadow:none!important;border-color:#8fc941!important}
textarea{max-height:100px!important}
.form-icon{color:#e6e6e6;font-size:220px}
.form-icon13{width:100px;height:100px;text-align:center;line-height:100px;font-size:110px;color:#e6e6e6}
.wpcf7-mail-sent-ng,.wpcf7-validation-errors{padding:15px!important;border:1px solid transparent!important;border-radius:4px!important;background-color:#f2dede!important;border-color:#ebccd1!important;color:#a94442!important;margin:30px 0!important}
.wpcf7-mail-sent-ng h4,.wpcf7-validation-errors h4{margin-top:0!important;color:inherit!important}
.wpcf7-mail-sent-ng .alert-link,.wpcf7-validation-errors .alert-link{font-weight:700!important}
.wpcf7-mail-sent-ng>p,.wpcf7-mail-sent-ng>ul,.wpcf7-validation-errors>p,.wpcf7-validation-errors>ul{margin-bottom:0!important}
.wpcf7-mail-sent-ng>p+p,.wpcf7-validation-errors>p+p{margin-top:5px!important}
.wpcf7-mail-sent-ng hr,.wpcf7-validation-errors hr{border-top-color:#e4b9c0!important}
.wpcf7-mail-sent-ng .alert-link,.wpcf7-validation-errors .alert-link{color:#843534!important}
.wpcf7-mail-sent-ok{padding:15px!important;border:1px solid transparent!important;border-radius:4px!important;background-color:#dff0d8!important;border-color:#d6e9c6!important;color:#3c763d!important;margin:30px 0!important}
.wpcf7-mail-sent-ok h4{margin-top:0!important;color:inherit!important}
.wpcf7-mail-sent-ok .alert-link{font-weight:700!important}
.wpcf7-mail-sent-ok>p,.wpcf7-mail-sent-ok>ul{margin-bottom:0!important}
.wpcf7-mail-sent-ok>p+p{margin-top:5px!important}
.wpcf7-mail-sent-ok hr{border-top-color:#c9e2b3!important}
.wpcf7-mail-sent-ok .alert-link{color:#2b542c!important}
.wpcf7-not-valid{border:1px solid #f66}

LESS

//
// Form Controls
// --------------------------------------------------

label{
	font-weight: normal;
	color: @gray-50;
}

input, textarea{
	border-radius: 0!important;

	&:focus {
		box-shadow: none!important;
		border-color: @brand-primary!important;
	}
}

textarea{
	max-height: 100px!important;
}

.form-icon {
	@icon-size: 110px;
	color: @gray-90;
	font-size: @icon-size * 2;
}

.form-icon13 {
	@icon-size: 100px;
	width: @icon-size;
	height: @icon-size;
	text-align: center;
	line-height: @icon-size;
	font-size: @icon-size * 1.1;
	color: @gray-90;
}

.wpcf7-validation-errors, .wpcf7-mail-sent-ng {
	.alert!important;
	.alert-danger!important;
	margin: 30px 0!important;
}

.wpcf7-mail-sent-ok {
	.alert!important;
	.alert-success!important;
	margin: 30px 0!important;
}

.wpcf7-not-valid {
	border: solid lighten(#f00, 20%) 1px;
}