Estilizar Contact Form 7

Nada que algumas mudanças no css não resolva. 🙂
É aconselhável que você ative um tema filho para fazer as alterações a seguir, porque se alterar algo direto no style.css do tema e houver uma atualização do mesmo você irá perder todas as modificações feitas.

Aumentar a margem entre os forms:

.wpcf7-form-control {
	margin-bottom: 20px;
}

Mude o valor “20px” de acordo com o seu gosto.

Aumentar a margem nos forms em vários lados:

.wpcf7-form-control {
	margin: 5px 10px 20px 0;
}

Aumentar o tamanho dos forms:

.wpcf7-form-control {
	padding: 10px;
}

Estes são alguns exemplos de como estilizar seu Contact Form 7. Muitas outras mudanças podem serem feitas se você tiver conhecimento em css.

Para se encaixar perfeitamente em dispositivos móveis vai depender se seu tema é responsivo ou não.
Se for responsivo, é só você fazer as mudanças na classe wpcf7-form-control de acordo com as media queries do seu tema.

Espero ter ajudado!

Genneral posta o link da página em questão com o CF7 que você quer personalizar, pra mim entender melhor o que você quer mudar e ver se posso te ajudar.

@genneral, baseado aproximadamente no estilo do seu site (+ classe .imgradio), fiz um formulário do zero no CF7 de exemplo, daí é só você fazer as adaptações necessárias. Segue abaixo o código completo:

Form responsivo e com texto abaixo do botão:

<div class="radiooption_content">
<div class="texto-form">CORES:</div>
<div class="radiooption"><img class="imgradio" src="http://img.bomnegocio.com/thumbs/33/3300658180.jpg" />[radio radio-2101 "Amarelo"]</div>

<div class="radiooption"><img class="imgradio" src="http://img.bomnegocio.com/thumbs/32/3292889858.jpg" />[radio radio-2101 "Prata"]</div>

<div class="radiooption"><img class="imgradio" src="http://img.bomnegocio.com/thumbs/42/4240635269.jpg" />[radio radio-2101 "Laranjado"]</div>

<div class="radiooption"><img class="imgradio" src="http://img.bomnegocio.com/thumbs/10/1085445700.jpg" />[radio radio-2101 "Branco"]</div>

<div class="radiooption"><img class="imgradio" src="http://img.bomnegocio.com/thumbs/42/4263619218.jpg" />[radio radio-2101 "Preto"]</div>

<div class="radiooption"><img class="imgradio" src="http://img.bomnegocio.com/thumbs/42/4287505340.jpg" />[radio radio-2101 "Verde"]</div>
</div>

Obs.: Não dá pra deixar o formulário responsivo com checkbox exclusiva, tem que ser botão radio.

CSS:

.radiooption_content {
	border: 1px solid #D8D8D8;
	margin-bottom: 10px;
	padding: 10px 10px 20px;
	width: 93%;
}
.texto-form {
	font-size: 16px;
	margin: 0 0 20px 10px;
}
.radiooption {
	float: left;
	margin: 0 30px 40px;
	text-align: center;
}
.wpcf7-list-item.first.last > input {
	margin-top: 15px;
}
.imgradio, .wpcf7-list-item-label {
	display: block;
}

Veja o resultado aqui: http://jsfiddle.net/ea8wwujk/3/

Se quiser, você pode estilizar o botão, veja essas dicas:
http://stackoverflow.com/questions/18272497/styling-input-radio-with-css
http://stackoverflow.com/questions/4641752/css-how-to-style-a-selected-radio-buttons-label

Pra resolver o problema da borda basta você criar uma div vazia com clear both antes do fechamento de cada div content.

Exemplo:

<div class="radiooption_content">
<div class="texto-form">CORES:</div>
<div class="radiooption"><img class="imgradio" src="http://img.bomnegocio.com/thumbs/33/3300658180.jpg" />[radio radio-2101 "Amarelo"]</div>

<div class="radiooption"><img class="imgradio" src="http://img.bomnegocio.com/thumbs/32/3292889858.jpg" />[radio radio-2101 "Prata"]</div>

<div style="clear:both;"></div>
</div>

Pelo que ví, você não tá usando o botao exclusivo, ou seja só pode escolher um (pensei que você queria usar dessa forma), sendo assim você pode usar checkbox nas duas contents seguindo o modelo de exemplo que postei.

Amigo, você pode usar botão radio também pra selecionar várias opções, é só você usar nomes diferentes.

Exemplo:

[radio radio-2101 "Amarelo"]
[radio radio-2102 "Prata"]
[radio radio-2103 "Laranjado"]