Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 901.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62.

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.

Lista de estilos de contacto de 6Para 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 ".

Ejemplo de formulario de contacto de wordpress2. Formulario de contacto Skins 7

Para usar pieles Contacto 7 Forma, cree un nuevo formulario de contacto y desplácese hacia abajo 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.

Plantilla de wordpress página de formulario de contacto

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

Ejemplo de formulario de consulta del formulario de contacto 7

3. Diseño de material para formulario de contacto

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

Cree fácilmente su sitio web con Elementor

Elementor te permite crear Fácil y Gratis cualquier sitio web o diseño de blog con un aspecto profesional. Deja de pagar mucho por un sitio web que puedes hacer tú mismo.

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.

Ejemplo de diseño de material formulario de contacto 7Prueba de formulario de contacto 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 coral dark

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.

Formulario de contacto con tema colormagComencé 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.

¿Quieres vender tus productos en internet?

Descarga WooCommerce gratis, los mejores plugins de comercio electrónico para vender tus productos físicos y digitales en WordPress y crea fácilmente tu tienda online. Perfecto para principiantes.

Aquí está la forma resultante:

Resultado de personalización de un formulario de contacto 7Aquí 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 más populares en WordPress. Ofrece muchas características como envío a múltiples destinatarios, soporte de animación, creación ilimitada de formularios, diferentes estilos y una amplia variedad de opciones de personalización adicionales.

Formulario de contacto W8 plugin de formulario de contacto de wordpress

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.

Formulario de contacto plugin de formulario de contacto de wordpress

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 complemento 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.Complemento emergente de Wordpress slick popup pro

El formulario emergente puede tener varios usos que incluyen: 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. 

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.

...  

106 acciones
cuota4
Tweet
Siguiente 102