Resumen de IA
¿Te gustaría personalizar el botón de envío para que se ajuste mejor al diseño o la personalidad de tu sitio? El botón de envío de tu formulario puede desempeñar un papel importante en las tasas de envío.
Esta guía cubrirá cómo personalizar el texto y el estilo del botón de envío de su formulario, tanto en el creador de formularios como con su propio CSS.
Cambiar el texto del botón de envío
Para cambiar el texto 'Enviar' del botón de tu formulario, abre el creador de formularios en Ajustes » General. Aquí verás dos campos para establecer el texto en el botón de envío:
- Texto del botón de envío: El texto que se muestra cuando este botón aún no ha sido pulsado
- Texto de procesamiento del botón de envío: El texto que se muestra después de que el usuario pulsa 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 tu preferencia. Una vez que estés satisfecho con los cambios, guarda el formulario.
Estilo del botón de envío en el creador de formularios
La forma más rápida de retocar el estilo de su botón de envío es en el creador de formularios, donde puede ver sus cambios a medida que los realiza. No se necesita CSS.
Abra el creador de formularios y vaya a Ajustes » Temas.
Luego, busque la sección Estilos del botón a la izquierda.
- Tamaño: Establece el tamaño de su botón. Las opciones incluyen Pequeño, Mediano y Grande.
- Borde: Delinea su botón con un borde Sólido, Discontinuo o Punteado.
- Grosor del borde: Establece el grosor del borde. La unidad predeterminada son píxeles (px), pero puede elegir una unidad diferente.
- Radio del borde: Redondea las esquinas de su botón para un aspecto más suave o más nítido. Los píxeles (px) son la unidad predeterminada aquí también.
Debajo de estos, encontrará tres opciones de color para su botón. Para cambiar un color, haga clic en la muestra para abrir el selector de color. Puede elegir un color visualmente o introducir un código hexadecimal para un control preciso.
- Fondo: Establece el color detrás de la etiqueta de su botón.
- Borde: Establece el color del borde de su botón. Este solo se aplica si ha elegido un estilo de borde anteriormente.
- Texto: Establece el color de la etiqueta de su botón.
También puede elegir un tema de color predefinido en el ajuste Temas, que actualiza su botón junto con el resto de su formulario. Para obtener más información, consulte nuestro tutorial sobre uso de temas de formularios.
Una vez que esté satisfecho con sus cambios, haga clic en Guardar, luego use el botón Vista previa para ver su formulario con los estilos aplicados.
El creador de formularios cubre los cambios que la mayoría de los sitios necesitan. Para un control más fino, como el relleno exacto, la alineación del botón, los botones de ancho completo o una fuente específica, necesitará una pequeña cantidad de CSS. Lo explicaremos a continuación.
Estilo del botón de envío con CSS
CSS le da control total sobre el botón de envío, así como sobre cualquier otro aspecto de su formulario. Es la herramienta adecuada cuando necesita algo que el creador de formularios aún no ofrece.
Si eres nuevo en CSS o deseas un repaso, el mejor lugar para empezar es con nuestra guía introductoria a CSS.
Aquí tienes el CSS predeterminado para un botón de envío de WPForms, así como comentarios para indicar 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 */
}
Puedes cambiar cualquiera de estos valores para estilizar el botón de forma diferente. Como ejemplo, empecemos dando a nuestro botón un fondo amarillo.
El primer paso es encontrar el código hexadecimal del color que queremos. htmlcolorcodes.com y Adobe Color CC son herramientas gratuitas útiles para esto.
Una vez que tengamos el código hexadecimal del 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 */
color:#000 !important;
}
A continuación, deberá agregar este CSS a su sitio. WordPress mantiene el panel CSS adicional en uno de dos lugares, dependiendo del tipo de tema que esté utilizando:
- Temas clásicos: Ve a Apariencia » Personalizar y selecciona CSS adicional.
- Temas de bloques: WordPress oculta el Personalizador cuando un tema de bloques está activo, por lo que añadirás tu CSS en el editor del sitio. Ve a Apariencia » Editor y abre Estilos para encontrar la opción de CSS adicional.
Aquí está el panel de CSS adicional en el Personalizador, que es lo que verás en un tema clásico.
Y aquí está en el editor del sitio, que es lo que verás en un tema de bloques.
Una vez que hayas abierto la sección de CSS adicional, pega tu nuevo CSS y guarda los cambios.
A continuación, se muestra cómo se verá nuestro botón ahora con este CSS aplicado:
Personalización de estilos al pasar el ratón
El CSS te permite aplicar estilos completamente diferentes cuando el cursor se cierne sobre 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 predeterminado en WPForms cuando se cierne 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 */
}
Es posible que notes que esto es mucho menos CSS de lo que vimos para el botón cuando no está en modo de pasar el ratón por encima. Esto se debe a que CSS aplicará todo el CSS anterior a tu botón en modo de pasar el ratón por encima a menos que se indique lo contrario.
Si dejas 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 normalmente sería negro, y no le hemos indicado que cambie al pasar el ratón por encima.
Al igual que con el ejemplo anterior de CSS personalizado, puedes cambiar cualquiera de estos valores para estilizar de forma diferente los estilos de pasar el ratón por encima del botón. Para nuestro ejemplo, le daremos al botón un fondo amarillo más oscuro cuando se pase el ratón por encima.
.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 */
}
Así es como se verá el botón con el CSS aplicado:
Personalizar estilos de enfoque
Al igual que puedes establecer un estilo de pasar el ratón por encima para tu botón con CSS, también puedes establecer un estilo de enfoque. El estilo de enfoque se aplica cuando el botón es el punto focal de cualquier evento en la página. Por ejemplo, si usas la tecla Tab para navegar por la página.
Usar 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 predeterminado 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 cambia sutilmente. Esto le 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 usar un color que no sea amarillo, para que el estilo de enfoque sea distinto del estilo de pasar el ratón por encima.
.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, así es como se verá el botón cuando esté en foco:
Ejemplo de CSS
Ahora que hemos cubierto lo básico, veamos 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 pasar el ratón por encima 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á en foco. Recuerda, los únicos cambios son los colores de fondo y borde:
Preguntas frecuentes
Estas son respuestas a algunas preguntas frecuentes sobre la personalización del botón de envío en WPForms.
¿Puedo cambiar el tamaño y el relleno del botón de envío?
En parte. En el constructor de formularios, ve a Ajustes » Temas » Estilos del botón y usa el ajuste Tamaño para elegir entre Pequeño, Mediano y Grande. Eso es suficiente para la mayoría de los sitios, y también funciona en WPForms Lite.
Si necesitas un tamaño de texto exacto o valores de relleno específicos, necesitarás añadir un fragmento de CSS. Aquí tienes un ejemplo.
div.wpforms-container-full .wpforms-form button[type=submit] {
font-size: 18px !important; /* Text size */
padding: 14px 40px !important; /* Space inside the button */
}
¿Puedo cambiar la posición del botón para que se muestre en el centro?
La alineación del botón aún no está disponible en el constructor de formularios, por lo que necesitarás un pequeño fragmento de CSS para esto. Por defecto, los botones de envío de WPForms están alineados al lado izquierdo de la página. Para centrar el botón, añade el siguiente fragmento de código a tu 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 deseas aplicar el estilo a un formulario específico, necesitarás usar el selector CSS #wpforms-submit-FORM-ID. Aquí tienes un ejemplo de fragmento.
#wpforms-submit-FORM-ID {
margin: 0 auto !important;
display: block !important;
}
Así es como se verá el botón en el frontend.
Si deseas que el botón se muestre a pantalla completa, usa la propiedad CSS width: 100%. Aquí tienes 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;
}
Visualización del botón a pantalla completa.
¿Puedo personalizar el botón de envío de WPForms en Elementor Builder?
Sí. WPForms se integra con Elementor para proporcionar estilos de formulario directamente dentro de Elementor Builder. Puedes personalizar los campos de tu formulario, las etiquetas, los 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.
¿Puedo estilizar el botón de envío en Divi?
Sí, aunque lo estilizarás en el constructor de formularios de WPForms en lugar de dentro de Divi. El módulo de WPForms no incluye controles de estilo de formularios, por lo que sus ajustes solo cubren las propias opciones de Divi, como el tamaño y el espaciado.
Establece los estilos de tu botón en Ajustes » Temas en el constructor de formularios, y se aplicarán a tu formulario en la página de Divi. Esto funciona tanto si incrustas tu formulario con el módulo de WPForms como con el shortcode. Para más detalles, consulta nuestra guía sobre cómo añadir WPForms a una página de Divi.
¿Cómo oculto el botón de envío de mi formulario?
Ocultar el botón de envío es especialmente útil si estás utilizando el complemento de Cálculos para crear calculadoras en tu sitio. Para ocultar el botón de envío de tu formulario, necesitarás añadir un fragmento de CSS personalizado a tu sitio. El fragmento de código está disponible en la biblioteca de fragmentos de código de WPForms.
Para obtener detalles sobre cómo importar este fragmento a tu sitio, asegúrate de consultar nuestra guía sobre cómo ocultar el botón de envío.
¡Eso es todo! Ahora puedes personalizar el botón de envío de tu formulario, ya sea en el constructor de formularios o con tu propio CSS.
A continuación, ¿te gustaría estilizar el resto de tu formulario para que coincida? Echa un vistazo a nuestra guía completa sobre cómo estilizar tus formularios para ver todas las opciones disponibles en el constructor de formularios.