How to Customize the Submit Button

Ver Markdown

¿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 tu formulario.

Cambiar el texto del botón de envío
Estilizar el botón de envío
Personalización de estilos al pasar el ratón
Personalizar estilos de enfoque
Ejemplo de CSS
Preguntas frecuentes

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.

Estilizar el botón de envío

CSS proporciona una flexibilidad increíble para personalizar el botón de envío, así como cualquier otro aspecto de tu formulario.

Si eres nuevo en CSS o deseas un repaso, el mejor lugar para empezar es con nuestra guía introductoria a CSS.

Si prefieres estilizar tu formulario sin escribir código, consulta nuestro tutorial de estilos de formulario para aprender a personalizar tu formulario en el editor de bloques.

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 o 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 */
}

Al añadir CSS a tu sitio, puede ser necesario incluir !important antes del punto y coma para asegurarte de que tus estilos personalizados se apliquen correctamente. Consulta nuestra guía para solucionar problemas de CSS para más detalles.

A continuación, necesitamos 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. Luego 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:

¿No se muestra tu nuevo CSS en tu sitio? Consulta nuestro tutorial sobre cómo solucionar este problema.

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:

Estilos al pasar el ratón por encima del botón de envío

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:

Para opciones de personalización más avanzadas para tu botón de envío usando CSS, incluyendo estilos de ancho completo, efectos de presionado y animaciones al pasar el ratón por encima, consulta nuestra documentación para desarrolladores para una amplia gama de ejemplos y tutoriales.

Ejemplo de CSS

Ahora que hemos cubierto lo básico, veamos un ejemplo completo de CSS personalizado para un botón de envío.

El código a continuación cambiará el botón de envío para todos los formularios creados en tu sitio con WPForms. Si deseas estilizar el botón de envío solo en un formulario individual, necesitarás encontrar el ID único de ese formulario. Para más detalles, consulta nuestra guía completa para estilizar formularios de contacto con CSS.

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 la posición del botón para que se muestre en el centro?

Por defecto, los botones de envío de WPForms están alineados al lado izquierdo de la página. Sin embargo, puedes usar CSS personalizado para alinear el botón al centro. Para hacerlo, 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;
}

Asegúrate de reemplazar FORM-ID en el fragmento anterior con el ID del formulario que deseas estilizar.

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.

¿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 tu botón de envío utilizando CSS personalizado.

¿Quieres más ejemplos? Consulta nuestro tutorial con aún más CSS para botones de envío que puedes copiar y pegar directamente en tu sitio.

Personalización del botón de envío

Resumen de IA