Contact form con visual composer

Contact form 7 con Visual Composer – Dale estilos a tu formularios

Contact Form 7 es uno de los plugins más usados para la creación de formularios de contacto en WordPress, fácil de usar y efectivo, ya viene casi todo configurado, solo tienes que personalizar algún parámetro y te genera automáticamente un shortcode para pegar en tu página de contacto, incluso tiene la opción de integrarlo con el reCAPTCHA de Google (olvídate de instalar otro plugin para eso)

Hasta aquí todo bien, pero si queremos poner nuestro formulario más bonito, es donde se complica la cosa, ya que el editor es en HTML puro, y si trabajamos con un maquetador visual que tiene recursos muy chulos, porque no los voy a poder usar en mi formulario de contacto y maquetarlo como yo quiera.

Contact form 7 con Visual Composer

Vamos a crear una página que la usaremos a modo de plantilla para crear la estructura, en ese caso tengo un formulario muy extenso que lo quiero organizar en varias filas, columnas y que sea responsive. Las generamos vacias y ahora vamos a meter HTML en esas filas y columnas que serán los inputs de nuestro formulario, yo voy a usar el elemento “HTML PURO” para añadir los shortcodes de Contact Form 7

Contact form con visual composer
He creado una estructura de filas y columnas a través del maquetador y luego voy metiendo los shortcodes de Contact Form 7 en los elementos HTML

De esta forma, por ejemplo, si queremos meter un input de tipo text que sea requerido lo ponemos dentro del objeto “HTML PURO” así:

<label>Título</label>
[text* titulo]

Y vamos maquetando la estructura que queramos para nuestro formulario, hay que tener en cuenta, a la hora de añadir recursos de Visual Composer que si ejecutan JavaScripts que modifican el HTML no los vamos a poder usar para el formulario de contacto ya que vamos a coger ahora el código HTML generado por Visual Composer.

Ahora llega la parte divertida

Una vez que acabemos, si miramos la vista previa de nuestra página-plantilla veremos que se muestran todos los shorcodes de Contact Form 7 que hemos añadido:

Contact Form 7 con Visual Composer
Así quedaría la plantilla generada con Visual Composer

Necesitamos el HTML generado por Visual Composer en esa plantilla para pegarlo en nuestro formulario de Contact Form 7, para ello, vamos a usar la mágica herramienta de inspeccionar elemento y nos posicionamos sobre el div contenedor que contiene toda nuestra estructura, en mi clase es el div con la clase “inner-content”.

Contact Form con Visual Composer
Aquí podemos inspeccionar el HTML y CSS de una web

Ahora lo necesitamos coger para ponerlo en el formulario, para eso copiamos todo el HTML generado: botón derecho -> Editar como HTML y tendremos todo el contenido de ese contenedor listo para copiarlo, lo seleccionamos todo (Ctrl + a) copiar y lo pegamos dentro de nuestro formulario

Contact Form 7 con Visual Composer
Pegamos en la pestaña de Formulario el HTML generado por Visual Composer

Guardamos y listo, ya lo tenemos, ahora solo falta copiar el shortcode del formulario para pegarlo en la página que queramos, y veréis, que se el formulario se visualizará con la estructura y estilos que les pusimos en la plantilla:

Contact Form 7 con Visual Composer
Aquí tenemos nuestro formularo con estilos

De esta forma, podemos crear un diseño de forma gráfica a través de Visual Composer para nuestros formularios de contacto, y darle más juego, sin tener que instalar otro plugin para darle estilos a los formularios, ya que de por si tenemos un maquetador visual que  va a necesitar muchos recursos, entre menos plugins para hacer cosas que podemos hacerlas de otra forma mucho mejor.

Nos vemos en la siguiente!

 

 

Deja un comentario

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