Share with your friends










Enviar

CF7 contact form 7 cómo crear formulario en dos columnas

CF7 formulario en dos columnas

La mayoría del tiempo la dedicamos a encontrar código para solucionar problemas a la hora de crear páginas web, si nos dedicamos al diseño páginas web en Valencia, nos gustan códigos, diseño y comunicación.. desde hace más de 17 años. Hoy por fin he encontrado un artículo decente, fácil y que explica cómo hacer un formulario en nuestra página web WordPress con el famoso plugin Contact Form 7.

Iré al grano, tendremos por un lado que insertar este HTML en el formulario de contacto:
La clase “form-row” sirve para hacer una fila
La clase “column-half” sirve para hacer una mitad columna


<div id="responsive-form" class="clearfix">
<div class="form-row">
<div class="column-half">First Name [text* first-name]</div>

<div class="column-half">Last Name [text* last-name]</div>
</div>

<div class="form-row">
<div class="column-half">Email [email* your-email]</div>

<div class="column-half">Phone [text* your-phone]</div>
</div>

<div class="form-row">
<div class="column-full">Subject [text* your-subject]</div>
</div>

<div class="form-row">
<div class="column-full">Your message [textarea your-message]</div>
</div>

<div class="form-row">
<div class="column-full">[submit "Send"]</div>
</div>
</div>

<!--end responsive-form-->

Y luego añadir este CSS a nuestra web que maqueterá el HTML del formulario en dos columnas:

#responsive-form{
	max-width:600px /*-- change this to get your desired form width --*/;
	margin:0 auto;
        width:100%;
}
.form-row{
	width: 100%;
}
.column-half, .column-full{
	float: left;
	position: relative;
	padding: 0.65rem;
	width:100%;
	-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) { 
	.column-half{
		width: 50%;
	}
} 

Y este otro que sirve para maquetar los campos como en la foto:

CF7 formulario en dos columnas

.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
	width: 100%;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 3px;
	-webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	      box-sizing: border-box
}
.wpcf7 input[type="text"]:focus{
	background: #fff;
}
.wpcf7-submit{
	float: right;
	background: #CA0002;
	color: #fff;
	text-transform: uppercase;
	border: none;
	padding: 8px 20px;
	cursor: pointer;
}
.wpcf7-submit:hover{
	background: #ff0000;
}
span.wpcf7-not-valid-tip{
	text-shadow: none;
	font-size: 12px;
	color: #fff;
	background: #ff0000;
	padding: 5px;
}
div.wpcf7-validation-errors { 
	text-shadow: none;
	border: transparent;
	background: #f9cd00;
	padding: 5px;
	color: #9C6533;
	text-align: center;
	margin: 0;
	font-size: 12px;
}
div.wpcf7-mail-sent-ok{
	text-align: center;
	text-shadow: none;
	padding: 5px;
	font-size: 12px;
	background: #59a80f;
	border-color: #59a80f;
	color: #fff;
	margin: 0;
}

Encontrado aquí: gracias Bagetharan!

Author Stefano Andreoli

CEO y Creative Director en Estudio Andreoli™. Docente en Monster Academy, HTML.it, IED Madrid y Jurado en Mediastars Festival. Pues.. un poco liado.

Más artículos de Stefano Andreoli

Dejar un comentario

0
Connecting
Please wait...
Enviar mensaje

¡Lo sentimos! No estamos delante del ordenador ahora. Déjanos un mensaje y nos pondremos en contacto contigo, lo antes posible.

Nombre
* Email
Teléfono
* Pregunta aquí...
Chatea ahora

Ahorra tiempo presentándote, en 2 segundos estaremos contigo.

Nombre
* Email
* En qué podemos ayudarte...
Estamos online
Comentarios

¿Te ha sido útil? Déjanos un comentario por favor, así sabremos eventualmente a quién despedir.

¿Cómo valoras estas respuestas?
INFORMACIÓN ÚTIL

¿Cuanto puede costar tu web?

Usa nuestro simulador de precios para tener una idea de los costes para realizar tu nueva página web.
VER PRECIOS