Resumen de IA
Los botones de envío son uno de los aspectos más fácilmente ignorados del diseño de formularios. Aunque son una pequeña parte de los formularios ubicada en la parte inferior, los botones de envío aún pueden tener un gran impacto en el atractivo visual general de su formulario.
Después de probar toneladas de diferentes tipos de formularios de contacto para aumentar las conversiones, puedo decirle que un botón de envío bien diseñado puede marcar la diferencia a la hora de captar la atención de sus visitantes.
En este artículo, compartiré algunos consejos y mejores prácticas basadas en mi experiencia optimizando formularios de contacto para conversiones. ¡Vamos a ello!
Consejos básicos de estilo para botones de envío en WPForms
WPForms te ofrece diferentes formas de estilizar el botón de envío en tu formulario. Yo prefiero usar las opciones de Estilo del formulario en el editor de bloques de WordPress. Es la forma más fácil de personalizar casi todos los componentes de tu formulario.
Las personalizaciones de estilo del botón están disponibles en todas las versiones de WPForms. Pero recomiendo usar WPForms Pro para desbloquear toda la gama de opciones de estilo, incluyendo temas de formularios listos para usar, así como configuraciones para el fondo y los contenedores de tu formulario.
Puedes encontrar la configuración de los estilos del botón de envío en el panel derecho de las opciones de tu formulario dentro del editor de bloques.
Estas configuraciones te permiten controlar el tamaño, el borde y los colores del botón de envío sin necesidad de código.
Tamaño del botón de envío
WPForms te ofrece tres ajustes preestablecidos para el tamaño del botón: pequeño, mediano y grande.
Las 3 opciones son perfectamente viables desde el punto de vista del diseño. No estarás infringiendo ninguna de las mejores prácticas al elegir cualquier tamaño de botón aquí.
Lo que es más importante aquí es la consistencia del diseño. Por ejemplo, si estás usando tamaños de campo pequeños y botones grandes, tu formulario podría parecer un poco desproporcionado en algunos lugares.
Para un mejor equilibrio, intenta usar un tamaño consistente para todos los elementos de tus formularios.
Nuestra guía sobre estilo de formularios usando el editor de bloques explora las diferentes opciones de personalización para cada componente del formulario. Todos estos aspectos diferentes se unen para crear el diseño de formulario perfecto.
Tipo de borde
Los tipos de borde son una elección puramente estilística. Si te has dado cuenta, cada vez es más común usar un diseño sin bordes para un estilo limpio y minimalista.
Sin embargo, también tienes opciones para usar tipos de borde menos comunes en WPForms:
- Los bordes sólidos son bastante populares y dan a tus formularios un aspecto profesional y refinado.
- Los bordes discontinuos o de puntos son menos comunes, pero añaden un toque de creatividad lúdica. Úsalo si el tema de tu sitio web es más informal, pero ten cuidado de no abusar.
- Los diseños sin borde son elegantes y modernos, a menudo se utilizan para enfatizar el minimalismo o para integrar el botón perfectamente con el fondo. Al prescindir de bordes, asegúrate de que haya suficiente contraste o sombra para distinguir el botón de los elementos circundantes.
Tamaño del borde
También puedes ajustar el tamaño de tu borde. Es una buena práctica tener un grosor de borde que complemente el tamaño del botón. Cuando utilizo un tamaño de botón pequeño, me aseguro de complementarlo con un borde fino de 3-4 px. Esto crea el aspecto visualmente más equilibrado en mi experiencia.
Para botones grandes, un ancho de borde de 4-6 px es más adecuado. Una buena regla a seguir es usar bordes sutiles que agreguen estructura sin abrumar el diseño del botón.
Radio del Borde
La configuración del radio del borde en WPForms te da control total sobre cuán redondeados quieres que se vean tus botones. Los botones más redondeados funcionan muy bien en temas que utilizan estilos modernos.
De hecho, algunos estudios han encontrado una correlación entre los botones redondos y mayores conversiones. Vale la pena experimentar con botones redondos si estás optimizando para conversiones.
Puedes usar un radio de borde de alrededor de 15-20 px para lograr el aspecto de botón estilo cápsula que muchos sitios modernos utilizan hoy en día.
Si prefieres mantener un estilo formal, no dudes en dejar el radio del borde en 0 px para mantener tu botón cuadrado.
Lo importante es equilibrar la curvatura de tu botón con el tema general de diseño de tu sitio web.
Tengo la teoría de que las formas más redondeadas funcionan mejor cuando se usan con moderación. De esta manera, es más probable que destaquen entre las formas geométricas populares que generalmente usas en otras partes de tu sitio.
Color de fondo del botón
En WPForms, el color de fondo del botón es fácil de seleccionar con el selector de color. Elegir el color es importante porque afecta la visibilidad de tu botón.
Selecciona un color de fondo que contraste con el fondo de tu formulario para que tu botón sea lo más visible posible en todos los dispositivos.
Tu marca también juega un papel en la selección del color. Si el diseño de tu web se basa en una paleta de colores de marca, generalmente es una buena idea ceñirse a los colores temáticos de tu marca.
En cualquier caso, asegúrate de evitar colores demasiado brillantes o chocantes que puedan distraer innecesariamente a los usuarios.
Color del borde
El borde es solo una pequeña fracción del botón de envío. Pero es un buen lugar para agregar colores de acento y mejorar el atractivo visual de tu formulario.
Los bordes lucen más atractivos cuando contrastan bien con el color de fondo de tu botón. Esto no solo agrega personalidad a tu diseño, sino que también mejora la visibilidad de tu botón.
Recomiendo usar tonos sutiles para evitar llamar demasiado la atención sobre el borde en sí. El objetivo es acentuar el botón en lugar de aumentar las distracciones con bordes de botón llamativos.
Color del texto del botón
Con el color del texto del botón, solo debes tener un objetivo: priorizar la legibilidad. La forma más fácil de hacer que el texto de tu botón sea fácil de leer es usar un color de texto que contraste fuertemente con el fondo del botón.
Una buena regla general a seguir es usar texto blanco para fondos de botones oscuros y texto negro o gris oscuro para tonos más claros de fondos.
Si bien puedes salirte con la tuya con colores audaces y vibrantes en otros componentes del botón de envío, es mejor evitar desviarse demasiado de los colores neutros estándar para el color del texto para mantener una buena legibilidad.
Ubicación y alineación del botón
Dónde se sitúa el botón importa tanto como su aspecto, y es la configuración que la gente tiende a olvidar hasta que un formulario se siente ligeramente extraño por razones que no pueden nombrar.
Para un formulario estándar de una sola columna, mantén el botón alineado a la izquierda con los bordes de los campos que están encima, ya que alguien que rellena tu formulario ya está siguiendo una línea recta hacia abajo por el lado izquierdo.
La alineación centrada funciona bien para formularios cortos e independientes, como una suscripción a un boletín o un bloque de contacto de dos campos, donde no hay una columna larga para que el ojo siga.
En el móvil, un botón de ancho completo suele ser la opción más segura porque elimina cualquier duda sobre dónde tocar.
Si buscas la alineación centrada porque el formulario en sí se ve descentrado en la página, centra todo el formulario en lugar de solo el botón.
Técnicas avanzadas de estilo para botones de envío
WPForms no requiere que uses ningún código para el estilo básico de tu botón. Sin embargo, necesitarás usar CSS simple para algunos efectos avanzados como colores degradados.
Esto es mucho más fácil de lo que parece. Primero, necesitarás tener el plugin WPCode instalado en tu sitio, lo que te permitirá insertar fácilmente fragmentos de código para realizar cambios en los estilos de tu botón de envío.
Instalar WPCode
Abre tu panel de WordPress y ve a Plugins » Añadir nuevo.
En la pantalla Añadir plugins, usa el cuadro de búsqueda para buscar WPCode. Luego, presiona el botón Instalar ahora para añadir el plugin a tu sitio.
El botón "Instalar ahora" cambiará a "Activar" después de que termine de instalarse. Presiona el botón Activar y estarás listo para usar WPCode para añadir fragmentos de código a tu sitio.
Después de eso, pasa el cursor sobre Fragmentos de código en el panel lateral de tu panel de WordPress y haz clic en + Añadir fragmento al expandirse el menú.
Luego, haz clic en Usar fragmento en Añadir tu código personalizado (Nuevo fragmento).
A continuación, deberás seleccionar el tipo de fragmento. Para ajustes de estilo, añadirás fragmentos personalizados de CSS. Así que adelante y selecciona Fragmento de CSS de las opciones disponibles.
Ahora, solo tendrás que copiar y pegar fragmentos de código en la ventana del editor de código para aplicar cambios de estilo a tus formularios. Compartiré ejemplos de códigos CSS comunes que puedes usar para cambiar el estilo de tu botón de envío.
Añadir colores degradados al botón de envío
Un degradado de color es bastante llamativo y generalmente indica un diseño de formulario muy profesional. Esto es genial cuando quieres transmitir tu profesionalismo y atención al detalle con colores degradados para los botones.
Aquí tienes el código para un fragmento que puedes usar para añadir un degradado lineal al color del botón de envío:
#wpforms-8 .wpforms-submit {
background: linear-gradient(45deg, #066aab, #0f88d4); /* Gradient colors */
}
En este código, "#wpforms-8" se refiere al ID del formulario de tu formulario específico. El formulario que estoy editando tiene el ID 8. Si el ID de tu formulario es diferente, digamos 17, puedes añadir el número correcto a esta parte del código (es decir, "#wpforms-17").
Puedes encontrar el ID del formulario de tu formulario buscando el número mencionado en el shortcode de un formulario específico. Esto se menciona en la columna Shortcode de tu formulario en la pantalla Resumen de formularios.
La segunda parte personalizable de este código son los valores para el degradado lineal. Estos tres valores dentro del paréntesis separados por comas son:
- Si buscas un efecto de desplazamiento más único, puedes aplicar el efecto de pulso con este código:
- Código hexadecimal del primer color
- Código hexadecimal del segundo color
Puedes cambiar estos valores como desees. Si necesitas encontrar los códigos hexadecimales exactos para los colores que necesitas, puedes usar este generador de colores HTML.
Una vez que hayas terminado de crear tu fragmento de CSS personalizado, haz clic en el botón Guardar fragmento y en el botón de alternancia junto a él para guardar y activar el fragmento.
Tu formulario ahora tendrá colores degradados aplicados a su botón de envío.
Añadir efectos de desplazamiento al botón de envío
Por defecto, WPForms añade un efecto de desplazamiento al botón de envío para indicar que es interactivo y proporcionar una respuesta visual inmediata a un visitante que intente hacer clic.
Pero si quieres añadir un efecto de desplazamiento al usar un degradado, puedes usar este código:
#wpforms-8 .wpforms-submit {
background: linear-gradient(45deg, #066aab, #0f88d4); /* Gradient colors */
transition: background 0.3s ease; /* Smooth transition on hover */
}
#wpforms-8 .wpforms-submit:hover {
background: linear-gradient(45deg, #0f88d4, #066aab); /* Changes gradient on hover */
}Este código también incluye un efecto de transición para asegurar que las interacciones con el botón se sientan pulidas. Generalmente, un efecto de transición de 0.3s – 0.4s proporciona el efecto más suave.
Si solo quieres cambiar el efecto de desplazamiento predeterminado en un botón con colores sólidos, puedes usar la configuración de Estilos de formulario de WPForms en el editor de bloques para establecer el color de fondo base que desees.
Luego, usa este código simplificado para cambiar los colores al pasar el ratón añadiendo el código hexadecimal de tu color deseado:
#wpforms-8 .wpforms-submit:hover {
background: #0f88d4; /* Solid color on hover */
transition: background 0.3s ease; /* Smooth transition */
}Asegúrate de hacer clic en Guardar fragmento y activarlo para aplicar los efectos de desplazamiento en el botón de envío de tu formulario.
Si buscas un efecto de desplazamiento más único, puedes aplicar el efecto de pulso con este código:
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(15, 136, 212, 0.4);
}
70% {
box-shadow: 0 0 0 20px rgba(15, 136, 212, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(15, 136, 212, 0);
}
}
#wpforms-8 .wpforms-submit:hover {
animation: pulse 1.5s infinite;
}
Esto añade un toque creativo con un botón que pulsa al pasar el ratón, invitando a los clics de los visitantes.
Cómo editar el texto del botón de envío en WPForms
El estilo es un aspecto que influye en los clics del botón de envío. El segundo componente importante es el texto del botón de envío. Estas pocas palabras pueden ser el punto de inflexión donde tus usuarios deciden si actuar o rebotar.
Un buen texto de botón inspira acción centrándose en un beneficio específico que tu visitante puede esperar al hacer clic. Evita simplemente usar un genérico "enviar". En su lugar, usa un lenguaje directo y orientado a la acción que apunte hacia un objetivo.
Aquí tienes algunos ejemplos de texto de botón de envío optimizado para la conversión:
- Obtener mi presupuesto gratuito
- Descargar mi eBook
- Únete a la comunidad
- Comenzar mi viaje
- Acceder a plantillas gratuitas
- Ahorra un 20% hoy
Pero, ¿cómo editas realmente el texto del botón de envío en WPForms? Es fácil. En el constructor de formularios, haz clic en el botón Enviar en la parte inferior del formulario para pasar instantáneamente a Ajustes » General.
Luego, simplemente escribe tu texto en el cuadro Texto del botón de envío. También puedes editar el texto que aparece mientras el formulario se está enviando en el cuadro Texto de procesamiento del botón de envío.
Y eso es todo.
Ahora que tienes una mejor idea sobre las mejores prácticas para los botones de envío y cómo puedes aplicarlas a tus formularios, es hora de optimizar el texto de tu botón para obtener más clics.
También lee: Cómo ver el historial de tu formulario en WordPress
Crear botones de envío eficaces para tus formularios no es una ciencia exacta. No tengas miedo de experimentar con diferentes estilos y textos de botón y monitoriza tus resultados (esto puede ser tan simple como probar A/B un formulario y medir la diferencia en las tasas de envío del formulario).
Preguntas frecuentes sobre las mejores prácticas para los botones de envío
El diseño del botón de envío y el texto del botón de envío surgen constantemente entre los usuarios de WordPress. Aquí están las preguntas que me hacen con más frecuencia sobre cómo conseguir más clics en un botón de formulario.
¿Cómo debería decir un botón de envío en lugar de "Enviar"?
Nombra lo que el visitante recibe. "Obtener mi presupuesto gratuito" o "Descargar mi eBook" le dice a alguien lo que sucede después de hacer clic, mientras que "Enviar" solo describe lo que hace el formulario. Mantenlo entre dos y cuatro palabras, y escríbelo en primera persona cuando sea apropiado, ya que "mi" supera consistentemente a "tu" en las copias de botones probadas.
¿Cómo centro el botón de envío en WPForms?
Puedes establecer la alineación del botón en las opciones de estilo del formulario, pero comprueba primero si quieres centrar el botón o todo el formulario. Para un formulario de una sola columna, un botón alineado a la izquierda se sitúa donde ya está la mirada del lector, por lo que centrarlo puede ir en tu contra. La alineación central es adecuada para formularios cortos e independientes, como el de registro a un boletín.
¿Qué tamaño debe tener un botón de envío?
WPForms te ofrece ajustes preestablecidos de tamaño pequeño, mediano y grande, y los tres están bien desde un punto de vista de diseño puro. Para la accesibilidad, apunta a un objetivo de al menos 24x24 píxeles CSS para cumplir con el Nivel AA de WCAG, o 44x44 píxeles para el Nivel AAA. El relleno cuenta para esa medida, por lo que el ajuste preestablecido mediano generalmente supera la barra AA por sí solo.
¿Puedo cambiar el color del botón de envío sin CSS?
Sí, y no necesitas una licencia de pago para hacerlo. El estilo de los formularios es gratuito para todos los usuarios de WPForms, por lo que puedes configurar el fondo, el borde y los colores del texto del botón desde el panel de estilo sin escribir ningún código. CSS solo es necesario para efectos que el panel no cubre, como degradados y animaciones de fotogramas clave.
A continuación, Estilo de las notificaciones por correo electrónico de WPForms
Estilizar formularios con WPForms es un proceso rápido y sin esfuerzo, pero esta flexibilidad de personalización también se extiende a tus notificaciones por correo electrónico.
Con las notificaciones dirigidas a los clientes, tienes una gran oportunidad de incorporar tu marca a las notificaciones para añadir una apariencia más profesional en la que tus clientes puedan confiar.
Consulta nuestra guía sobre cómo personalizar las notificaciones por correo electrónico de los formularios que te guía a través de la forma más sencilla de estilizar tus notificaciones.
Crea tu formulario de WordPress ahora
¿Listo para crear tu formulario? Empieza hoy mismo con el plugin de creación de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.
Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.
