En este HUB Content te mostraremos cómo personalizar el formulario de contacto de Contact Form 7 he integrarlo completamente con Divi. Con este mini-tuto nuestro profesor Jerry Castillo te mostrará como lograr esta solución si quieres usar este formulario y además te dará el snippet para lograrlo.
Recuerda que si quieres crear un formulario condicional para presupuesto con Divi tenemos un tutorial premium donde te enseñamos a hacerlo de manera sencilla.
Para este mini-tuto o tip de WordPress, ya debes tener instalado el plugin gratuito de contact form 7 que puedes encontrar en el repositorio de WordPress.
Una vez que tengas creado el primer formulario, puedes reemplazar el html del mismo por el siguiente HTML y luego colocar el CSS que nuestro profesor ofrece acá abajo.
Snippet de HTML y CSS para personalizar formulario de contact form 7
Copia el código HTML de acá abajo y luego de eso, ve al menú de WordPress Contacto > Formulario de contacto > ingresa al formulario a editar > Formulario y pega el código HTML.
<div id="responsive-form" class="clearfix">
<div class="form-row">
<div class="column-half"><label>Nombre [text* first-name]</label></div>
<div class="column-half"><label>Apellidos [text* last-name]</label></div>
</div>
<div class="form-row">
<div class="column-half"><label>Email [email* your-email]</label></div>
<div class="column-half"><label>Teléfono [text* your-phone]</label></div>
</div>
<div class="form-row">
<div class="column-full"><label>Tu mensaje [textarea your-message]</label></div>
</div>
<div class="form-row">
<div class="column-full">[submit "Enviar"]</div>
</div>
</div><!--end responsive-form-->Antes de editar el formulario de contact form 7 en Divi, por defecto se vería así:
Para cambiar los estilos del formulario, copia el código CSS de acá abajo y luego de eso, ve a las opciones del tema Divi > Generales > insertar código CSS personalizado y pega el código CSS.
#responsive-form{
max-width:90%/*60% /*-- cambiar esto para conseguir el ancho de la forma deseada --*/;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-half, .column-full{
float: left;
position: relative;
padding: 0.4rem;
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%;
}
}
/*-------------ESTILOS PARA EL FORMULARIO------------*/
.wpcf7 label{
width: 100%;
color: #444c7e;
font-family: 'Roboto',Droid Sans, Helvetica, Arial, Lucida, sans-serif;
font-size: 18px;
}
.wpcf7-textarea,input[type="text"],input[type="tel"], input[type="email"]{
resize: none; /*bloquea que redimensionen el textarea del formulario*/
width: 100%;
border-radius: 2px;
border-color: #eee;
font-family: 'Roboto',Droid Sans, Helvetica, Arial, Lucida, sans-serif;
font-size: 18px;
padding: 15px;
margin-bottom:5px;
border-width: 2px;
background: #eee;
}
.wpcf7-submit{
width: 30%;
border-radius: 2px;
background-color: #3b61e4;
color: #fff;
font-family: 'Roboto Bold',Droid Sans, Helvetica, Arial, Lucida, sans-serif;
font-size: 18px;
padding: 20px;
margin-bottom:15px;
/*para centrar*/
display:block;
margin-left: auto;
margin-right: auto;
/**************/
}
.wpcf7-submit:hover{
background-color: #5c6ac3;
color: #fff;
box-shadow: 0 4px 16px rgba(92, 106, 195, 1);
transition: all 0.2s ease;
}
Una vez tengas lo anterior hecho, puedes cambiar el CSS tanto como desees, podrás ver como quedó el resultado acá:
Y listo! Super fácil, ¿verdad?
¿Te ha gustado? No olvides compartirlo y comentar nuestro contenido. Nos vemos en un próximo Snippet.
0 comentarios