Contact Form 7, Colocar campos lado a lado.

[Agatacat 0]

Estou usando o Contact Form 7 e o plugin CF7 SKINS,  preciso deixar alguns campo lado a lado:

<label> Cidade
[text* text-317] </label>

<label> Estado
[text* text-317] </label>

<label> Código Postal
[text* text-317] </label>

<label> Telefone para Contato
[tel* tel-459] </label>

<label> Seu e-mail
[email* your-email] </label>

Assim que está atualmente, e os campos ficam um embaixo do outro, gostaria de deixar os campos Cidade e Estado um do lado do outro, alguém saberia como fazer isso?

E também gostaria de saber como posso limitar as caixas de texto, como podem ver na imagem ela vai até a lateral máxima da página.
Agradeço desde já pela ajuda.

[Jack Oliveira 1]

2 horas atrás, Agatacat disse:

Estou usando o Contact Form 7 e o plugin CF7 SKINS,  preciso deixar alguns campo lado a lado:

<label> Cidade
[text* text-317] </label>

<label> Estado
[text* text-317] </label>

<label> Código Postal
[text* text-317] </label>

<label> Telefone para Contato
[tel* tel-459] </label>

<label> Seu e-mail
[email* your-email] </label>

Assim que está atualmente, e os campos ficam um embaixo do outro, gostaria de deixar os campos Cidade e Estado um do lado do outro, alguém saberia como fazer isso?

E também gostaria de saber como posso limitar as caixas de texto, como podem ver na imagem ela vai até a lateral máxima da página.
Agradeço desde já pela ajuda.

Boa noite eu acredito que assim vai te ajudar...

 

<div class="col-md-6">
	<div class="form-group">
<label>Cidade:</label>
	<input class="form-control" name="cidade" required>
</div>
	</div>
	
<div class="col-md-6">
	<div class="form-group">
<label>Estado:</label>
	<input class="form-control" name="estado" required>
</div>
	</div>
	
<div class="col-md-12">
	<div class="form-group">
<label>Código Posta:</label>
	<input class="form-control" name="codigo_postal" required>
</div>
	</div>
	
<div class="col-md-12">
	<div class="form-group">
<label>Telefone para Contato:</label>
	<input class="form-control" name="telefone" required>
</div>
	</div>
	
<div class="col-md-12">
	<div class="form-group">
<label>Seu e-mail:</label>
	<input class="form-control" type="email" name="email" required>
</div>
	</div>
	
<div class="col-md-12">
	<div class="form-group">
<label>Descrição:</label>
	<textarea rows="6" class="form-control" name="descricao" required></textarea>
</div>
	</div>	

Define o tamanho class="col-md-6" se o input ficar grande com o 12 coloca 8 

[Jack Oliveira 1]

3 horas atrás, Agatacat disse:

Estou usando o Contact Form 7 e o plugin CF7 SKINS,  preciso deixar alguns campo lado a lado:

<label> Cidade
[text* text-317] </label>

<label> Estado
[text* text-317] </label>

<label> Código Postal
[text* text-317] </label>

<label> Telefone para Contato
[tel* tel-459] </label>

<label> Seu e-mail
[email* your-email] </label>

Assim que está atualmente, e os campos ficam um embaixo do outro, gostaria de deixar os campos Cidade e Estado um do lado do outro, alguém saberia como fazer isso?

E também gostaria de saber como posso limitar as caixas de texto, como podem ver na imagem ela vai até a lateral máxima da página.
Agradeço desde já pela ajuda.

 

Ola me desculpe eu não tinha vista que era no wordpress

mais pode fazer mais o menos isso aqui

 

<div class="clearfix">
    <div id="left">
        Nome [text* your-name] <br/>
        E-mail [text your-subject]
    </div>
    <div id="right">
        Assunto [email* your-email] <br/>
        Telefone [tel tel-207]
    </div>
</div>

Mensagem [textarea your-message] <br/>

[submit "Enviar"]

no CSS

faz assim

/*--- form 2 colunas ---*/
#left {
width: 49%;
float: left;
margin-right:2%;
}

#right {
width: 49%;
float: left;
}

.clearfix:after {
content:"\0020";
display:block;
height:0;
clear:both;
visibility:hidden;
overflow:hidden;
margin-bottom:30px;
}

.clearfix {
display:block;
}
/*--- form 2 colunas fim ---*/

 

Resultado sera isso

Qualquer coisa se tiver duvida ainda veja mais no link a baixo....

Outro ex: aqui...

Boa sorte