Formulario de contacto 7 es un complemento WordPress increíblemente popular para crear formularios de contacto. Le permite crear formularios sin codificación HTML. estos formas puede ofrecer funciones como el CAPTCHAdescargando archivos campos de encuesta etc ...

Aunque el estilo predeterminado del formulario de contacto 7 es suficiente para la mayoría de los formularios de contacto básicos, a menudo tiene que cambiarlo.

Esto cambia la estructura de formulario predeterminada para que sea más accesible. También agrega el Código corto [responsive] encima del formulario para que si hay un error al enviar el formulario, se indique en el formulario.

Si nunca ha creado un sitio web de WordPress, averigüe Cómo instalar un blog de WordPress con un cliente FTP

Para el formulario estándar, el código generado por el complemento es:

[respuesta] Su nombre (requerido) [texto * su-nombre id: su-nombre] Su correo electrónico (requerido) [correo electrónico * su-correo electrónico id: su-correo electrónico] Su asunto [texto su-id. Su mensaje [textarea your-message id: your-message] [submit "Send"]

Algunos plugins para personalizar el formulario Formulario de contacto 7

1. Formulario de contacto 7 Style

Le plug-in Formulario de contacto 7 Estilo tiene varios estilos para elegir.

Para los usuarios del tema Twenty Fifteen, también hay un estilo compatible.

Para aplicar un estilo, vaya a " Estilos de contacto> Edición rápida Marque la forma en que desea aplicar el estilo, luego haga clic en " Actualización ".

2. Formulario de contacto Skins 7

Para usar pieles Contacto 7 Forma, crear un nuevo formulario de contacto y desplácese hacia abajo en la página hasta la sección Máscaras. Puede elegir una plantilla y un estilo para su formulario.

Encontrarás modelos dedicados a las formas deévénements, registro y aviso.

Así es como se ve el formulario de encuesta con el estilo Topaz usando el tema Twenty Fifteen.

3. Diseño de material para formulario de contacto

Estos estilos se basan en el estilo Diseño de materiales.

Este complemento sugiere que elimine el formulario predeterminado y use sus códigos cortos.

Aquí hay un ejemplo con el tema Hestia. Observe la etiqueta flotante cuando el puntero se mueve a un campo en el formulario.

Póngase en contacto con la prueba del Formulario 7 en algunos Temas de WordPress

Formulario de contacto con el tema ColorMag WordPress

La mayoría de las veces, Contact Form 7 heredará el estilo de su tema de WordPress. Este es el caso con el tema Coral oscuro.

Formulario de contacto con el tema WordPress ColorMag

Aquí está la forma sin estilo personalizado. Hereda el color del botón azul. Tema ColorMag WordPress.

Comencé subiendo una foto para usarla como imagen de fondo del formulario y cambiando el código de las etiquetas del formulario de gris a blanco con una sombra azul en el texto.

Los siguientes cambios fueron para aumentar los márgenes entre las etiquetas del formulario y los campos del formulario, cambiar el botón de sustraer y agregar un borde cuando el puntero ingresa campos en el formulario.

La visualización de mensajes de error / éxito cuando se envía el formulario también debe cambiarse para que se muestren correctamente.

El GIF que gira cuando se envía el formulario no se muestra correctamente, encontré una alternativa a Loading.io y lo mencioné con CSS.

Aquí está la forma resultante:

Aquí está el código:

div.wpcf7 {margen: 0; relleno: 1.5em; background: url ('your_background_image_url_here'); -webkit-border-radius: 3px; -moz-border-radius: 3px; radio del borde: 3px; } .wpcf7 etiqueta, .wpcf7-submit {color: blanco; texto-sombra: 1px 1px 0px rgba (40, 157, 204, 1); } .wpcf7 .wpcf7-form-control {10px 0 20px 0; } .wpcf7 .wpcf7-submit: hover {background: #186d8e; } .wpcf7-form-control: focus {border: 2px solid #289dcc; } div.wpcf7-response-output {fondo: #F8F8F8; text-align: center; ancho: 92.5%; margen: 1em 0em 1em 0em; -webkit-border-radius: 3px; -moz-border-radius: 3px; radio del borde: 3px; } span.wpcf7-not-valid-tip {background: #F8F8F8; pantalla: bloque en línea; ancho: auto; relleno: 1%; -webkit-border-radius: 3px; -moz-border-radius: 3px; radio del borde: 3px; } div.wpcf7 .ajax-loader {background-image: url ('your_loading_image_url_here'); ancho: 50px; altura: 50px; }

Si no necesita garabatear el código, le sugerimos que consulte nuestro Complementos de 10 WordPress para crear un formulario de contacto en tu blog

Descubra también las alternativas premium de 3 que lo ayudarán a crear sus formularios de contacto. 

1. Formulario de contacto W8

W8 Contact Form es uno de los complementos de formulario de contacto el más popular en WordPress. Ofrece muchas funciones, como el envío a múltiples destinatarios, soporte para animaciones, creación ilimitada de formularios, diferentes estilos y una amplia variedad de opciones de personalización adicionales.

Además, le da a su sitio web o blog un sistema profesional para que sea más fácil ponerse en contacto con sus clientes. Podrás personalizar todos tus formularios según tus necesidades y tus gustos.

Descargar | Demo | alojamiento web

2. Formulario de contacto

Contáctenos Form es un complemento de WordPress receptivo y una herramienta simple pero rica en opciones de personalización que le permite mostrar un formulario claro y alentador, en el que sus visitantes pueden comunicarse con usted dejando su mensaje.

Podrá definir los campos necesarios, elegir el mejor diseño de los campos y personalizarlo completamente para alentar a sus clientes o visitantes a dejar sus sugerencias o mensajes.

Simplemente configure la dirección de correo electrónico donde desea recibir los mensajes y úsela para hacer crecer su negocio en la dirección más rentable.

Descargar | Demo | alojamiento web

3. Slick Popup Pro

Slick Popup Pro es un Extensión de WordPress bastante simple y liviano que convierte cualquier formulario creado por el complemento Contacto 7 Forma en una ventana emergente Ella usa la forma y la convierte en una ventana emergente hermosa y perfectamente sensible.

El formulario emergente puede tener varios usos, incluidos: un formulario de recopilación de información, un formulario de contacto, un formulario de registro, un formulario de cotización, un formulario de sugerencia / queja y otros.

Descargar | Demo | alojamiento web

Recursos recomendados

Consulte otros recursos recomendados que lo ayudarán a crear y administrar mejor los formularios de contacto en su sitio web o blog. 

• Complementos de 6 WordPress para la verificación por CAPTCHA en sus formularios
• Cómo agregar un formulario de contacto con WordPress Formulario de contacto 7
• Cómo crear formularios compatibles con GDPR en WordPress

Conclusión

Listo ! Eso es todo por este tutorial, espero que tengas más ideas para personalizar tu formulario de contacto. No dude en comparte con tus amigos en tus redes sociales favoritas. 

Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress.

Pero, mientras tanto, cuéntenos sobre su comentarios y sugerencias en la sección dedicada.

...