Resumen de IA
¿Te gustaría personalizar el color del botón de envío de tu formulario para que coincida con la marca de tu sitio web? Si bien WPForms 1.8.1+ ofrece personalización de color integrada a través del editor de bloques, también puedes lograr esto usando CSS personalizado para un control más preciso.
Esta guía te mostrará cómo cambiar el color de tu botón de envío usando CSS.
Con el lanzamiento de WPForms 1.8.1, ahora puedes cambiar fácilmente el color del botón de envío sin usar CSS, simplemente agregando el formulario a tu página usando un editor de bloques. Con esta función de estilo de formularios, puedes estilizar tus formularios sin escribir ningún CSS. Para obtener más información al respecto, consulta esta útil documentación.
Sin embargo, también puedes usar CSS personalizado para lograr esto y, para este tutorial, este es el método que utilizaremos para cambiar el estilo del color del botón Enviar.
Configuración del formulario
Para empezar, abre el constructor de formularios creando un formulario nuevo o editando uno existente. Agrega los campos de formulario deseados según sea necesario.
Agregar el código CSS
El siguiente fragmento de CSS cambiará el color de tu botón de envío:
El CSS anterior cambiará el fondo del color del botón de envío a azul (#066AAB) con texto blanco en todos los botones Enviar de WPForms en su sitio.
Personalización del código
Para usar colores diferentes, reemplace los códigos hexadecimales en el código:
En la línea 7, reemplace #066AAB con el color de botón deseado.
En la línea 8, reemplace # con el mismo color para que coincida con el borde.066AAB
En la línea 14, reemplace #04446E con el color deseado al pasar el ratón (normalmente un tono más oscuro de su color de botón).
Por ejemplo, para hacer un botón rojo podría usar:
background-color: #ff0000 !important;
border-color: #ff0000 !important;
Preguntas frecuentes
P: ¿Por qué no me funciona este CSS?
R: Si no ve sus cambios, primero limpie la caché de su navegador. Si aún no funciona, su tema podría estar anulando los estilos. Intente agregar !important a sus reglas CSS como se muestra en nuestro ejemplo. Para obtener más ayuda, consulte nuestra guía de solución de problemas de CSS.
P: ¿Funcionará también para los botones Siguiente y Anterior?
R: Si está utilizando un campo de Salto de página en su formulario y está utilizando los botones Siguiente y Anterior para la navegación, usaremos un CSS que hará que todos estos botones tengan exactamente el mismo estilo. Simplemente copie este CSS a su sitio.
.wpforms-form button[type=submit], button.wpforms-page-button {
background-color: #024488 !important;
border-color: #024488 !important;
color: #fff !important;
transition: background 0.3s ease-in-out;
}
.wpforms-form button[type=submit]:hover, button.wpforms-page-button:hover {
background-color: #022B57 !important;
}
P: ¿Puedo apuntar solo a uno de mis formularios?
R: Si quisiera cambiar solo un formulario, simplemente apuntaría al ID del formulario en su CSS. En este ejemplo, apuntaremos al ID del formulario 999 para el botón Enviar, así como para los botones Siguiente y Anterior del campo Salto de página.
Deberá actualizar el 999 para que coincida con su propio ID de formulario.
button#wpforms-submit-999, form#wpforms-form-999 button.wpforms-page-button {
background-color: #024488;
border-color: #024488;
color: #fff;
transition: background 0.3s ease-in-out;
}
button#wpforms-submit-999:hover, form#wpforms-form-999 button.wpforms-page-button:hover {
background-color: #022B57;
}
¡Y eso es todo! Ahora ha cambiado el color de su botón de envío. A continuación, ¿le gustaría usar CSS para personalizar el botón Enviar de otras maneras? Por favor, eche un vistazo a nuestro tutorial sobre cómo usar CSS para personalizar el botón de envío.