Resumen de IA
Cuando los propietarios de pequeñas empresas se aventuran a crear sus propios formularios de WordPress, los resultados a menudo terminan siendo simples y poco inspiradores. Este es un patrón que he observado constantemente a lo largo de los años.
Sin la experiencia de desarrolladores y diseñadores, estos formularios pueden funcionar lo suficientemente bien, pero carecen del atractivo visual que puede atraer a los usuarios e impulsar las conversiones.
Lo bueno es que ya no necesitas conocimientos de codificación ni experiencia en diseño para crear formularios atractivos. Solo necesitas el plugin adecuado.
En esta publicación, te mostraré la forma de estilizar tus formularios de contacto sin código para causar una fuerte primera impresión en tus visitantes.
Crea tu formulario de WordPress con estilo personalizado ahora 🎨
Cómo dar estilo a los formularios de contacto en WordPress
Ahora que sabes que nuestra herramienta de estilo es la mejor y más fácil para WPForms, vamos a desglosarla paso a paso.
- 1. Instalar y activar WPForms
- 2. Abre tu formulario en el constructor
- 3. Elige tu tema
- 4. Personaliza los estilos de los campos
- 5. Personaliza los estilos de las etiquetas
- 6. Personaliza los estilos de los botones
- 7. Personaliza los estilos del contenedor
- 8. Personaliza los estilos de fondo
- 10. Guarda, previsualiza y prueba
1. Instalar y activar WPForms
Primero, querrás instalar el plugin WPForms si aún no lo tienes.
El estilo de formularios está disponible con todas las versiones de WPForms, incluido WPForms Lite (el mejor constructor de formularios gratuito).
¿Necesitas ayuda con este paso? Consulta esta guía para principiantes sobre cómo instalar un plugin de WordPress.
Ahora, asegurémonos de que tienes todo configurado con las versiones que necesitas:
- Versión de WordPress: 6.0 o superior.
- WPForms 1.9.7.
¿Eres usuario de Elementor? WPForms admite estilos de formularios sin código para Elementor. Esto permite personalizaciones de estilo aún más potentes para tu formulario.
2. Abre tu formulario en el constructor
¡Ahora es el momento de crear tu formulario! Para empezar, coloca el cursor sobre WPForms en la barra lateral del menú de administración de WordPress y haz clic en Añadir nuevo.
Después de eso, es hora de empezar a configurar tu formulario, comenzando por el nombre del formulario y la selección de la plantilla. Hay cientos de plantillas de formularios para marketing y otras funciones que puedes usar. También puedes crear tu formulario completamente desde cero si lo deseas.
El formulario de contacto simple es una de nuestras plantillas más populares. También es bastante adecuada para este tutorial, así que la seleccionaremos haciendo clic en el botón Usar plantilla.
Una vez que hagas tu selección, puedes crear o personalizar tu formulario utilizando el constructor de arrastrar y soltar fácil de usar de WPForms.
¿Necesitas un poco de orientación? No te preocupes. Tenemos un documento para enseñarte cómo crear tu primer formulario.
3. Elige tu tema
Ahora estás listo para estilizar el tema de tu formulario directamente dentro del constructor de formularios.
Ve a Ajustes >> Temas para acceder a los controles de estilo.
El panel izquierdo muestra todas las opciones de estilo. El panel derecho muestra una vista previa en vivo utilizando campos de ejemplo.
Aquí es donde elegirás el tema.
Los temas son tu atajo para un formulario de aspecto genial. Establecen colores y estilos coordinados para campos, etiquetas, botones, contenedor y fondo, todo en un solo clic.
¡Y son accesibles para todos los usuarios! Para aquellos con WPForms Lite, hay disponibles temas "Clásico" y "Moderno (Predeterminado)".
Los usuarios con una licencia de WPForms tienen acceso a la biblioteca completa de temas, que incluye 15 temas diferentes.
¡Lush es mi favorito!
He revisado todos los temas yo mismo y he hecho este resumen descriptivo para cada uno:
| TNombre del tema | Aspecto y sensación | Color de acento | Color de fondo | Notas |
| Moderno (Predeterminado) | Limpio, contemporáneo | Azul | Ninguna | Predeterminado para todos los formularios nuevos |
| Clásica | Minimalista | Gris | Ninguna | Muy poco CSS, ideal para un aspecto básico |
| Océano | Similar a Moderno | Verde azulado oscuro | Ninguna | Ideal para marcas con tonos fríos |
| Tangerina | Cálido, enérgico | Naranja | Ninguna | Destaca en sitios neutros |
| Aero | Ligero y espacioso | Azul | Gris claro con sombra de caja | Ligero efecto "tarjeta" |
| Hormigón | Industrial | Rosa | Textura de hormigón | Requiere la descarga de imágenes de fondo |
| Elegancia | Refinado | Coincide con la imagen | Imagen decorativa | Esquinas redondeadas en el contenedor |
| Fresco | Inspirado en la naturaleza | Verde | Imagen frondosa | Ideal para marcas ecológicas/orgánicas |
| Penumbra | Modo oscuro | Verde | Fondo oscuro | Elementos de formulario de alto contraste |
| Pasillo | Dramático | Oscuro | Imagen | Contenedor audaz e inmersivo |
| Exuberante | Texturizado | Negro | Imagen de pared de ladrillos | Esquinas redondeadas y sombra de caja |
| Monstera | Juguetón | Verde | Imagen de acuarela | Esquinas redondeadas |
| Rango | Vibrante | Verde | Imagen del atardecer | Bordes y sombras de caja |
| Primavera | Suave degradado | Azul | Imagen degradada | Sombra de caja para dar profundidad |
| Vintage | Retro | Amarillo | Color sólido | Sensación cálida y nostálgica |
Echa un vistazo a nuestro documento completo que cubre muchos de estos temas en detalle.
4. Personaliza los estilos de los campos
Una vez que hayas decidido un tema, dirígete a Estilos de campo para ajustar:
- Tamaño: Pequeño, Mediano, Grande
- Borde: Sólido, Discontinuo, Punteado
- Tamaño y radio del borde: Controla el grosor y la redondez de las esquinas
- Colores: Establece el fondo, el borde y el texto. Usa la paleta de temas, el código HEX o el selector de color
Estos toques adicionales realmente se prestan al efecto y la vibra que buscas con cada formulario. Por ejemplo, las esquinas redondeadas se sienten amigables, los bordes cuadrados se sienten formales.
También encontrarás aquí opciones para actualizar los colores de Fondo, Borde y Texto de tus campos de formulario.
Haz clic en la etiqueta para abrir el selector de color y realizar cambios. Puedes elegir un color visualmente o introducir un código hexadecimal específico para un control específico.
5. Personaliza los estilos de las etiquetas
Las etiquetas son los breves fragmentos de texto encima de tus campos de formulario que indican a los usuarios qué introducir: cosas como Nombre, Dirección de correo electrónico o Mensaje. Bien hechas, hacen que tu formulario sea fácil de seguir, ayudando a los usuarios a evitar confusiones y errores.
En Estilos de etiqueta, puedes cambiar:
Tamaño: Texto pequeño, mediano o grande. Por ejemplo, podrías querer etiquetas pequeñas para un formulario de boletín minimalista, pero etiquetas grandes y en negrita para un formulario de solicitud de empleo donde la claridad es lo más importante.
Colores:
- Texto de la etiqueta: El título principal encima de cada campo.
- Subetiquetas e indicaciones: Instrucciones útiles, como "Solo nombre" o "Nunca compartiremos tu correo electrónico".
- Mensajes de error: Texto que aparece cuando el usuario comete un error, como "Este campo es obligatorio". Este color también controla el asterisco en los campos obligatorios
Por ejemplo, si tu sitio tiene un fondo oscuro, podrías establecer el texto de la etiqueta en blanco, las subetiquetas en un gris suave y los mensajes de error en un rojo brillante para que resalten inmediatamente cuando algo va mal.
6. Personaliza los estilos de los botones
El botón de envío es la "llamada a la acción" final de tu formulario. Debe destacar lo suficiente como para que los visitantes no tengan que buscarlo.
En Estilos del botón, puedes ajustar:
- Tamaño: Pequeño, Mediano o Grande. Los botones grandes funcionan bien en móviles, mientras que los medianos pueden adaptarse mejor a diseños de escritorio.
- Estilo del borde: Sólido, Discontinuo o Punteado, aunque la mayoría de los diseños modernos se quedan con Sólido o Ninguno para un aspecto más limpio.
- Tamaño y radio del borde: Los bordes más gruesos y las esquinas más afiladas se sienten más formales; los bordes más finos y las esquinas redondeadas se sienten más amigables y casuales.
- Colores de fondo y texto: Estos establecen el aspecto principal de tu botón.
💡 Consejo: El color de fondo aquí también se convierte en el color de acento para el resto de tu formulario, incluyendo los estados de enfoque de campo, las barras de progreso e incluso las casillas de verificación. Así que si haces tu botón de color verde azulado, espera que ese verde azulado aparezca sutilmente en todo tu formulario para un aspecto coordinado.
7. Personaliza los estilos del contenedor
El contenedor es como el "marco" alrededor de tu formulario. Separa visualmente el formulario del resto de la página y puede ayudar a que se sienta más intencional.
En Estilos del contenedor, puedes cambiar:
- Relleno: Cuánto espacio hay dentro del contenedor alrededor de los campos de tu formulario. Más relleno da una sensación limpia y espaciosa; menos relleno crea un aspecto compacto y que ahorra espacio.
- Estilo, tamaño y radio del borde: Adapta esto al tono visual de tu sitio: esquinas cuadradas y bordes sólidos para un aspecto corporativo, esquinas redondeadas y bordes sutiles para una sensación más suave.
- Sombra: Añadir una sombra paralela pequeña o mediana puede hacer que tu formulario parezca "levantado" de la página. Genial para que destaque sobre fondos planos.
- Color del borde: A menudo se pasa por alto, pero un borde de color puede vincular tu formulario a la paleta de tu marca.
Para un sitio de portafolio de fotografía, por ejemplo, podrías usar un contenedor con un relleno generoso, un borde blanco fino y una sombra paralela suave para crear un elegante efecto de "tarjeta".
8. Personaliza los estilos de fondo
El fondo es donde puedes ser creativo, pero también donde es fácil pasarse. Un buen fondo complementa el formulario sin dificultar su lectura. ¡Así que resiste la tentación!
Las opciones aquí incluyen:
- Fuente de la imagen: Sube desde tu Biblioteca de medios o explora las Fotos de stock integradas de WPForms (la primera vez que uses fotos de stock, descargarás toda la biblioteca).
- Posición: Controla dónde se sitúa la imagen: Arriba Centro, Centro Centro, Abajo Derecha, etc.
- Repetir: Elige No repetir para una sola imagen, Mosaico para repetir en todo el fondo, o repeticiones horizontales/verticales para patrones.
- Tamaño: Cubrir hace que la imagen llene el área del contenedor. Dimensiones te permite establecer un ancho y alto exactos.
- Color de fondo sólido: Una gran opción si quieres algo simple o si tu imagen no se carga.
💡Evita fondos recargados que dificulten la lectura del texto. Si te encanta una imagen recargada, atenúala con una superposición de color antes de subirla.
10. Guarda, previsualiza y prueba
Una vez que hayas realizado tus cambios, todo lo que queda por hacer es guardar tu formulario. Haz clic en Guardar en el constructor de formularios.
O usa Vista previa (arriba a la derecha) para ver tus estilos aplicados a un diseño de formulario de ejemplo. Luego, ve a tu página en el editor de WordPress y previsualiza el formulario real con campos reales.
No olvides que también puedes Probarlo:
- Rellena cada campo para comprobar el espaciado y la alineación.
- Activa un mensaje de error para ver si tus colores son claros.
- Visualiza el formulario en móvil, tableta y escritorio para confirmar que es responsive.
¡Y eso es todo! Ahora puedes empezar a estilizar tus formularios de contacto (o cualquier otro formulario) que tengas en WordPress, directamente desde el constructor de formularios.
¡Feliz estilizado!
Estilizando formularios de contacto – Preguntas frecuentes
Aquí tienes algunas preguntas comunes sobre cómo estilizar formularios de contacto en WordPress sin código:
¿Se aplicarán mis estilos en todas partes?
Sí. Cuando diseñas un formulario en el creador de WPForms, esos ajustes se guardan con el propio formulario, no solo con la página en la que estás trabajando.
Eso significa que si incrustas el mismo formulario en varias páginas o publicaciones, se verá coherente en todas partes por defecto. La única excepción es si anulas intencionadamente el estilo en el Editor de Bloques o Elementor durante la incrustación. Esos cambios solo se aplican a esa página específica.
¿Puedo diseñar una plantilla de formulario?
Absolutamente. Las plantillas en WPForms, como "Formulario de contacto simple" o "Suscripción al boletín", son simplemente conjuntos de campos preconstruidos. Tan pronto como incrustes un formulario basado en plantilla, puedes elegir un tema y ajustar su diseño exactamente de la misma manera que lo harías para un formulario creado a medida.
¿Puedo eliminar un tema personalizado?
Sí, pero hazlo con cuidado. Cuando eliminas un tema personalizado del panel Temas en el creador, desaparece para siempre.
A continuación, Conecta tus formularios de WordPress a ChatGPT
¿Tienes curiosidad por saber cómo puedes automatizar tu flujo de trabajo en lo que respecta a los formularios? Descubre cómo conectar ChatGPT a tus formularios de WordPress y optimiza las respuestas con IA.
¿Buscas una forma de hacer tus formularios más atractivos? Echa un vistazo a nuestros consejos para crear formularios interactivos que capten la atención de los usuarios.
Crea tu formulario de WordPress ahora
¿Listo para crear tu formulario? Empieza hoy mismo con el plugin constructor de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.
Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.
Estoy intentando averiguar cómo diseñar un formulario usando el módulo Divi y, si no es posible, qué solución alternativa se necesita.
Hola Ashley: actualmente, los Estilos de formulario se pueden usar con el editor de bloques de WordPress o con un tema con Edición completa del sitio. Estoy de acuerdo en que el soporte para otros constructores sería genial, y la opción de aplicar el estilo de los formularios sería estupenda. Lo añadiré a nuestro rastreador de solicitudes de funciones para que esté en el punto de mira de nuestros desarrolladores.
Todavía falta la función de Estilos de formulario para Divi.
Hola Stale: me disculpo, actualmente no tenemos la función para editar el estilo de los formularios en Divi. Estoy de acuerdo en que esto sería útil, y lo pondré en el punto de mira de nuestros desarrolladores.
¿Es esta una función premium? No veo tal opción en mi instalación del repositorio de WordPress. No debería ser tan difícil especificar el color que queremos para las entradas del formulario. No es correcto tomar una opción de cambio básica y convertirla en una característica "premium".
Hola Boreas: esta función está disponible en todas nuestras versiones de pago, incluida la gratuita (para el editor de bloques y todos los temas del Editor de Sitio Completo (FSE)).
En caso de que te falte la opción para habilitar Marcado Moderno, ten en cuenta que los usuarios con al menos un formulario en su sitio web antes de actualizar el plugin WPForms lite a la versión 1.8.1.1 verán la opción de marcado moderno. Además, esta opción no será visible si empezaste a usar WPForms lite a partir de la versión 1.8.1.1.
Por si te sirve de ayuda, puedes obtener más información sobre esta opción en el siguiente tutorial: https://wpforms.com/docs/styling-your-forms/
Si todavía tienes problemas con esto, por favor contáctanos en el foro de soporte de WPForms Lite en WordPress.org. Gracias.
¡Hola! Recientemente actualicé el plugin a la versión 1.8.2. Y una función que me gustaba ya no está disponible. Antes podía escribir código HTML personalizado dentro de los campos del formulario, como en la opción de casilla de verificación podía añadir – Tomate Leer más → , ahora no me deja hacerlo.
Hola Mila — ¡Estaremos encantados de ayudarte! Cuando tengas un momento, por favor escríbenos a soporte para que podamos ayudarte.
Si tienes una licencia de WPForms, tienes acceso a nuestro soporte por correo electrónico, así que por favor envía una solicitud de soporte.
De lo contrario, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite en WordPress.org.
Gracias 🙂
Estoy usando WP Forms Pro en mi sitio web. Tengo el formulario en dos páginas diferentes. En una página, el texto tiene una fuente serif, en la otra página, tiene una fuente sans-serif. No tengo idea de por qué, acabo de crear el formulario y lo coloqué. ¿Alguna indicación de por qué?
Estoy construyendo con Divi builder.
Hola Lawrence – por favor, comprueba si la fuente la cambia Divi. Por si te sirve de ayuda, aquí tienes una guía sobre cómo DiviFlash controla las fuentes.
Si quieres que echemos un vistazo más de cerca o necesitas más ayuda con esto, por favor contacta a nuestro equipo enviando un ticket de soporte aquí.
Gracias.
No veo esta opción en mi wpforms lite. Tengo la versión 1.8.2.2, y no hay ninguna opción para esto. Necesito cambiar los colores de las fuentes para todo el formulario. ¿Cómo podría hacer esto en mi formulario?
Hola Larry – Esta función está disponible en todas nuestras versiones de pago, incluida la gratuita (para el editor de bloques y todos los temas de Editor de Sitio Completo - FSE).
En caso de que te falte la opción para habilitar Marcado Moderno, ten en cuenta que los usuarios con al menos un formulario en su sitio web antes de actualizar el plugin WPForms lite a la versión 1.8.1.1 verán la opción de marcado moderno. Además, esta opción no será visible si empezaste a usar WPForms lite a partir de la versión 1.8.1.1.
Por si te sirve de ayuda, puedes obtener más información sobre esta opción en el tutorial aquí
Si todavía tienes problemas con esto, por favor contáctanos en el foro de soporte de WPForms Lite en WordPress.org.
Gracias.
Hola. He creado mi primer formulario con wpforms. Mi problema es que las fuentes son diferentes dentro del mismo formulario. Algunas etiquetas tienen una fuente sans-serif, otras como Times New Roman, pero todas las opciones son con la fuente sans-serif. ¿Cómo puedo configurarlas para que sean del mismo tipo? Uso el editor normal de WordPress, y cuando abro la página en el editor, donde está el formulario, veo todas las fuentes con el mismo estilo (Times New Roman). Pero en la versión publicada se vuelve diferente. ¿Cuál podría ser el problema?
Hola Krisztina — ¡Estaremos encantados de ayudarte! Cuando tengas un momento, por favor escríbenos a soporte para que podamos ayudarte.
Si tienes una licencia de WPForms, tienes acceso a nuestro soporte por correo electrónico, así que por favor envía una solicitud de soporte.
De lo contrario, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite en WordPress.org.
Gracias 🙂
Creo que se debería señalar que a menos que agregues el formulario como un bloque, las opciones anteriores para el estilo de etiquetas, indicaciones, etc. no se muestran. Originalmente estaba usando el código corto. Aún así, este tutorial me llevó a probar algo más. Gracias.
Hola Jesse – En "Estilizar tu formulario" y "Estilos de campo" hemos mencionado que el estilo de formularios funciona con el editor de bloques de WordPress. Si bien la función de estilo no está disponible para códigos cortos, estamos trabajando para expandir los estilos de formularios y agregaré tu solicitud a nuestro rastreador de solicitudes de funciones.
¿Es posible editar los estilos de los formularios (fuentes, colores, tamaños) en Elementor?
Hola Rodrigo, disculpa, actualmente no tenemos la función para editar el estilo de los formularios en Elementor. Estoy de acuerdo en que sería útil y lo pondré en conocimiento de nuestros desarrolladores.
Hola Rodrigo. Solo para informarte sobre esto, ahora también puedes estilizar WPForms en Elementor: https://wpforms.com/announcing-elementor-form-styles-and-entry-view-settings/
Mi problema eran diferentes fuentes en el mismo formulario. Algunas etiquetas tienen tipo de fuente sans, algunas etiquetas como Times New Roman, pero todas las selecciones son de tipo de fuente sans.
Hola, ¡estaremos encantados de ayudarte! Cuando tengas un momento, por favor, ponte en contacto con nuestro soporte para que podamos ayudarte.
Si tienes una licencia de WPForms, tienes acceso a nuestro soporte por correo electrónico, así que por favor envía una solicitud de soporte.
De lo contrario, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite en WordPress.org.
Gracias 🙂
Estoy intentando editar un embed ubicado en el pie de página. Supongo que no hay forma de hacerlo? Mi pie de página es de color oscuro, por lo que el texto no puede ser negro por defecto. ¿Hay alguna forma de editarlo?
Hola Nisha, ¡estaremos encantados de ayudarte! Cuando tengas un momento, por favor, ponte en contacto con nuestro soporte para que podamos ayudarte.
Si tienes una licencia de WPForms, tienes acceso a nuestro soporte por correo electrónico, así que por favor envía una solicitud de soporte.
De lo contrario, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite en WordPress.org.
Gracias 🙂
¿podrías decirme cómo puedo quitar el borde al enfocar el cuadro de texto de entrada y el área de texto de wpforms?
Realmente necesito la respuesta, por favor.
Hola Shivam, lamento escuchar sobre el problema. Cuando tengas un momento, por favor, ponte en contacto con nosotros con una captura de pantalla en soporte para que podamos ayudarte.
Si tienes una licencia de WPForms, tienes acceso a nuestro soporte por correo electrónico, así que por favor envía una solicitud de soporte.
De lo contrario, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite en WordPress.org.
Gracias 🙂