Seleccionar página
4
Volver al contenido del HUB: Hub | Tips

Cómo personalizar el formulario de contacto de Contact Form 7

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í:

Antes - Cómo personalizar el formulario de contacto de Contact Form 7

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á:

Despues - Cómo personalizar el formulario de contacto de Contact Form 7

Y listo! Super fácil, ¿verdad?

¿Te ha gustado? No olvides compartirlo y comentar nuestro contenido. Nos vemos en un próximo Snippet.

Contenido Relacionado

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *