WPForms es uno de los mejores plugins para crear formularios en WordPress gracias a su facilidad de uso, pero necesita ser personalizado con hojas de estilos.
Si quieres que los formularios encajen perfectamente con el diseño de tu página web, es fundamental personalizarlos. En este tutorial aprenderás a modificar su apariencia utilizando CSS de manera fácil y práctica.
Cómo añadir CSS personalizado en WPForms:
El primer paso para cambiar el estilo de tu formulario es saber dónde debes añadir el CSS personalizado. Tienes dos opciones:
A. Desde el personalizador de WordPress: ve a Apariencia > Personalizar > CSS adicional y pega tu código allí. Es el método más sencillo y rápido.
B. Utilizando un tema hijo: si trabajas en un proyecto profesional, es recomendable añadir el CSS en el archivo style.css del tema hijo para mantener el código limpio y organizado.
Cómo identificar los elementos que quieres personalizar:
Antes de aplicar estilos, necesitas identificar correctamente los elementos del formulario. Para ello:
1. Abre la página donde se encuentra el formulario.
2. Haz clic derecho sobre cualquier campo del formulario y selecciona «Inspeccionar» en tu navegador.
3. Localiza la clase o el ID del elemento. Por ejemplo, los campos de texto suelen tener clases como .wpforms-field y el botón de enviar utiliza .wpforms-submit.
Aplicar estilos personalizados a tu formulario WPForms:
Una vez identificados los selectores, puedes comenzar a personalizar tu formulario. Por ejemplo, si quieres cambiar los estilos del botón del formulario, solamente debes identificar la Clase CSS o el ID del elemento, y aplicar los estilos.
Estilizar el botón de enviar:
Añade tu código CSS para cambiar el color, tamaño, borde y efecto hover del botón de enviar.
.wpforms-form button[type=submit] {
background-color: #000000 !important;
border-color: #000000 !important;
color: #fff !important;
transition: background 0.3s ease-in-out;
width:100%;
}
.wpforms-form button[type=submit]:hover {
background-color: #222222 !important;
}
Aplicar estilos personalizados a tu formulario WPForms con la IA de ChatGPT:
En el video tutorial puedes ver cómo aplicar este PROMT de ChatGPT para que genere de forma rápida todo el CSS necesario para dar a tus formularios el estilo que deseas. Es fácil y simple de utilizar. Adjunta a ChatGPT el HTML del formulario de WPForms con el que estás trabajando (ver vídeo) y dale instrucciones de estilos que desees. Puedes copiar y modificar este PROMT a tu antojo.
PROMT WpForms
Te adjunto un formulario de WPForms. Quiero que generes el CSS para que:
-El botón tenga un ancho del 100%, con fondo verde y texto blanco.
-Los elementos de entrada (input[type=»text»], input[type=»email»], input[type=»number»], textarea, etc.) tengan borde negro de 3 píxeles y border-radius: 0.
-No aplicar border-radius: 0 ni cambiar el estilo de los elementos radio (input[type=»radio»]) ni de los checkbox (input[type=»checkbox»]), para que conserven su forma redonda.
-Quiero el CSS en formato copiar/pegar listo para añadir en el personalizador de WordPress.
BONUS: personalizar el color de los correos electrónicos de WPForms.
Además de personalizar la apariencia del formulario en tu sitio web, WPForms también te permite adaptar el diseño de los correos electrónicos que envía automáticamente ES importante hacerlo si queremos que toda nuestra web conserve una unidad de color e imagen corporativa y no lleguen correos con un color cuando son de WooCommerce, y de otro cuando son de WPForms.
Para hacerlo:
1. Accede a WPForms > Ajustes > Correos electrónicos.
2. Cambia el color de fondo, el color del texto, etc.
Esto te permitirá mantener la coherencia visual entre tu página web y los correos electrónicos que reciben tus usuarios, mejorando así la imagen de tu marca.
Consejos prácticos para personalizar tus formularios WPForms
Cuando personalices tus formularios, recuerda trabajar de manera progresiva:
Inspecciona siempre los elementos. Antes de aplicar cambios, asegúrate de estar modificando el selector correcto usando las herramientas de inspección de tu navegador.
Aplica cambios pequeños y revisa. Después de cada fragmento de CSS que añadas, guarda y revisa los cambios en tiempo real para asegurarte de que todo funciona correctamente.
Organiza tu código. Utiliza comentarios en tu CSS para identificar qué parte del formulario estás modificando, lo que te ayudará a mantener tu código limpio y fácil de editar en el futuro.
¡WpForms ha quedado personalizado!
Personalizar tus formularios WPForms con CSS es una forma sencilla de mejorar su apariencia y adaptarlos perfectamente al estilo de tu sitio web. Con unas pocas líneas de código podrás cambiar colores, tamaños, bordes, botones y mucho más, haciendo que tu formulario pase de ser uno genérico a uno profesional y alineado con tu marca.
No olvides aprovechar también las opciones de personalización de correos electrónicos para ofrecer una experiencia completa y coherente a tus usuarios.
