Resumen de IA
¿Quieres cambiar el aspecto de los botones de tus formularios?
WPForms te permite personalizar los estilos de los botones utilizando controles de estilo integrados en el editor de bloques o mediante CSS.
¡Personaliza los estilos de los botones del formulario ahora!
En este artículo, te mostraremos cómo personalizar los estilos de los botones utilizando ambos métodos. ¡Mira cuál funciona para ti!
En este artículo
Cómo personalizar los estilos de los botones en WPForms con CSS
Antes de empezar, necesitarás instalar y activar el plugin WPForms en tu sitio. Además, necesitarás crear al menos un formulario. Consulta nuestro tutorial sobre cómo crear un formulario de contacto simple como ejemplo para empezar.
Opción 1: Realizar personalización en todo el sitio (CSS)
Personalizar los estilos de los botones de tu formulario es bastante fácil una vez que tienes el código CSS que quieres usar. Si quieres, puedes copiar y pegar uno de los ejemplos a continuación o incluso combinarlos.
El fragmento de código debe pegarse en tu sección CSS adicional en el panel Personalizar. Esto se puede hacer navegando a Apariencia » Personalizar » CSS adicional. Luego, simplemente haz clic en Guardar y publicar, y listo.
Un método aún más fácil es usar un plugin como WPCode, que te permite añadir diferentes tipos de fragmentos de código a tu sitio. En este caso, solo necesitarás pegar el código CSS para el estilo del botón haciendo clic en el botón Usar fragmento.
Ahora veamos algunas formas diferentes de estilizar los botones de tu formulario con CSS.
Cómo crear un botón con fondo transparente
¿Quieres crear un fondo transparente para el botón de WPForms? Los botones con fondo transparente, también conocidos como botones fantasma, son una tendencia popular de diseño web.
Se utiliza normalmente en formularios y llamadas a la acción que se colocan sobre imágenes de fondo amplias. Echa un vistazo a algunos ejemplos de botones transparentes en diferentes sitios web.
Ejemplo n.º 1: Botón de formulario transparente
Ejemplo n.º 2: Botón de llamada a la acción transparente
Para crear un botón con fondo transparente, todo lo que necesitas hacer es copiar el siguiente fragmento de código en tu sección CSS adicional.
div.wpforms-container-full .wpforms-form button[type=submit] {
color: #0099CC; /* Text color */
background-color: transparent; /* Remove background color */
border: 2px solid #0099CC; /* Border thickness, line style, and color */
border-radius: 5px; /* Adds curve to border corners */
text-transform: uppercase; /* Make letters uppercase */
}
Así es como se verá el botón:
Cómo crear un botón con un degradado de color
A diferencia de los botones fantasma, usar un botón degradado no es una tendencia nueva. Sin embargo, si esos botones de estilo degradado multicolor se adaptan mejor a tu sitio web, puedes seguir este tutorial.
Como se hace con CSS, puedes escalarlo fácilmente hacia arriba o hacia abajo sin perder resolución. Si buscas una herramienta para crear CSS para degradados, puedes usar el editor de degradados de ColorZilla.
En el CSS a continuación, hemos utilizado estilos específicos del navegador para garantizar que el degradado aparezca en la mayor cantidad posible de navegadores diferentes.
div.wpforms-container-full .wpforms-form button[type=submit] {
border-radius: 30px; /* Curve of border corners */
text-transform: uppercase; /* Make letters uppercase */
color: white; /* Text color */
background: #0099cc; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* For Firefox 3.6 to 15 */
background: linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* Standard syntax */
}
Así es como se verá el botón:
Cómo crear un botón con esquinas redondeadas
¿Quieres que los usuarios se fijen en las llamadas a la acción? Según algunas investigaciones, las esquinas redondeadas mejoran el procesamiento de la información y atraen nuestra mirada hacia el centro del elemento.
Si buscas atraer la atención de los usuarios, podrías probar las tasas de conversión de formularios creando un botón con esquinas redondeadas para tu formulario de WordPress.
div.wpforms-container-full .wpforms-form button[type=submit] {
background-color: #0099CC; /* Blue background color */
border-radius: 30px; /* Curve of border corners */
text-transform: uppercase; /* Make letters uppercase */
color: white; /* Text color */
}
Así es como se verá el botón:
Cómo reemplazar tu botón con una imagen
Usar un botón gráfico es probablemente la forma más fácil de personalizar el botón de tu formulario.
Puedes encontrar fácilmente varios botones gráficos para descargar y usar en sitios de fotos de stock. Luego, puedes reemplazar el botón de tu formulario por un botón gráfico.
Asegúrate de subir el gráfico del botón al cargador de medios yendo a Medios » Añadir nuevo. Luego, reemplaza la siguiente URL con la URL de tu imagen:
http://yoursite.com/your-image.jpg
div.wpforms-container-full .wpforms-form button[type=submit] {
background-image: url(http://yoursite.com/your-image.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
color: transparent; /* Hide the 'submit' text */
border: none; /* Remove the border */
}
Cómo crear un botón de varias líneas
Antes de enviar tu formulario, tus usuarios tendrán varias preguntas en mente. Para aumentar las conversiones, puedes responder a esas preguntas con el texto apropiado dentro o alrededor de tu botón.
Al crear un botón para tu formulario, míralo a través de los ojos de tus visitantes. Te ayuda a escribir el texto apropiado para tu botón orientado a la conversión.
En la mayoría de los casos, para incluir todos esos detalles en tu botón, tendrás que crear un botón de varias líneas. Aquí te explicamos cómo crear un botón de formulario de varias líneas en WPForms.
div.wpforms-container-full .wpforms-form button[type=submit]:after {
content: 'Second line text'; /* Text for second line of button */
display: block; /* Puts this text on its own line */
font-size: 10px;
margin-top: 5px; /* Add distance from first line of text */
font-weight: normal; /* Remove bold style */
}
Así es como se verá el botón:
Opción 2: Personalizar el estilo de un botón individualmente
¿Qué pasa si solo quieres que tu nuevo estilo se use en un solo formulario de WPForms, pero no en todos los formularios de tu sitio?
Si prefieres cambiar el estilo del botón de un formulario individual usando CSS, necesitas encontrar el ID único de tu formulario.
Primero, abre una página que contenga el formulario que deseas modificar. Lleva el ratón a cualquier campo del formulario, haz clic derecho y selecciona Inspeccionar elemento.
La pantalla del navegador se dividirá y verás el código fuente de la página. En el código fuente, necesitas localizar la línea de inicio del código del formulario.
Como puedes ver en la captura de pantalla anterior, el código de nuestro formulario de contacto comienza con la línea:
div class="wpforms-container wpforms-container-full" id="wpforms-14"
Usaremos este ID en nuestro CSS para dar estilo a nuestro formulario de contacto. Reemplazaremos .wpforms en nuestro primer fragmento de CSS con #wpforms-14.
El atributo id es un identificador único generado por WPForms para este formulario en particular, por lo que el estilo no se aplicará en ningún otro lugar.
Por ejemplo, puedes simplemente insertar el siguiente fragmento al principio del primer fragmento de código.
div#wpforms-14 {background-color: transparent; !important}
Para un método más directo de localizar tu ID de formulario, simplemente ve a Todos los formularios y localiza la columna Shortcode. Encontrarás el ID del formulario aquí en muy poco tiempo.
¡Personaliza los estilos de los botones del formulario ahora!
Cómo personalizar los estilos de los botones sin CSS
Antes de añadir CSS, considera si los controles de estilo integrados en WPForms te ayudarán a conseguir el estilo de botón que deseas más fácilmente.
Esta publicación sobre cómo dar estilo a formularios de contacto en WordPress explica más sobre las opciones de estilo de formularios sin código de WPForms dentro del editor de bloques de WordPress.
El proceso es simple. Abre un formulario y, en el editor de bloques, haz clic en el formulario para abrir opciones de estilo adicionales para el bloque WPForms.
Opciones de estilo para el bloque WPForms
Puedes cambiar el tema de color, los campos del formulario, las etiquetas, los botones y los estilos del contenedor y del fondo sin escribir ningún CSS en la configuración del bloque WPForms.
Acceder a la configuración de estilos de los botones
En Estilos de Botón, puedes cambiar el tamaño, color, borde, grosor del borde, radio del borde y estilo del borde de tus botones. Estas son las opciones entre las que puedes elegir.
- Tamaño: Esta opción indica el tamaño del botón. Puedes elegir entre Pequeño, Mediano y Grande.
- Borde: Con esta configuración, puedes dar a tus botones un borde que sea sólido, discontinuo o punteado.
- Grosor del Borde: Esto indica a tus botones cuán gruesos deben ser sus bordes. Puedes elegir una unidad diferente si los píxeles (px) no son lo que necesitas para tu diseño.
- Radio del Borde: Puedes cambiar cuán redondeadas son las esquinas de tus botones para hacerlos parecer más suaves o más agudos. Si bien los píxeles (px) son la unidad estándar, puedes cambiarla para que se adapte a las necesidades de tu diseño.
También puedes cambiar los colores de fondo y de texto de tu botón en el panel Colores más abajo.
¡Personaliza los estilos de los botones del formulario ahora!
Preguntas frecuentes sobre la personalización de estilos de botones con CSS
La personalización de los estilos de los botones es un tema de interés popular entre nuestros lectores. Aquí tienes respuestas a algunas preguntas comunes al respecto:
¿Cómo cambiar el estilo de un botón en CSS?
Para cambiar la apariencia de un botón usando CSS, puedes especificar estilos personalizados para propiedades como el color de fondo, el borde, el tamaño de fuente, el relleno y más. En WordPress, puedes pegar tus estilos CSS en CSS adicional en el Personalizador.
¿Cómo puedo hacer un formulario con botones personalizados?
Para crear un formulario con botones personalizados, considera usar un plugin de WordPress como WPForms. Proporciona herramientas de arrastrar y soltar para facilitar la creación de formularios.
Para estilos de botones personalizados, ve a la sección CSS adicional en WordPress e introduce tu código CSS, apuntando a los nombres de clase específicos del formulario o botón que WPForms proporciona.
¿Cómo personalizo mi botón de envío?
Para personalizar tu botón de envío en WPForms, edita el formulario, selecciona el "Botón de Envío" y modifica directamente la etiqueta del texto. Usa el Editor de Bloques o CSS Adicional para ajustar aún más los estilos del botón con colores, fuentes y tamaños personalizados.
A continuación, descubre cómo personalizar tu página de inicio de sesión en WordPress
Ahora que sabes cómo estilizar formularios de contacto con CSS, quizás quieras echar un vistazo a cómo crear una página de inicio de sesión personalizada para tu sitio. También tenemos algunas recopilaciones de plugins para ayudarte a elegir los mejores plugins a medida que tu sitio crece:
- Mejores plugins de SEO
- Mejores plugins de redes sociales
- Mejores plugins de copia de seguridad
- Los mejores plugins de registro de correo electrónico
- Los mejores plugins de TikTok
- Mejores Plugins SMTP
Crea tu formulario de WordPress ahora
¿Listo para crear tu formulario? Empieza hoy mismo con el plugin constructor 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.
¿Cómo puedo añadir una función de cantidad a un formulario básico de WP?
Tengo varios artículos de tienda que se pueden seleccionar usando una casilla de verificación. Necesito poder permitir que alguien elija cantidades de cada artículo y luego poder enviarlo por correo electrónico.
El artículo y el coste están en el mismo campo. Solo necesito poder añadir un botón +/- al lado de cada artículo.
¿Alguna idea de cómo puedo hacer esto fácilmente?
Gracias
Hola Paul,
Todavía no tenemos la capacidad de incluir cantidades de artículos de esta manera, ¡pero está en nuestro radar para añadirla en el futuro!
Si estás dispuesto a considerar una alternativa modificada, puedes aprovechar el campo "Elementos desplegables" para hacer lo que buscas de una manera ligeramente diferente. La demostración más sencilla es ver el vídeo corto aquí: https://cl.ly/3Y2f3o3q1C0M. Básicamente, creas un campo "Elementos desplegables" para cada producto y rellenas las opciones desplegables con varias cantidades y precios asociados. Esto te permite ofrecer tanto múltiples productos como varias cantidades de cada uno de ellos.
Lamento no poder ofrecer exactamente lo que buscas, ¡pero espero que esto ayude!
Si tienes alguna otra pregunta al respecto, no dudes en contactar con nuestro soporte 🙂
Todos estos son grandes ejemplos. Pero, ¿cómo se desactiva la sombra al pasar el ratón? Solo quiero un botón que sea texto puro en mayúsculas en negrita que diga "ENVIAR". El texto debería cambiar a gris al pasar el ratón y al activarse. Sin borde, fondo, sombra...
Hola Gary:
Nuestro botón de enviar no incluye ninguna sombra por defecto, así que si ves una, es probable que la esté añadiendo tu tema. Como todos los temas lo hacen de forma un poco diferente, necesitaríamos ver un formulario incrustado para ayudarte a eliminarla.
Para eliminar todos estos otros estilos, necesitarás unas cuantas líneas de CSS adicionales. Tenemos un tutorial aquí específicamente sobre cómo personalizar el botón de enviar, incluyendo los estilos al pasar el ratón. Los ejemplos que se muestran allí deberían guiarte a través de todo lo que necesitas para crear el aspecto personalizado que describes.
¡Espero que esto ayude! Si tienes alguna pregunta, ¡háznoslo saber! Damos soporte a todas las licencias de pago en nuestro canal de soporte privado y a WPForms Lite en nuestro foro 🙂
Intenté copiar y pegar el código para el estilo de botón transparente en mi Tema Hijo de Genesis y no tuvo ningún efecto en cambiar el aspecto de los botones. ¿Por qué crees que es?
Seguí las instrucciones: Apariencia>Personalizar>CSS adicional>Guardar.
¡Gracias!
Hola Toni:
Esa es una gran pregunta, y la respuesta puede variar mucho de un sitio a otro (incluso dentro del mismo tema). Te sugiero que empieces con nuestro tutorial Cómo solucionar problemas de CSS que no funciona, que repasa todos los problemas más comunes y cómo abordarlos.
Si lo intentas y sigues atascado, no dudes en contactar con nuestro soporte para que podamos ayudarte a solucionar el problema 🙂
No puedo averiguar por qué esto no funciona. Introduje el código en la sección de CSS personalizable, pero el botón se mantuvo igual.
Quiero hacerlo transparente como el primer ejemplo transparente que tienes arriba, pero simplemente no se registra.
También espero mover el formulario real más abajo en la página, pero eso tampoco parece funcionar.
Hola Jeremy:
¡Lamento los problemas! Algunos temas hacen que sea más difícil aplicar CSS personalizado, aunque normalmente añadir
!importantayuda. Aquí tienes un ejemplo sencillo para demostrar cómo añadir esto:div.wpforms-container-full .wpforms-form button[type=submit] { background-color: transparent !important; }Tenemos muchos más consejos sobre cómo hacer que CSS funcione en este tutorial de solución de problemas de CSS.
Si pruebas estas ideas de solución de problemas y sigues teniendo problemas, ¡háznoslo saber! Ofrecemos soporte a nuestros usuarios con licencia de pago aquí y a nuestros usuarios de Lite aquí.
¡Espero que eso ayude! 🙂
Solo quería dar las gracias por crear esta publicación… ¡Gran trabajo, me ha ayudado mucho!
Nancy,
Me alegra mucho ver que encuentras útil la publicación 🙂
Hola,
¿Cómo puedo cambiar la altura del botón de envío? Su altura es mayor que la de otros botones en WordPress y no sé qué CSS usar.
Gracias de antemano.
Hola Lewis,
La forma más fácil de personalizar la altura del botón de envío es ajustando su relleno (la distancia entre el texto del botón y el borde). Aquí tienes el CSS que necesitarías para hacerlo:
div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit] { padding-top: 10px; padding-bottom: 10px; }Estos están actualmente configurados en los valores predeterminados (10 píxeles arriba y abajo), pero puedes cambiarlos por los números que desees. Para mantener el texto centrado verticalmente, asegúrate de que el relleno superior e inferior tengan el mismo valor.
Y por si acaso te sirve, puedes encontrar nuestro tutorial completo sobre cómo personalizar el botón de envío aquí.
¡Espero que esto ayude! :)
Hola,
¿Cómo puedo cambiar el tamaño de las casillas de verificación para hacerlas más pequeñas?
Gracias de antemano.
Hola Lewis,
Lo siento, pero las casillas de verificación son generadas por el navegador y no podemos personalizar su tamaño. Si bien algunos temas proporcionan modificaciones de código extensas para estilizar las casillas de verificación de formas personalizadas, estas tienden a causar problemas (entran en conflicto en algunos navegadores, a veces incluso rompen algunas funcionalidades, etc.), por lo que generalmente se evita.
Hola @ JESS, he observado que eres la estrella aquí, actualmente tengo un problema con mi botón de envío, tan pronto como pasas el ratón por encima del botón de envío, el color de resaltado se extiende más allá del botón de envío y eso es muy feo y poco profesional, ¿cómo lo resuelvo? Sospecho que está tomando el color de mi tema, pero no sé cómo desactivarlo. Aquí tienes el enlace para una mejor comprensión. Simplemente pasa el ratón por encima del botón de envío y verás el efecto feo. [URL eliminado]
Hola Emmanuel,
¡Estaremos encantados de ayudarte! Cuando tengas un momento, envíanos un mensaje a soporte para que podamos ayudarte.
Si tienes una licencia de WPForms, tienes acceso a nuestro soporte por correo electrónico, así que por favor envía una solicitud de soporte.
De lo contrario, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite en WordPress.org.
Gracias 🙂
¿Tenéis planes de crear un paquete de complementos con varios estilos diferentes de botones de envío?
Hola Alex: Actualmente no tenemos planes para esto, pero he anotado la idea en nuestra lista de solicitudes de funciones. ¡Gracias por la sugerencia! 🙂
Hola
¿Solo me pregunto cómo podemos agregar esto a todos los campos del formulario? Tengo mi formulario sobre una imagen y me gustaría un borde blanco alrededor de una fuente blanca con fondo transparente. Gracias
Hola Jennifer,
Claro, los ejemplos anteriores son específicamente para botones, ¡pero también tenemos tutoriales para ayudarte a estilizar tus formularios en general! Te sugiero que comiences con nuestra guía para principiantes (que cubre cómo agregar un borde, etc.). Luego, si deseas un poco de inspiración adicional, puedes consultar nuestras ideas de estilo adicionales (CSS incluido).
¡Espero que esto ayude! :)
Hola
¿Es posible ocultar el botón de envío? He probado diferentes CSS pero no consigo que funcione. Quiero usar el formulario solo para información, así que no necesito el botón.
Gracias
Hola Nicole,
¡Estaremos encantados de ayudarte! Para ello, solo necesitamos que te pongas en contacto con nosotros con la URL de tu formulario (esto nos permitirá crear un fragmento de CSS para ti).
Si tienes una licencia de WPForms, tienes acceso a nuestro soporte por correo electrónico, así que por favor envía una solicitud de soporte.
De lo contrario, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite en WordPress.org.
Gracias 🙂
Hola, gracias por el artículo. Me gustaría cambiar la posición del botón de envío al lado derecho. El estándar está en el lado izquierdo. No encuentro ninguna descripción CSS sobre cómo hacer esto. ¿Podrías ayudarme, por favor?
Gracias.
Efkan
Hola Efkan,
Puedes reposicionar el botón de envío a la derecha usando el siguiente código CSS:
div.wpforms-container-full .wpforms-form .wpforms-submit-container { text-align: right !important; }Por si te sirve, aquí tienes un excelente tutorial de WPBeginner sobre cómo agregar CSS personalizado como este a tu sitio. 🙂
¡Hola!
Gracias por toda esta información útil. Sin embargo, todavía tengo una pregunta.
He cambiado con éxito el color de fondo del botón de envío, y también he agregado con éxito un color diferente al pasar el cursor y al enfocar, de modo que el color del botón cambia cuando los usuarios navegan hasta él.
Lo que no logro entender es cómo mantener el color al pasar el cursor en su lugar una vez que se ha hecho clic en el botón y se está enviando activamente. Una vez que un usuario aleja el cursor del botón, el color al pasar el cursor vuelve al color original, lo que puede hacer que parezca que el botón no se ha hecho clic (incluso si el texto dice "enviando...").
¿Es un problema del selector :active que me estoy perdiendo, o hay algo más que me estoy perdiendo?
Agradezco cualquier orientación que puedas ofrecer.
Hola Joe:
Es posible que necesitemos echar un vistazo al código en sí, así que cuando tengas la oportunidad, contacta con nuestro equipo de soporte y lo investigaremos más a fondo y te guiaremos. 🙂
Me gustaría cambiar el color de fondo de los mensajes de validación. ¿Alguna recomendación?
Hola Janine:
Puedes usar el siguiente fragmento de código para cambiar el color de fondo:
div.wpforms-container-full .wpforms-form label.wpforms-error { background-color: #FFFFFF !important; }Y por si te sirve de ayuda, aquí tienes un excelente tutorial de WPBeginner sobre cómo añadir CSS personalizado como este a tu sitio.
¡Espero que esto ayude! :)
Gracias Daisy
Probé ese código para cambiar el color de fondo del mensaje de validación y no ha cambiado nada. Sigue apareciendo en el color verde claro con el que vino originalmente. ¿Alguna sugerencia?
Hola Janine:
Si tienes un plugin de caché instalado en tu sitio (o si tu host tiene caché), querrás borrar/vaciarlo primero y volver a probar el código. Si el problema persiste y tienes una licencia de pago, contacta con nuestro equipo de soporte y ellos lo revisarán. 🙂
Hola Daisy:
Solo estoy haciendo seguimiento de mi consulta de 5 posts más arriba. Como se indicó, envié mi consulta al equipo de soporte hace unas tres semanas y no he recibido respuesta.
Encontré una especie de solución alternativa, pero todavía me interesa saber si es posible cambiar el color del botón de envío, y que permanezca cambiado, cuando se envían los formularios.
Gracias por la ayuda.
Hola Joe:
Lamento la confusión; parece que uno de los miembros de nuestro equipo de soporte respondió a tu correo electrónico el 25 de marzo, pero no estamos seguros de si lo recibiste (puede que se haya filtrado como spam/correo no deseado, así que valdría la pena revisarlo por si acaso).
Para resumir su respuesta, lamentablemente no tenemos forma de lograr lo que intentas hacer. El problema es que el texto "Enviando" se muestra con JavaScript y no cambia el CSS del botón, por lo que no hay nada bueno a lo que, en cierto sentido, "agarrarse" en términos de CSS personalizado. Podría ser posible lograrlo usando algo de JavaScript/jQuery creativo, pero no podemos ofrecer ningún tipo de soporte para este nivel de personalización. ¡Pido disculpas por las molestias!
Hola, ¿cómo puedo hacer que el botón de envío esté en línea con los cuadros de texto de Nombre y Correo electrónico? He puesto los cuadros de texto de Nombre y Correo electrónico en línea usando la opción de diseño.
Hola Mike:
Definitivamente te recomiendo que consultes nuestra guía que te muestra cómo mostrar tu formulario en una sola línea.
¡Espero que esto ayude! :)
¡Hola! ¿Cómo puedo hacer que mi botón de envío tenga una sola línea de texto?
Ahora el botón es enorme debido a dos filas de texto…
El formulario de contacto está hecho con inline como un formulario de una sola fila.
¡Hola Thomas!
Claro, puedes intentar personalizar el botón de envío con CSS personalizado. Tenemos un excelente tutorial sobre cómo hacerlo aquí.
¡Espero que esto ayude!
¡Que tengas un buen día! 🙂
¡Hola!
¿Qué sucede cuando queremos que el botón de envío de Wpforms se vea igual que el resto de los botones del tema?
Pensé que sería suficiente pegar la clase CSS del botón principal del tema en el campo "Clase CSS del botón de envío" del constructor de formularios.
Sin embargo, el botón no cambia de apariencia en absoluto... ¿Deberíamos introducir el nombre de la clase de alguna manera especial?
Hola Juanma.
¡Me disculpo por cualquier confusión!
Puedes lograr esto con CSS personalizado. Por favor, consulta este artículo en nuestro sitio para más detalles.
¡Espero que esto ayude!
¡Que tengas un buen día! 🙂
¡Hola equipo de soporte!
¿Qué código CSS debo usar para cambiar la ubicación del botón? Por ejemplo, me gustaría mover el botón de envío al centro del formulario y más abajo.
¡Gracias!
Hola Jacqueline.
Por favor, ten en cuenta que el código personalizado está fuera de nuestro alcance de soporte, no podemos ayudar con las personalizaciones o la implementación de código personalizado.
Sin embargo, he revisado nuestro sistema y veo que tenemos una sugerencia para lograr lo que buscas:
div.wpforms-container-full .wpforms-form .wpforms-submit-container {text-align: center !important;
}
Espero que esto ayude.
¡Que tengas un buen día! 🙂
¡Hola! ¿Cómo cambio el color de fondo del botón por el color que tiene el botón mientras está "enviando" después de presionar enviar? ¡¡Gracias!! (^_^)y
Hola Kate. ¡Estaremos encantados de ayudarte! Cuando tengas un momento, envíanos una línea de soporte para que podamos ayudarte.
Si tienes una licencia de WPForms, tienes acceso a nuestro soporte por correo electrónico, así que por favor envía un ticket de soporte. De lo contrario, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite en WordPress.org.
Gracias 🙂
¿Cómo puedo cambiar el color de fondo al pasar el ratón?
Hola Francesco. ¡Gran pregunta!
La forma más fácil de personalizar el color de fondo del botón de envío al pasar el ratón es agregando el código CSS como se muestra aquí en el tutorial
¡Espero que esto ayude!
Gracias y que tengas un buen día 🙂
Quizás sea simple, pero no lo encontré:
¿Por favor, cómo hacer que el botón “Enviar” sea una función para redirigir (enlazar) a otra página? ¿Entonces no enviar sino redirigir?
¡Hola Roman! ¡Buena pregunta!
Sí, puedes redirigir a otra página yendo a Creador de formularios > Configuración > Confirmación > selecciona ‘Tipo de confirmación’ como ‘Ir a URL (Redirigir)’ > y añade la URL de redirección de confirmación. Aquí tienes una excelente guía sobre esto.
¡Espero que esto ayude! Gracias y que tengas un buen día 🙂
Por favor, ayúdame. He intentado cambiar el botón de envío para que tenga un radio de 5px. ¿No sé si estoy introduciendo mal el código CSS?
¡Gracias!
Hola Jillian, estaremos encantados de ayudarte 🙂
Por si acaso ayuda, aquí tienes un tutorial excelente de WPBeginner sobre cómo añadir CSS personalizado como este a tu sitio.
Si tienes una licencia de WPForms, tienes acceso a nuestro soporte por correo electrónico, así que por favor envía un ticket de soporte. De esa manera podremos discutir más detalles e investigar esto más a fondo.
Gracias 🙂
Hola,
Aquí está el enlace a mi sitio web donde puse WPForms.
[URL Eliminado]
Quiero que los botones “Siguiente, Anterior, Enviar, etc.” tengan el mismo estilo que los botones de mi tema.
Por favor, ayúdenme
Hola Abubakar, gracias por contactarnos 🙂
Puedes personalizar los botones de envío en tu sitio consultando este artículo. Además, tenemos una guía excelente sobre cómo personalizar campos de formulario individuales.
Si necesitas ayuda, no dudes en contactar a nuestro equipo de soporte.
Gracias, y que tengas un buen día 🙂
¡Hola! ¡Gran artículo!
¿Cómo añado un icono al pasar el ratón sobre el botón de envío? He buscado literalmente por todas partes este código y no lo encuentro.
¡Gracias!
Hola JP, ¡gracias por contactarnos!
Para hacer lo que mencionas, puedes considerar usar FontAwesome, y una forma de añadir Font Awesome a tu sitio es usar el plugin ‘Better Font Awesome’
Una vez que hayas añadido Font Awesome a tu sitio, necesitaremos algo de CSS personalizado para añadir un icono al botón de envío, que he incluido aquí
Este fragmento con el código ‘\f1d8’ mostrará un icono de avión de papel, y puedes reemplazarlo con el código de tu icono preferido yendo a la galería de Font Awesome
¡Espero que esto ayude! 🙂
Hola. Uso la versión Lite. Cuando paso el ratón por encima, el botón se mueve ligeramente y parece tener un borde blanco. El CSS que estoy usando:
.wpforms-form button[type=submit] { border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); background-color: #024488 !important; color: #fff !important; } .wpforms-form button[type=submit]:hover { background-color: #d62598 !important; }
¿Cómo elimino el foco al pasar el ratón o el movimiento del botón? Gracias
Hola Kas: Los códigos CSS me parecen bien. Sospecho que se trata de un conflicto de estilos del tema que está causando el comportamiento extraño con los estilos al pasar el ratón por encima.
En este caso, por favor, contacta con nuestro soporte gratuito en el foro de soporte de WPForms Lite en WordPress.org.
Gracias 🙂
Hola:
Estoy buscando ayuda sobre cómo centrar mi botón de envío en mis formularios. No he visto ninguna forma de hacerlo, y el CSS normal de centrado no funciona.
¿Cómo soluciono esto? ¡Gracias!
Hola Seth: Usa este código CSS para centrar el botón de envío.
¡Espero que esto ayude! 🙂
Hola
Tengo un formulario con campos en línea, pero no acepta la configuración de relleno en el botón de envío, el texto del envío está desalineado.
Ya he probado las opciones anteriores:
padding-top, padding-bottom, y solo padding – pero ninguna funcionó…
¿Puedes ayudarme?
¡Gracias de antemano!
Hola Rodrigo: Parece que los estilos del tema están anulando los del formulario en este caso.
Si tienes una licencia de WPForms, tienes acceso a nuestro soporte por correo electrónico, así que por favor envía una solicitud de soporte. De lo contrario, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite en WordPress.org.
Gracias 🙂
Hola
Soy absolutamente novato en CSS, pero sé copiar y pegar 🙂 así que…
¿Cómo puedo añadir un botón de pago de PayPal 'Comprar ahora'?
Gracias por cualquier ayuda. Google no está siendo amable conmigo… 😉
Darren
¡Hola Robert! Pido disculpas por cualquier confusión. Los botones de PayPal los proporciona específicamente PayPal, con código que también proporcionan ellos. Puedes consultar su documentación aquí: https://www.paypal.com/buttons/
Por si acaso, nuestro plugin sí tiene la capacidad de procesar pagos con PayPal a través de uno de nuestros complementos. Está disponible con nuestra licencia de nivel Pro, y puedes encontrar más detalles aquí: https://wpforms.com/addons/paypal-standard-addon/
Espero que esto ayude a aclarar 🙂 Si tienes alguna otra pregunta al respecto, por favor contáctanos si tienes una suscripción activa. Si no la tienes, no dudes en enviarnos tus preguntas a nuestros foros de soporte.
¿Cómo puedo hacer que el botón de enviar parpadee para que la gente no lo pase por alto en un formulario largo?
Hola David. Para lograr lo que buscas, necesitarías usar animaciones y estilos de keyframes en tu botón. Sin embargo, esto no es algo en lo que podamos ayudarte desde nuestro lado.
Para más personalización, te sugerimos codeable o WPBuff.
¡Gracias y que tengas un buen día!
Estimado personal de WP Form:
Me gustaría saber cómo puedo incrustar un formulario en un botón de Elementor.
Ya he preparado el formulario de WP y he intentado usar la opción de incrustación de 'shortcode' en el formulario de WP. Sin embargo, cuando copio y pego el shortcode en la URL del botón usando Elementor, me redirige a una página en blanco.
¿Pueden ayudarme con eso sin necesidad de actualizar a un plan de pago (ni en WP Form ni en Elementor)?
Gracias
Hola Reni: Aquí tienes una guía completa para incrustar WPForms en una página de Elementor.
¡Espero que esto ayude! 🙂
Buenas tardes, mi pregunta es la siguiente:
¿Cómo puedo configurar los campos para que en vez de que me salga un rectángulo, en el que se escribe, salga una línea continua?
Gracias
Hola Marcos, Para asegurarnos de responder a tu pregunta de la manera más completa posible y evitar confusiones.
¿Te importaría contactarnos con detalles adicionales para que podamos ayudarte más en este caso?
Gracias.
¿Pueden cambiar el código de la URL de redirección de confirmación para que el enlace se abra en una nueva ventana?
Hola Allison, para lograr esto, necesitarás implementar algo de código personalizado, y aquí tienes nuestra guía para desarrolladores sobre el mismo.
Dado que lo que buscas requeriría algo de código personalizado, no podemos ofrecer soporte para el desarrollo personalizado que sería necesario. En caso de que te sirva, podrías considerar buscar un servicio como Codeable o Upwork para posibles opciones de desarrolladores.
¡Gracias!
¡Hola, personal de WP Forms! Me encanta WP Forms y actualmente estoy creando un formulario inteligente usando opciones de lógica condicional. Me encanta esto, por cierto. Para que mi formulario sea perfecto, ¿hay alguna forma de aplicar la misma lógica condicional al BOTÓN DE ENVIAR? En otras palabras, quiero que mi BOTÓN DE ENVIAR se oculte hasta que se marquen las casillas apropiadas (o se completen los campos requeridos). ¡Muchas gracias por cualquier ayuda!
Hola Christine,
Lamento informarte que actualmente no tenemos una función incorporada para ocultar/mostrar el botón de enviar de forma condicional. Sin embargo, esto se puede lograr utilizando un poco de código personalizado, como se muestra en esta guía para desarrolladores.
Espero que esto ayude 🙂
Hola,
¿Es posible añadir un icono al botón de enviar?
Gracias.
Hola Arnold – Puedes considerar usar el siguiente CSS para añadir un icono al botón de enviar:
.wpforms-form button[type=submit]:after { content: "\f345"!important; vertical-align: middle!important; font-size: 1em!important; transition: all 0.5s ease!important; opacity: 1; }¡Hola!
He notado que wpforms está reemplazando la variable ‘–theme-button-padding’ y estableciendo la suya propia:
.wpforms-submit { –theme-button-padding: 5px 35px; }
¿Puedo preguntar por qué estáis anulando la configuración de la propiedad personalizada del tema aquí, en lugar de usar la propiedad de relleno menos específica?
Gracias 🙂
Hola equipo,
Tengo un formulario de varias páginas y me gustaría colocar dos conjuntos de botones “siguiente y anterior” en el formulario. Uno en la parte superior y otro en la parte inferior de cada página, ¿es esto posible?
Gracias
Hola Grant, actualmente no tenemos esta función de forma predeterminada. Para obtener asesoramiento personalizado, puedes ponerte en contacto con nuestros Asesores de Confianza en el equipo de soporte si tienes una licencia de WPForms. Por favor, envía una solicitud de soporte y te responderán lo antes posible (normalmente en 1 día laborable). Si estás utilizando nuestra versión gratuita, dirígete al foro de soporte de WPForms Lite en WordPress.org y abre un nuevo hilo. ¡Gracias!