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 bastante 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 programación o diseño para crear formularios atractivos. Solo necesitas el plugin adecuado.
En este post, te mostraré la forma libre de código de estilizar tus formularios de contacto para dar una fuerte primera impresión a tus visitantes.
Crea ya tu formulario personalizado con estilo para WordPress 🎨
Cómo dar estilo a los formularios de contacto en WordPress
Ahora que sabes que nuestra herramienta de estilo es el mejor y más fácil styler para WPForms, vamos a desglosarlo paso a paso.
¿Busca una forma de ajustar el espaciado vertical entre sus campos? Consulte esta guía sobre la modificación del espaciado entre campos.
En este artículo
1. Instale y active WPForms
En primer lugar, tendrá que instalar el plugin WPForms si aún no lo tiene.
La estilización de formularios está disponible con todas las versiones de WPForms, incluyendo 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.
El siguiente paso depende de la versión de WPForms que esté ejecutando.
- Para los nuevos usuarios que instalen WPForms 1.8.1 y posteriores, vaya al paso 3.
- Si instaló WPForms antes de la versión 1.8.1, necesitará habilitar el marcado moderno. Simplemente continúe a continuación para ver cómo.
¿Es usuario de Elementor? WPForms soporta estilos de formulario sin código para Elementor. Esto permite personalizaciones de estilo aún más potentes para su formulario.
2. Habilitar el marcado moderno
Si tenía al menos un formulario en su sitio web antes de actualizar a WPForms 1.8.1, debe habilitar el marcado moderno.
Para ello, vaya a la pestaña General del menú de configuración de WPForms.
En esa página, marque la casilla Utilizar marcado moderno.
No olvides guardar la configuración una vez que hayas completado este paso.
3. Cree su formulario
Ahora es el momento de crear su formulario. Para empezar, sitúe el cursor sobre WPForms en la barra lateral del menú de administración de WordPress y haga clic en Añadir nuevo.
Después de eso, es hora de empezar a configurar su formulario, empezando 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 utilizar. Si lo deseas, también puedes crear tu formulario completamente desde cero.
El Formulario de Contacto Simple es una de nuestras plantillas más populares. También es muy adecuada para este tutorial, así que vamos a seleccionarla haciendo clic en el botón Usar plantilla.
Una vez que haya hecho su selección, puede crear o personalizar su formulario utilizando el sencillo constructor de arrastrar y soltar WPForms.
¿Necesitas un poco de orientación? No te preocupes. Tenemos un documento que te enseñará a crear tu primer formulario.
4. Incruste su formulario
Cuando hayas terminado de crear tu formulario, es hora de incrustarlo en tu sitio. Tienes que completar este paso para acceder a las opciones de estilo del formulario.
La forma más fácil de incrustar tu formulario es hacer clic en el botón Incrustar en la parte superior del constructor de formularios.
Se abrirá una ventana modal que le pedirá que seleccione la página en la que desea incrustar el formulario. Puede seleccionar una página existente o crear una nueva.
Si hace clic en el botón Seleccionar página existente, aparecerá un menú desplegable en el que podrá seleccionar una de las páginas existentes.
Si selecciona Crear una nueva página, tendrá la oportunidad de asignar un nombre a su nueva página.
También puede incrustar su formulario utilizando un widget o shortcode.
Haga clic en el botón ¡Vamos! y se abrirá la página del proyecto con el formulario incrustado.
5. Estilizar el formulario
Ahora es el momento de la parte divertida: ¡estilizar tu forma!
Haz clic en el formulario en el editor de bloques, y los ajustes para ese bloque se abrirán en la barra lateral de la derecha. Aquí es donde puedes acceder a todas las opciones de estilo para tu formulario.
Si usted es un usuario de WPForms Pro, notará que hay docenas de temas disponibles. Estos temas profesionalmente diseñados facilitan el estilo de su formulario con esquemas de colores predefinidos, estilos de botones, contenedores e imágenes de fondo.
Por lo tanto, si quieres añadir un poco de dinamismo extra a tu formulario al instante, sólo tienes que seleccionar cualquier tema del panel lateral. En el ejemplo de abajo, estoy usando el tema Frost que es uno de mis favoritos.
Obtenga todos los temas de formularios con WPForms Pro 🎨
Aunque cada tema utiliza estilos únicos para cada elemento del formulario, también puedes editar estos elementos individuales tú mismo sin ningún CSS.
Hay 5 elementos de formulario principales a los que puede dar estilo con sencillos controles de apuntar y hacer clic:
- Estilos de campo
- Estilos de etiqueta
- Estilos de botones
- Estilos de contenedor
- Estilos de fondo.
Veamos qué hace cada uno y cómo puede ajustar el estilo del formulario.
Estilos de campo
Estilos de campo es donde se ajusta el tamaño del campo de entrada, el radio del borde y los colores. Si desea que su formulario coincida con otros en su sitio, aquí es donde la apariencia comienza a tomar forma.
Este es el aspecto que tendrán los ajustes de estilo por defecto.
Los cambios son fáciles de hacer sin necesidad de editar CSS. Esto es lo que significan las distintas opciones:
- Tamaño: Ajusta el tamaño general de tus campos.
- Borde: Controla el estilo del borde. Las opciones incluyen bordes sólidos, discontinuos o punteados.
- Tamaño del borde: Establece el grosor de los bordes de tus campos.
- Radio de borde: Permite aplicar esquinas redondeadas para conseguir un aspecto elegante y moderno.
Bajo estas opciones, también encontrarás ajustes para Colores. Estos te permitirán utilizar un selector de color para añadir colores a diferentes aspectos de tus campos.
Si quieres asegurarte de que el formulario combina a la perfección con los colores de tu tema de WordPress, puedes elegir entre esas opciones. Los colores que veas allí dependerán del tema que estés utilizando.
También hay colores predeterminados que puedes seleccionar.
El color personalizado de la parte superior te permite personalizar los colores de los campos del formulario. Puedes utilizar el selector de color, introducir un código hexadecimal y ajustar la opacidad sin editar el CSS.
Por ejemplo, puede utilizar el selector de color si desea añadir un color personalizado al texto del campo de entrada. Si tienes el código hexadecimal del color que quieres añadir, también puedes pegarlo directamente para obtener el color exacto que deseas.
Una vez que hayas hecho las actualizaciones, deberías ver esos cambios reflejados inmediatamente en el formulario en el editor de bloques. Entonces es el momento de pasar a la edición de Estilos de etiqueta.
Estilos de etiquetas
Las etiquetas son el texto que aparece encima de un campo de formulario. Por ejemplo, Nombre o Dirección de correo electrónico. Ajusta los estilos de etiqueta para controlar el tamaño y el color de las etiquetas de tu formulario y crear un aspecto coherente en todo tu sitio.
Puede utilizar el menú desplegable Tamaño para cambiar el tamaño del texto de la etiqueta. La sección Sublabel & Hint le permite elegir los colores de las subetiquetas y las pistas adicionales que aparecen debajo del campo para solicitar información específica.
El color Mensaje de error es para los mensajes de validación de campo que aparecen si el campo recibe una entrada inesperada. El mismo color se utiliza para el asterisco que indica que el campo es obligatorio.
Al igual que en la sección Campo de formulario, puede utilizar colores predeterminados, colores temáticos o utilizar el selector de color para elegir un color personalizado para sus estilos de etiqueta.
Estilos de botones
En el caso de los Estilos de botón, la configuración es similar a la de los Estilos de campo, con la opción de cambiar el tamaño, el borde, el radio del borde y el color. Esto le permite asegurarse de que sus botones siempre se destacan y coinciden con los otros botones en su sitio.
Así es como se ven los ajustes de estilo por defecto para el tema que estoy usando (Frost).
Tenga en cuenta que las opciones de color de los botones se utilizarán en otros campos de formulario como los de opción múltiple, casillas de verificación, valoración y encuestas NPS.
El tema que estoy usando aplica un radio de borde ligeramente redondeado de 8 px. El Borde está seleccionado como Ninguno, lo que significa que el botón no tiene un contorno de borde.
Te recomiendo que leas nuestra guía detallada sobre las mejores prácticas de los botones de envío para obtener más ideas sobre cómo personalizar los botones de tus formularios.
Estilos de contenedor
WPForms también le permite agregar un contenedor de estilo personalizado a su formulario. Encontrará la mayoría de los mismos ajustes que en las secciones anteriores, con la excepción de dos opciones que son exclusivas de los contenedores:
- Relleno: Utilice esta opción para ajustar el espaciado dentro del contenedor del formulario.
- Sombra: Añade un efecto de sombra de un tamaño determinado o no elijas ninguno.
El tema que estoy usando añadió estos ajustes de contenedor por defecto de forma automática, y ya que estoy bastante contento con el resultado, voy a dejar estos como está.
Sin embargo, no dude en experimentar y ajustar el recipiente si desea añadir su propio toque creativo a este diseño.
Estilos de fondo
Con la configuración de Estilos de fondo, puede añadir una imagen de fondo o colores sólidos para acentuar aún más las cualidades de su formulario para llamar la atención.
Convenientemente, hay una biblioteca de fotos de stock que nuestro equipo ha seleccionado cuidadosamente para complementar los formularios de WordPress. Puedes añadir rápidamente una imagen de fondo a tu formulario seleccionando una de las fotos de archivo.
Y si prefieres subir tus propias imágenes personalizadas, también tienes esa opción. Puedes subir una imagen nueva o seleccionar una de tu biblioteca multimedia de WordPress cómodamente desde las opciones de Estilos de fondo.
Para ello, sólo tienes que seleccionar Mediateca en el desplegable Imagen y, a continuación, pulsar Elegir imagen.
Después de eso, se abrirá el modelo de biblioteca multimedia de WordPress, donde puede subir una nueva imagen o elegir una existente como lo haría normalmente.
Ahora, usted podría haber terminado aquí. En este punto, tu formulario está perfectamente estilizado. Pero hay una característica más para los estilos de formulario que quiero mostrarte.
Accede a las funciones avanzadas de estilo de WPForms 🎨
Avanzado
Debajo de los estilos de campo, etiqueta y botón, hay otra sección para Avanzado. No dejes que el nombre te engañe; ¡sigue siendo fácil de manejar!
Ábrelo y verás un montón de código CSS personalizado.
Al usar el estilizador incorporado para WPForms, este código CSS personalizado se genera automáticamente y se almacena aquí. Si desea utilizar este mismo estilo de formulario en varios formularios de su sitio, copie este código CSS y péguelo en la configuración avanzada del estilo de formulario en cada uno de ellos. En segundos, ¡sus formularios coincidirán!
Si desea restablecer los estilos predeterminados de su formulario, puede hacer clic en el botón Restablecer configuración de estilos .
Y si, después de todo ese simple estilo de formulario, todavía desea hacer algunas personalizaciones adicionales a su hoja de estilo, todavía hay un campo para Clase(s) CSS Adicional(es).
¡Y eso es todo! Le has dado estilo a tu formulario y ha sido super fácil, ¿verdad? ¡No necesitas escribir tu propio CSS!
No olvides guardarlo y probarlo antes de publicarlo.
Estilización de formularios de contacto - Preguntas frecuentes
Estas son algunas de las preguntas más comunes sobre el estilo de los formularios de contacto en WordPress sin código:
¿Qué opciones de estilo suelen tener los plugins de formularios de contacto?
Cada plugin de formulario de contacto ofrece diferentes niveles de personalización. En muchos plugins, la única forma de editar el estilo del formulario es mediante CSS personalizado. Las opciones más avanzadas como WPForms y Formidable Forms ofrecen personalizaciones de estilo sin código que te permiten editar las etiquetas de los campos, los bordes de los campos, los mensajes de error y validación y los estilos de los botones de envío.
WPForms incluso va más allá al permitirle personalizar sus correos electrónicos de notificación de formularios con encabezados personalizados, esquemas de color, temas claros y oscuros, y varias plantillas de notificación preconfiguradas.
¿Puedo previsualizar los cambios en el formulario de contacto antes de publicarlos?
Si, con WPForms, tiene varias formas de previsualizar su formulario antes de publicarlo. La forma más fácil es usar el botón Vista previa en la parte superior del constructor de formularios que le permite ver cómo se vería su formulario en una página típica de su sitio después de incrustarlo.
También puedes previsualizar tu formulario desde la página del editor de WordPress. Si quieres ver una vista previa de tu formulario que muestre también cualquier cambio de estilo que hayas realizado en tu campo y botón de envío, usar la opción de vista previa desde el editor de WordPress te permitirá ver todos estos cambios estilísticos.
Por último, si estás usando Elementor para incrustar un formulario creado con WPForms, puedes usar la opción de vista previa nativa de Elementor para ver una vista previa en vivo de tu formulario junto con cualquier otro elemento que hayas añadido a la página.
¿Cómo puedo asegurarme de que mi formulario de contacto con estilo es adaptable y apto para móviles?
WPForms está diseñado para ser responsive y mobile-friendly por defecto. Eso significa que usted no necesita hacer ningún ajuste adicional para asegurarse de que el formulario que ha construido usando WPForms es sensible a través de todos los dispositivos.
¿Puedo estilizar WPForms con Elementor?
Sí, WPForms admite una amplia gama de opciones de estilo de formularios cuando se utiliza con Elementor. Además, WPForms se integra automáticamente con Elementor sin que tengas que realizar ningún paso manual para sincronizar tus formularios con Elementor. Por lo tanto, si prefiere crear páginas con Elementor en lugar de utilizar el editor predeterminado de WordPress, puede aprovechar Elementor para dar estilo a los formularios de contacto que haya creado previamente con WPForms.
A continuación, conecte sus formularios de WordPress a ChatGPT
¿Tienes curiosidad por saber cómo puedes automatizar tu flujo de trabajo cuando se trata de formularios? Descubre cómo conectar ChatGPT a tus formularios de WordPress y agilizar las respuestas con IA.
¿Busca una forma de hacer más atractivos sus formularios? Consulte nuestros consejos para crear formularios interactivos que capten la atención de los usuarios.
Cree su formulario WordPress ahora
¿Listo para crear tu formulario? Empieza hoy mismo con el plugin más sencillo para crear formularios en WordPress. WPForms Pro incluye un montón de plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.
Si este artículo te ha ayudado, síguenos en Facebook y Twitter para más tutoriales y guías gratuitas sobre WordPress.
Estoy tratando de averiguar cómo el estilo de un formulario utilizando el módulo Divi y si eso no es posible, ¿qué solución es necesaria.
Hola Ashley - Actualmente, los Estilos de Formularios pueden ser usados con el editor de Bloques de WordPress o un tema con edición de Sitio Completo. Estoy de acuerdo en que el apoyo a otros constructores sería genial, y la opción de aplicar el estilo de las formas sería genial. Pondré esto en nuestro rastreador de peticiones de características para que esté en el radar de nuestros desarrolladores.
Aún falta la función Estilos de formulario para Divi.
Hola Stale - Lo siento, actualmente no tenemos la función para editar el estilo de las formas en Divi. Estoy de acuerdo en que esto sería útil, y voy a poner esto en el radar de nuestros desarrolladores.
¿Se trata de una función premium? No veo esta opción en mi instalación desde el repositorio de WordPress. No debería ser tan difícil especificar el color que queremos para las entradas de los formularios. No está bien 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 de Full Site Editor(FSE)).
En caso de que le falte la opción para habilitar Modern Markup, por favor sepa 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 modern markup. Además, esta opción no será visible si comenzó a usar WPForms lite desde la versión 1.8.1.1.
Por si le sirve de ayuda, puede obtener más información sobre esta opción en el siguiente tutorial: https://wpforms.com/docs/styling-your-forms/
Si aún tiene problemas con esto, por favor contáctenos en el foro de soporte de WPForms Lite WordPress.org. Muchas gracias.
Hola! recientemente he actualizado el plugin a la versión 1.8.2. Y una característica que me gustaba ya no está disponible. Y una característica que me gustaba ya no está disponible. antes de que pudiera escribir código HTML personalizado dentro de los campos del formulario, como en la elección de casilla de verificación que podría añadir - Tomate Leer más → , no me dejó hacerlo ahora.
Hola Mila - ¡Estaremos encantados de ayudarte! Cuando puedas, escríbenos a soporte para que podamos ayudarte.
Si tiene una licencia de WPForms, tiene acceso a nuestro soporte por correo electrónico, así que envíe un ticket de soporte.
De lo contrario, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite WordPress.org.
Gracias 🙂 .
Estoy usando WP Forms Pro en mi sitio web. Tengo el formulario en dos páginas diferentes. Uno en la página, el texto está en una fuente serif, en la otra página, es en un sans serif. No tengo ni idea de por qué, acabo de construir el formulario y colocarlo. ¿Alguna indicación de por qué?
Estoy construyendo con Divi builder.
Hola Lawrence - por favor, compruebe si la fuente se cambia por Divi. En caso de que ayude, Aquí está la guía sobre cómo DiviFlash controla las fuentes.
Si desea que le echemos un vistazo más de cerca o necesita más ayuda, póngase en contacto con nuestro equipo enviando un ticket de soporte aquí.
Gracias.
No veo esta opción en mi wpforms lite. Tengo 1.8.2.2, y no hay ninguna opción para esto. Necesito cambiar los colores a las fuentes para todo el formulario. ¿Cómo puedo hacer esto en mi formulario?
Hola Larry - Esta función está disponible en todas nuestras versiones de pago incluyendo la gratuita (para el editor de bloques y todos los temas Full Site Editor-FSE).
En caso de que le falte la opción para habilitar Modern Markup, por favor sepa 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 modern markup. Además, esta opción no será visible si comenzó a usar WPForms lite desde 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 que encontrarás aquí
Si todavía tiene algún problema con esto, por favor póngase en contacto con nosotros en WPForms Lite WordPress.org foro de soporte.
Gracias.
Hola. He creado mi primer formulario con wpforms. Mi problema es, que las fuentes son diferentes dentro de la misma forma. Algunas etiquetas tienen un tipo de letra sans, otras un times new roman, pero todas las opciones tienen el tipo de letra sans. ¿Cómo configurarlas para el mismo tipo? Yo uso el editor wp regular, y cuando abro la página en el editor, donde el formulario es, veo todas las fuentes en el mismo estilo (times new roman). Pero en la versión publicada se vuelve diferente. ¿Cual puede ser el problema?
Hola Krisztina - ¡Estaremos encantados de ayudarte! Cuando puedas, escríbenos a soporte para que podamos ayudarte.
Si tiene una licencia de WPForms, tiene acceso a nuestro soporte por correo electrónico, así que envíe un ticket de soporte.
De lo contrario, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite WordPress.org.
Gracias 🙂 .
Creo que debe tenerse en cuenta que a menos que añada el formulario como un bloque, las opciones anteriores para la etiqueta, sugerencia, etc estilo no se muestran. Yo estaba usando el código corto originalmente. Aún así este tutorial me ha llevado a probar otra cosa. Gracias.
Hola Jesse - En "Estiliza tu formulario" y "Estilos de campo" hemos mencionado que el estilo Formularios funciona con el editor de bloques de WordPress. Mientras que la función de estilo no está disponible para shortcodes, estamos trabajando para ampliar los estilos de formularios, y voy a añadir su solicitud a nuestro rastreador de solicitud de función.
¿Es posible editar los estilos de los formularios (fuentes, colores, tamaños) en Elementor?
Hola Rodrigo - Lo siento, actualmente no tenemos la función de editar el estilo de los formularios en Elementor. Estoy de acuerdo en que esto sería útil, y voy a poner esto en el radar de nuestros desarrolladores.
Hola Rodrigo. Sólo para ponerte al día sobre esto, ahora puede estilo WPForms en Elementor también: https://wpforms.com/announcing-elementor-form-styles-and-entry-view-settings/
Mi problema era diferentes tipos de letra en el mismo formulario. Algunas etiquetas tienen tipo de letra sans, algunas etiquetas como times new roman tipo de letra, pero todas las selecciones están en tipo de letra sans.
Hola - ¡Estaremos encantados de ayudarte! Cuando puedas, escríbenos a soporte para que podamos ayudarte.
Si tiene una licencia de WPForms, tiene acceso a nuestro soporte por correo electrónico, así que envíe un ticket de soporte.
De lo contrario, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite WordPress.org.
Gracias 🙂 .
Estoy tratando de editar un embed situado 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 puedas, escríbenos a soporte para que podamos ayudarte.
Si tiene una licencia de WPForms, tiene acceso a nuestro soporte por correo electrónico, así que envíe un ticket de soporte.
De lo contrario, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite WordPress.org.
Gracias 🙂 .
Hola, ¿podría decirme cómo puedo eliminar el borde en el área de texto del cuadro de texto de entrada de enfoque de wpforms?
realmente necesito la respuesta por favor.
Hola Shivam - Lamento el problema. Cuando puedas, envíanos una captura de pantalla al servicio de asistencia para que podamos ayudarte.
Si tiene una licencia de WPForms, tiene acceso a nuestro soporte por correo electrónico, así que envíe un ticket de soporte.
De lo contrario, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite WordPress.org.
Gracias 🙂 .