¿Le gustaría personalizar el botón de envío para que se adapte mejor al diseño o la personalidad de su sitio? El botón de envío de su formulario puede desempeñar un papel importante en las tasas de envío.
En esta guía se explica cómo personalizar el texto y el estilo del botón de envío del formulario.
Cambiar el texto del botón Enviar
Para cambiar el texto 'Enviar' del botón de tu formulario, abre el constructor de formularios en Configuración " General. Aquí verás dos campos para configurar el texto del botón de envío:
- Texto del botón Enviar: El texto que se muestra cuando aún no se ha hecho clic en este botón
- Texto de procesamiento del botón Enviar: El texto que se muestra después de que el usuario haga clic en este botón, pero antes de que se muestre la confirmación al usuario.
Puedes cambiar el texto del botón de envío según tus preferencias. Cuando estés satisfecho con los cambios, guarda el formulario.
Estilo del botón Enviar
CSS proporciona una flexibilidad increíble para personalizar el botón de envío, así como cualquier otro aspecto de su formulario.
Si eres nuevo en el uso de CSS o quieres refrescar tus conocimientos, lo mejor es que empieces por nuestra guía de introducción a CSS.
Aquí está el CSS por defecto para un botón de envío de WPForms, así como comentarios para notar lo que hace cada línea de CSS:
.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
background-color: #eee; /* Grey background */
border: 1px solid #ddd; /* Dark grey border */
color: #333; /* Black text color */
font-size: 1em; /* Size of text */
padding: 10px 15px; /* Distance between text and border */
}
Puede cambiar cualquiera de estos valores para dar un estilo diferente al botón. Como ejemplo, vamos a empezar por dar a nuestro botón un fondo amarillo.
El primer paso es encontrar el código hexadecimal del color que queremos: htmlcolorcodes.com o Adobe Color CC son herramientas gratuitas muy útiles para ello.
Una vez que tenemos el código hexadecimal para el tono de amarillo que queremos, podemos crear nuestro CSS:
.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
background-color: #FAF243 !important; /* Yellow background */
}
A continuación, tenemos que añadir este CSS a nuestro sitio. La forma más sencilla de hacerlo es utilizando el Editor CSS de WordPress. Para abrirlo, ve a Apariencia " Personalizar y selecciona CSS adicional.
Una vez que hayas abierto la sección CSS adicional, pega tu nuevo CSS. A continuación, haz clic en el botón Guardar y publicar y ¡listo!
A continuación se muestra cómo se verá nuestro botón ahora con este CSS aplicado:
Personalización de los estilos Hover
CSS permite aplicar estilos completamente diferentes cuando el cursor pasa por encima de un botón. Este cambio de estilo ayuda a la experiencia del usuario porque le permite saber que este objeto es clicable.
A continuación se muestra el CSS por defecto en WPForms cuando se pasa el cursor sobre un botón. Como se indica en los comentarios, el color de fondo se vuelve un poco más oscuro y el color del borde se vuelve un poco más claro:
.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
background-color: #ddd; /* Darker grey background */
border: 1px solid #ccc; /* Lighter grey border */
}
Puedes notar que esto es mucho menos CSS que el que vimos para el botón cuando no está sobrevolado. Esto se debe a que CSS aplicará todo el CSS anterior al botón sobre el que se pasa el cursor a menos que se indique lo contrario.
Si deja los estilos predeterminados, por ejemplo, el color del texto seguirá siendo negro cuando se pase el ratón por encima del botón. Esto se debe a que el color del texto del botón es normalmente negro, y no le hemos dicho que cambie al pasar el ratón por encima.
Al igual que en el ejemplo anterior de CSS personalizado, puedes cambiar cualquiera de estos valores para modificar el estilo del botón al pasar por encima. En nuestro ejemplo, daremos al botón un fondo amarillo más oscuro cuando se sitúe sobre él.
.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
background-color: #e5da00 !important; /* Darker yellow background */
}
Este es el aspecto que tendrá el botón con el CSS aplicado:
Personalización de los estilos de enfoque
Al igual que puede establecer un estilo hover para su botón con CSS, también puede establecer un estilo focus. El estilo de enfoque se aplica cuando el botón es el punto focal de cualquier evento dentro de la página. Por ejemplo, si utilizas el tabulador para navegar por la página.
El uso de un estilo de enfoque mejora la experiencia del usuario, especialmente útil para los usuarios que dependen de la navegación por teclado para navegar por la web.
Aquí está el CSS por defecto en WPForms cuando un botón está en foco:
.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
background-color: #ddd;
border: 1px solid #ccc;
cursor: pointer;
}
En este caso, el background-color es un tono ligeramente más oscuro que el predeterminado, y el borde también se modifica sutilmente. Esto permite al usuario saber que el botón está ahora en foco y recibirá cualquier pulsación de tecla relevante.
Para este ejemplo, vamos a utilizar un color distinto del amarillo, para que el estilo de enfoque se distinga del estilo hover.
.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
background-color: #80ccf6 !important;
}
Con este CSS personalizado aplicado, este es el aspecto que tendrá el botón cuando esté enfocado:
Ejemplo de CSS
Ahora que hemos cubierto lo básico, vamos a ver un ejemplo completo de CSS personalizado para un botón de envío.
Aquí está el CSS que añadiremos para este ejemplo, que incluye cambios de estilo tanto para el hover como para el enfoque:
/* New button styles */
.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
padding: 15px !important; /* Increase distance between text and border */
width: 100% !important; /* Make the button full-width */
font-size: 1.5em !important; /* Increase text size */
background-color: #af0000 !important; /* Red background */
color: #fff !important; /* White text */
border: 8px double #860b0b !important; /* Dark red, double-line border */
}
/* New button hover styles */
.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
background-color: #860b0b !important; /* Dark red background */
border: 8px double #af0000 !important; /* Red, double-line border */
}
/* New button focus styles */
.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
background-color: red !important; /* Dark red background */
border: 8px double #860b0b !important; /* Red, double-line border */
}
A continuación se muestra cómo se verá nuestro botón ahora con este CSS aplicado:
Al pasar el ratón por encima:
Y cuando esté enfocado. Recuerde que los únicos cambios son los colores del fondo y del borde:
Preguntas frecuentes
Estas son las respuestas a algunas de las preguntas más frecuentes sobre la personalización del botón de envío en WPForms.
¿Puedo cambiar la posición del botón para que aparezca en el centro?
Por defecto, los botones de envío de WPForms están alineados a la izquierda de la página. Sin embargo, puede utilizar CSS personalizado para alinear el botón al centro. Para ello, agregue el siguiente fragmento de código a su sitio.
div.wpforms-container-full .wpforms-form button[type=submit] {
margin: 0 auto !important;
display: block !important;
}
El código CSS anterior aplicará el estilo a todos los formularios de tu sitio. Si desea aplicar el estilo a un formulario específico, tendrá que utilizar la propiedad #wpforms-submit-FORM-ID selector CSS. He aquí un fragmento de ejemplo.
#wpforms-submit-FORM-ID {
margin: 0 auto !important;
display: block !important;
}
Así es como se verá el botón en el frontend.
Si desea que el botón se muestre a todo lo ancho, utilice la opción width: 100% propiedad CSS. He aquí una versión actualizada del fragmento anterior.
div.wpforms-container-full .wpforms-form button[type=submit] {
margin: 0 auto !important;
display: block !important;
width: 100% !important;
}
Pantalla de botones de ancho completo.
¿Puedo personalizar el botón de envío de WPForms en Elementor Builder?
Sí. WPForms se integra con Elementor para proporcionar un estilo de formulario directamente dentro del Elementor Builder. Puede personalizar sus campos de formulario, etiquetas, colores y el botón de envío.
Para obtener más información sobre cómo personalizar tu formulario en Elementor, consulta nuestra guía sobre cómo añadir WPForms a una página de Elementor.
¿Cómo puedo ocultar el botón de envío de mi formulario?
Ocultar el botón de envío es especialmente útil si utilizas el complemento Cálculos para crear calculadoras en tu sitio. Para ocultar el botón de envío de su formulario, necesitará agregar un fragmento de código CSS personalizado a su sitio. El fragmento de código está disponible en la biblioteca de fragmentos de código de WPForms.
Para obtener más información sobre cómo importar este fragmento a su sitio web, consulte nuestra guía sobre cómo ocultar el botón de envío.
Ya está. Ahora puedes personalizar tu botón de envío usando CSS personalizado.
¿Quieres más ejemplos? Echa un vistazo a nuestro tutorial con aún más CSS botón de envío que se puede copiar y pegar a la derecha en su sitio.