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.
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.
Consejos de optimización para el texto del botón de envío
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).
A continuación, Estilo de las notificaciones por correo electrónico de WPForms
Estilizar formularios con WPForms es un proceso rápido y sencillo. 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.
Nuestra guía sobre personalización de las notificaciones por correo electrónico del formulario 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.
