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

¿Quieres personalizar tus formularios 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 tienen un aspecto muy simple.

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

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

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

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 un formulario de WordPress usando shortcode.

Sin embargo, Contact Form 7 tiene funciones muy limitadas. Uno de los problemas con Contact Form 7 es que los formularios tienen un estilo sencillo. Además, el complemento no ofrece ninguna opción integrada para cambiar el estilo de sus formularios.

Esto hace que sea difícil hacer coincidir el diseño del formulario de contacto con el tema de su sitio web o si desea editar la fuente y el color de fondo para que su formulario se destaque.

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

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

Primeros pasos con el formulario de contacto 7

En primer lugar, deberá instalar y activar el Formulario de contacto 7 complemento en su sitio web. Si necesita ayuda, consulte nuestra guía sobre cómo instalar un complemento de WordPress.

Tras la activación, puede dirigirse a Contacto » Añadir nuevo desde tu panel de WordPress.

Editar la configuración del formulario de contacto 7

Ahora puede editar el formulario de su sitio web y comenzar ingresando un título para su formulario.

El complemento agregará automáticamente los campos predeterminados de nombre, correo electrónico, asunto y mensaje 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.

Copia el código abreviado

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

Para hacer eso, simplemente edite una publicación o agregue una nueva. Una vez que esté en el editor de WordPress, continúe y haga clic en el signo ‘+’ en la parte superior y luego agregue un bloque de Shortcode.

Agregar un 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 verá algo como esto:

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

Ahora, continúe y publique su publicación de blog de WordPress para ver el formulario de contacto en acción. Por el bien de este artículo, hemos utilizado el formulario de contacto predeterminado y lo hemos agregado a una página de WordPress. Así es como se veía el formulario de contacto en nuestro sitio de prueba.

Vista previa del formulario de contacto 7

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

Estilo de formulario de contacto 7 formularios en WordPress usando CSS personalizado

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

Contact Form 7 genera código compatible con el estándar para formularios. Cada elemento del formulario tiene una identificación adecuada y una clase de CSS asociada, lo que facilita la personalización si conoce CSS.

Cada formulario de Contact Form 7 utiliza la clase CSS .wpcf7 que puede usar para diseñar su formulario.

En este ejemplo, usaremos la fuente personalizada llamada Lora en nuestros campos 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 el CSS personalizado, consulte nuestra guía sobre cómo agregar fácilmente CSS personalizado a un sitio de WordPress.

Así quedó nuestro formulario de contacto después de aplicar este CSS.

Vista previa de CSS personalizado

Estilo de formulario de contacto múltiple 7 formularios

Si está utilizando varios formularios de contacto y desea diseñarlos de manera diferente, deberá usar la ID generada por 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 web.

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

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

Inspeccionar formulario y obtener ID de formulario

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

<div role="form" class="wpcf7" id="wpcf7-f113-p114-o1" lang="en-US" dir="ltr">

El atributo id es un identificador único generado por Contact Form 7 para este formulario en particular. Es una combinación de la identificación del formulario y la identificación de la publicación donde se agrega este formulario.

Usaremos esta ID en nuestro CSS para diseñar nuestro formulario de contacto y reemplazaremos .wpcf7 en nuestro 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 el paso para todos sus formularios y reemplazar la ID del formulario para cada formulario Contact Form 7 que desee personalizar.

Estilo de formulario de contacto 7 formularios con CSS Hero

Una forma más fácil de cambiar el estilo de los formularios de Contact Form 7 es usando CSS Hero. Te permite editar tus formularios sin necesidad de escribir CSS.

Simplemente instale y active el complemento CSS Hero en su sitio web. Puede seguir nuestra guía sobre cómo instalar un complemento 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 en la parte superior.

Personaliza con CSS hero

CSS Hero le proporcionará una interfaz de usuario sencilla para editar el CSS sin escribir ningún código.

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

Interfaz de héroe CSS

Una vez que haya personalizado 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 los formularios Contact Form 7 en WordPress. También puede consultar nuestra guía sobre cómo crear un boletín informativo por correo electrónico y el mejor software de chat en vivo para pequeñas empresas.

.

Deja un comentario