Un formulario de WordPress simple y tosco puede hacer que incluso el sitio web mejor diseñado se sienta incompleto y se vea completamente fuera de lugar. ¿Lo peor? Los visitantes podrían dudar en completarlo si no coincide con el resto de su sitio.
A lo largo de nuestra experiencia administrando un blog de WordPress, hemos aprendido que los formularios bien diseñados y con marca pueden marcar una gran diferencia.
De hecho, cuando adaptamos nuestros formularios a los colores y el diseño de nuestro sitio, vimos un gran aumento en las presentaciones de formularios.
En esta guía, te mostraremos dos maneras sencillas pero potentes de personalizar y estilizar tus formularios de WordPress, para que no solo se vean geniales, sino que también funcionen mejor. 🚀
¿Por qué personalizar y estilizar tus formularios de WordPress?
Cuando agregas un formulario a tu sitio web de WordPress usando un plugin, notarás que su diseño suele ser simple y de apariencia básica.
Por ejemplo, si agregas un formulario de registro a tu sitio web usando un plugin de formulario de registro de usuarios, verás que su diseño es un poco aburrido. Esto puede no captar la atención de tu visitante e incluso disuadirlos de completar el formulario.
Personalizar tus formularios puede hacerlos más atractivos al adaptarlos a tu tema de WordPress y a tu marca.
Esto puede generar más conversiones porque los formularios de WordPress estilizados son más fáciles de navegar y pueden animar a más usuarios a completarlos.
Los formularios estilizados también pueden aumentar el conocimiento de tu marca entre los usuarios. Por ejemplo, puedes usar el logo de tu sitio web y los colores distintivos de tu empresa para hacer que tu formulario sea más memorable y efectivo.
Dicho esto, te mostraremos cómo personalizar y estilizar fácilmente tus formularios de WordPress, paso a paso. Cubriremos dos métodos en esta publicación, y puedes usar los enlaces rápidos a continuación para saltar al que desees usar:
- Método 1: Cómo personalizar y estilizar formularios de WordPress con WPForms (Método sin código)
- Método 2: Cómo estilizar formularios de WordPress con CSS (Personalización avanzada)
- Consejo extra 🧑💻: Cómo crear páginas web personalizadas fácilmente
¡Empecemos!
Método 1: Cómo personalizar y estilizar formularios de WordPress con WPForms (Método sin código)
Puedes personalizar y estilizar fácilmente tus formularios de WordPress usando WPForms. Es el mejor plugin de formularios de contacto de WordPress del mercado, utilizado por más de 6 millones de sitios web.
Nosotros mismos usamos WPForms para muchos tipos de formularios, y puedes obtener más información sobre el plugin en nuestra detallada reseña de WPForms.
WPForms viene con un constructor de arrastrar y soltar que hace que sea súper fácil crear cualquier tipo de formulario. Incluso tiene una gran biblioteca de más de 2000 temas predefinidos y opciones de personalización integradas para tu formulario que no requieren ningún código.
También cuenta con herramientas de IA para ayudarte a crear formularios personalizados desde cero usando una indicación simple y generar opciones múltiples para campos como desplegables, botones de radio o casillas de verificación.
Primero, necesitas instalar y activar el plugin WPForms. Para obtener instrucciones detalladas, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
📝 Nota: WPForms también tiene una versión gratuita que puedes usar para este tutorial. Sin embargo, utilizaremos el plugin premium porque tiene más configuraciones y opciones.
Al activarlo, visita la página WPForms » Configuración desde la barra lateral de administración de WordPress para ingresar tu clave de licencia.
Puedes encontrar esta información en tu cuenta en el sitio web de WPForms.
Una vez que hayas hecho eso, dirígete a la pantalla WPForms » Añadir nuevo desde el panel de control de WordPress.
Esto te llevará a la página ‘Seleccionar una plantilla’, donde puedes comenzar escribiendo un nombre para tu formulario. Después de eso, puedes elegir cualquier plantilla de formulario que desees y hacer clic en el botón ‘Usar plantilla’ debajo de ella.
Para este tutorial, crearemos y agregaremos un formulario de contacto simple a nuestro sitio web.
Esto iniciará la plantilla en el constructor de formularios de WPForms, donde verás una vista previa del formulario a la derecha y los campos del formulario en la columna izquierda.
Desde aquí, puedes arrastrar y soltar cualquier campo de formulario de tu elección al formulario según tu gusto. También puedes reorganizar o eliminar campos.
Para obtener instrucciones detalladas, consulta nuestro tutorial sobre cómo crear un formulario de contacto en WordPress.
Una vez que hayas terminado con tu formulario, simplemente haz clic en el botón ‘Guardar’ en la parte superior para salir del constructor de formularios.
Después de eso, necesitas visitar la página de Configuración de WPForms desde el panel de WordPress y marcar la casilla ‘Usar marcado moderno’. Si no haces esto, la configuración de personalización de WPForms no estará disponible en el editor de bloques.
No olvides hacer clic en el botón ‘Guardar cambios’ para almacenar tu configuración.
A continuación, abre la página o publicación donde deseas agregar el formulario que acabas de crear.
Desde aquí, debes hacer clic en el botón ‘+’ para agregar un bloque en la esquina superior izquierda para abrir el menú de bloques y agregar el bloque WPForms.
Una vez que hayas hecho eso, simplemente selecciona el formulario que deseas agregar a tu sitio desde el menú desplegable dentro del propio bloque.
Ahora que has agregado el formulario, es hora de personalizarlo y darle estilo.
Para hacer esto, debes abrir el panel de bloques en el lado derecho de la pantalla y desplazarte hacia abajo hasta la sección ‘Temas’.
Desde aquí, puedes elegir entre una biblioteca de más de 40 temas prediseñados para darle a tu formulario un aspecto hermoso al instante.
A continuación, puedes desplazarte hacia abajo hasta la sección ‘Estilos de campo’ para personalizar aún más tu formulario.
Puedes seleccionar el tamaño de los campos de tu formulario desde el menú desplegable e incluso establecer el tamaño y el radio de sus bordes.
A continuación, puedes cambiar el color de fondo, texto y borde de los campos del formulario utilizando la herramienta de selección de color.
Aquí, puedes usar los colores distintivos de tu marca u otros colores que se utilicen en el resto de tu blog de WordPress para crear un formulario visualmente atractivo.
Una vez que hayas hecho eso, desplázate hacia abajo hasta la sección 'Estilos de etiqueta', donde puedes seleccionar el tamaño de fuente de las etiquetas desde el menú desplegable.
Después de eso, también puedes cambiar el color de fuente de las etiquetas de los campos, subetiquetas y mensajes de error que se mostrarán en tu formulario.
Para personalizar el botón en tu formulario, desplázate hacia abajo hasta la sección 'Estilos del botón' y selecciona su tamaño desde el menú desplegable.
También puedes establecer un radio de borde y cambiar el color de fondo y texto del botón de envío del formulario.
Una vez que hayas terminado de personalizar el formulario, simplemente haz clic en el botón 'Actualizar' o 'Publicar' en la parte superior para guardar tu configuración.
Ahora, puedes visitar tu sitio de WordPress para ver el formulario estilizado en acción.
Método 2: Cómo estilizar formularios de WordPress con CSS (Personalización avanzada)
Si no quieres usar las opciones de personalización que ofrece WPForms o quieres aplicar personalizaciones diferentes con CSS, también puedes usar un fragmento de CSS personalizado.
Para hacer esto, primero, tendrás que crear un formulario usando WPForms, que es el constructor de formularios número 1 del mercado.
Utiliza un constructor de arrastrar y soltar y viene con más de 2,000 plantillas para ayudarte a crear formularios rápidamente, incluyendo formularios de contacto, formularios de carga de archivos, formularios de registro, formularios de RSVP, ¡y mucho más!
Para obtener instrucciones detalladas, puedes ver nuestro tutorial sobre cómo crear un formulario de contacto en WordPress o ver el método 1.
Una vez que hayas creado un formulario, es hora de personalizarlo usando WPCode. Es el mejor plugin de fragmentos de código de WordPress del mercado, que ofrece la forma más fácil y segura de agregar código CSS para estilizar tu formulario de WordPress.
Algunos de nuestros sitios web de negocios utilizan WPCode para agregar y administrar fragmentos de código personalizados, y ha estado funcionando excepcionalmente bien. Consulta nuestra reseña completa de WPCode para obtener detalles sobre la herramienta.
Primero, necesitarás instalar y activar el plugin WPCode. Para obtener instrucciones detalladas, te recomendamos consultar nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.
📝 Nota: WPCode tiene una versión gratuita que puedes usar para este tutorial. Sin embargo, nosotros utilizaremos el plan premium.
Después de la activación, visita la página Fragmentos de código » + Añadir fragmento desde el panel de WordPress.
Una vez que estés allí, simplemente haz clic en el botón ‘Usar fragmento’ debajo de la opción ‘Añade tu código personalizado (Nuevo fragmento)’.
Esto te llevará a la página ‘Crear fragmento personalizado’, donde puedes empezar escribiendo un nombre para tu fragmento de código.
Después de eso, selecciona la opción ‘Fragmento CSS’ en el menú desplegable de la esquina derecha de la pantalla.
A continuación, copia y pega el siguiente código en el cuadro ‘Vista previa del código’:
#wpforms-0000 .wpforms-form {
background-color: #ADD8E6 !important;
font-family: 'Arial', sans-serif !important;
padding: 20px 15px !important;
border: 3px solid #666 !important;
border-radius: 20px !important;
}
Una vez que hayas hecho eso, tendrás que reemplazar el shortcode predeterminado en la parte superior con el shortcode del formulario que deseas personalizar.
Para hacer esto, visita la página WPForms » Todos los formularios desde el panel de WordPress y copia el número de ID de WPForms del formulario que deseas estilizar.
Después de eso, pega el número de ID del formulario junto a la línea wpforms- en el código. Ahora, todo el código se ejecutará solo en este formulario específico.
A continuación, puedes cambiar fácilmente el código hexadecimal para el color de fondo, añadir una familia de fuentes de tu elección y configurar el relleno y los radios de borde del formulario cambiando el fragmento de código.
Una vez que hayas hecho eso, desplázate hacia abajo hasta la sección ‘Inserción’ y selecciona el modo ‘Inserción automática’.
El código se ejecutará automáticamente en tu sitio al activarlo.
Finalmente, desplázate hacia arriba en la página y activa el interruptor a 'Activo'.
Después de eso, haz clic en el botón 'Guardar fragmento' para almacenar tu configuración.
Ahora, el formulario de WordPress se personalizará automáticamente según el fragmento CSS, y puedes ir a verlo.
Sin embargo, si aún no has agregado el formulario a tu sitio web, simplemente abre una página o entrada en el editor de bloques.
Una vez que estés allí, haz clic en el botón '+' en la esquina superior izquierda para abrir el menú de bloques y agregar el bloque WPForms.
Después de eso, selecciona el formulario que estilizado usando el fragmento CSS del menú desplegable en el propio bloque.
Finalmente, haz clic en el botón ‘Actualizar’ o ‘Publicar’ para guardar tu configuración.
Ahora, puedes visitar tu sitio de WordPress para ver el formulario personalizado en acción.
Consejo extra 🧑💻: Cómo crear páginas web personalizadas fácilmente
Estilizar formularios de WordPress es solo una forma de hacer que tu sitio sea más atractivo y visualmente interesante. También puedes diseñar tus propias páginas web completamente personalizadas usando SeedProd.
Es el mejor plugin constructor de páginas de WordPress del mercado. Te permite crear páginas atractivas sin usar ningún código.
Algunas de nuestras marcas asociadas han construido sus sitios web completos usando SeedProd. ¡Es un constructor potente de arrastrar y soltar que va más allá de las simples páginas de destino! Obtén más información sobre la herramienta en nuestra reseña completa de SeedProd.
SeedProd también tiene plantillas y kits de sitio prefabricados, opciones de personalización sencillas, paletas de colores y bloques de página avanzados. Además, puedes incrustar fácilmente tus formularios de WPForms dentro del editor de SeedProd.
Para más detalles, puedes ver nuestro tutorial sobre cómo crear una página de destino en WordPress.
🌟 Consejo Pro: Incluso puedes usar SeedProd para crear una página de lista de espera viral, una página de ventas, una página de mantenimiento, una página de 'próximamente' y mucho más.
Esperamos que este artículo te haya ayudado a aprender cómo personalizar y dar estilo a tus formularios de WordPress. También te puede interesar nuestro tutorial sobre cómo agregar un campo de código de cupón a los formularios de WordPress y nuestra comparación de WPForms vs. Gravity Forms vs. Formidable Forms.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Mrteesurez
Parte de las razones por las que me gusta WPForms es el hecho de que es flexible y altamente personalizable con plantillas integradas o usando código CSS, uno solo necesita identificar el ID del formulario en particular que está personalizando.
Un formulario bien diseñado y personalizado atrae a los usuarios y posiciona tu formulario como profesional.
Gracias por la guía.
Soporte de WPBeginner
¡De nada!
Administrador
Jiří Vaněk
Gracias por el tutorial. Puse un formulario de contacto en el sitio web usando WPForms y lo dejé en su estado predeterminado. De hecho, ni siquiera pensé que pudiera personalizarlo de alguna manera. Gracias a este artículo, obtuve varias ideas sobre cómo hacerlo más atractivo gráficamente. Gracias
Ralph
Gracias por esta guía.
Ahora mi formulario de contacto se verá mejor y más profesional que el espacio en blanco blanco por defecto con líneas grises claras. ¡Esto mejorará el diseño de mi sitio web!
Soporte de WPBeginner
Glad we could help improve your site’s design
Administrador