¿Le gustaría personalizar su formulario Contact Form 7 y cambiar su estilo?

Contact Form 7 es uno de los complementos de formulario de contacto más populares para WordPress. Sin embargo, el mayor inconveniente es que los formularios listos para usar que agrega parecen bastante simples.

En este artículo, le mostraremos cómo diseñar el formulario de contacto 7 en WordPress.

Cómo diseñar el formulario de contacto 7 en WordPress

¿Por qué diseñar su formulario de contacto 7?

Contact Form 7 es uno de los complementos de formulario de contacto más populares para WordPress. Es de uso gratuito y le permite agregar formularios de WordPress usando códigos abreviados.

Sin embargo, Contact Form 7 tiene una funcionalidad muy limitada. Uno de los problemas con Contact Form 7 es que el estilo del formulario es simple. Además, el complemento no proporciona ninguna opción integrada para cambiar el estilo del formulario.

Esto dificulta el diseño de un formulario de contacto que coincida con el tema de su sitio web, o si desea editar fuentes y colores de fondo para que su formulario se destaque.

Si desea más formularios personalizables con funciones avanzadas, le recomendamos WPForms, el mejor complemento de formulario de contacto para principiantes. Viene con un generador de formularios de arrastrar y soltar, plantillas preconstruidas y numerosas opciones de personalización.

Dicho esto, veamos cómo diseñar un formulario Contact Form 7 en WordPress.

Formulario de contacto 7 Primeros pasos

Primero, debe instalar y activar el complemento Contact Form 7 en su sitio web. Si necesita ayuda, consulte nuestra guía sobre cómo instalar un complemento de WordPress.

Después de la activación, puede ir a Contacto » Añadir nuevo desde tu panel de WordPress.

Editar la configuración del formulario de contacto 7

Ahora puede editar el formulario para su sitio web, comenzando por ingresar el título del formulario.

El complemento agregará automáticamente los campos de nombre, correo electrónico, asunto y mensaje predeterminados del formulario. Sin embargo, también puede agregar más campos simplemente arrastrándolos y soltándolos donde desee.

Cuando haya terminado, no olvide hacer clic en el botón “Guardar” y copiar el código abreviado.

Copiar código abreviado

Lo siguiente que debe hacer es agregarlo a su publicación o página de blog.

Para hacer esto, simplemente edite la publicación o agregue una nueva. Una vez en el editor de WordPress, continúe y haga clic en el signo “+” en la parte superior, luego agregue un bloque de código abreviado.

Agregar bloque de código abreviado

Después de eso, simplemente ingrese el código abreviado para su formulario Contact Form 7 en el bloque de código abreviado. Se parece a esto:

[contact-form-7  title="Contact Form"]

Ahora, continúe y publique su publicación de blog de WordPress para ver el formulario de contacto real. A los efectos de este artículo, utilizamos el formulario de contacto predeterminado y lo agregamos a la página de WordPress. Así es como se ve el formulario de contacto en nuestro sitio de prueba.

Formulario de contacto 7 Vista previa

Ahora, ¿está listo para personalizar su formulario Contact Form 7 en WordPress?

Configuración de un formulario de contacto 7 en WordPress con CSS personalizado

Dado que Contact Form 7 no tiene opciones de estilo integradas, deberá usar CSS para diseñar el formulario.

Contact Form 7 genera código compatible con estándares para formularios. Cada elemento de un formulario tiene un ID y una clase de CSS apropiados asociados, que se pueden personalizar fácilmente si conoce CSS.

Cada formulario de Contact Form 7 usa clases CSS .wpcf7 Puede usarlo para diseñar su formulario.

En este ejemplo, usaremos una fuente personalizada llamada Lora en el campo de entrada y cambiaremos el color de fondo del formulario.

div.wpcf7 { 
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, sans-serif; 
font-style:italic;    
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] { 
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

Si necesita ayuda para agregar CSS personalizado, consulte nuestra guía sobre cómo agregar fácilmente CSS personalizado a su sitio de WordPress.

Así es como se ve nuestro formulario de contacto con este CSS aplicado.

Vista previa de CSS personalizado

Aplicar estilo a varios formularios de contacto 7 formularios

Si está utilizando varios formularios de contacto y desea diseñarlos de manera diferente, deberá usar la ID que genera el Formulario de contacto 7 para cada formulario. El problema con el CSS que usamos anteriormente es que se aplicará a todos los formularios del Formulario de contacto 7 en su sitio.

Para comenzar, simplemente abra una página con el formulario que desea modificar.A continuación, mueva el mouse al primer campo del formulario, haga clic con el botón derecho y seleccione una examinacion.

La pantalla del navegador se dividirá y verá el código fuente de la página. En el código fuente, debe encontrar la línea de inicio del código del formulario.

Verifique el formulario y obtenga la identificación del formulario

Como puede ver en la captura de pantalla anterior, nuestro código de formulario de contacto comienza con la siguiente línea:

<div role="form"   lang="en-US" dir="ltr">

El atributo id es el identificador único que genera Contact Form 7 para ese formulario en particular. Es una combinación del ID del formulario y el ID de la publicación que agregó este formulario.

Usaremos esta ID en CSS para diseñar el formulario de contacto y reemplazaremos el .wpcf7 en el primer fragmento de CSS con #wpcf7-f113-p114-o1.

div#wpcf7-f113-p114-o1{
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
#wpcf7-f113-p114-o1 input[type="text"],
#wpcf7-f113-p114-o1 input[type="email"],
#wpcf7-f113-p114-o1 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, "Open Sans", sans-serif;
font-style:italic;
}
#wpcf7-f113-p114-o1 input[type="submit"],
#wpcf7-f113-p114-o1 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

Ahora puede repetir este paso para todos los formularios y reemplazar la ID del formulario para cada formulario Contact Form 7 que desee personalizar.

Diseño de formularios Contact Form 7 con CSS Hero

Una forma más fácil de cambiar el estilo de un formulario de Contact Form 7 es usar CSS Hero. Te permite editar formularios sin escribir CSS.

Simplemente instale y active el complemento CSS Hero en su sitio web. Puede seguir nuestra guía sobre cómo instalar complementos de WordPress.

A continuación, vaya a la página que contiene su formulario y haga clic en la opción “Personalizar con CSS Hero” en la barra de herramientas superior.

Personaliza con CSS hero

CSS Hero le brindará una interfaz de usuario simple para editar CSS sin escribir ningún código.

Con el complemento, puede hacer clic en cualquier campo, encabezado y otros elementos del formulario, y editar el color de fondo, la fuente, los bordes, el espaciado y más.

Interfaz de héroe CSS

Después de personalizar su formulario, simplemente haga clic en el botón “Guardar y publicar” en la parte inferior.

Esperamos que este artículo le haya ayudado a aprender cómo aplicar estilo a un formulario Contact Form 7 en WordPress. También puede consultar nuestras guías sobre cómo crear boletines por correo electrónico y el mejor software de chat en vivo para pequeñas empresas.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress.También puedes encontrarnos en Gorjeo y Facebook.

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.