Cómo personalizar y dar estilo a tus formularios de WordPress (2 métodos fáciles)

Un formulario de WordPress simple y tosco puede hacer que incluso el sitio web mejor diseñado se sienta incompleto y parezca 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?

Personalizar tus formularios de WordPress ayuda a que coincidan con tu marca, lo que genera confianza y puede aumentar significativamente tus tasas de conversión de formularios. Al estilizar tus formularios, los haces más atractivos visualmente y más fáciles de navegar para tus visitantes.

Por ejemplo, si agregas un formulario de registro a tu sitio web usando un plugin de formularios de registro de usuarios, notará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 con estilo son más fáciles de navegar y pueden animar a más usuarios a completarlos.

Los formularios con estilo también pueden aumentar el reconocimiento de tu marca entre los usuarios. Por ejemplo, puedes usar el logotipo de tu sitio web y los colores distintivos de tu empresa para hacer que tu formulario sea más memorable y efectivo.

Ahora, 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 ir al que deseas usar:

¡Empecemos!

Método 1: Cómo personalizar y estilizar formularios de WordPress con WPForms (método sin código)

WPForms es el mejor plugin de formularios de contacto de WordPress con un constructor de arrastrar y soltar. Ofrece más de 2000 temas predeterminados y opciones de personalización integradas para dar estilo a los formularios sin código, además de herramientas de IA para la creación de formularios.

Usamos WPForms en WPBeginner para formularios de contacto, migraciones de sitios web y nuestra encuesta anual. Para leer más sobre nuestra experiencia, consulta nuestra reseña completa de WPForms.

Paso 1. Instalar y activar el plugin WPForms

Primero, registrémonos para obtener una cuenta de WPForms.

En su sitio web, haz clic en el botón 'Obtener WPForms ahora', elige un plan y sigue las instrucciones en pantalla para completar el registro.

Ahora, necesitas instalar y activar el plugin WPForms.

En tu área de administración de WordPress, dirígete a Plugins » Agregar Plugin.

En la siguiente pantalla, puedes usar la barra de búsqueda para encontrar rápidamente el plugin de WPForms.

Haz clic en 'Instalar ahora' y luego en 'Activar' para habilitarlo en tu sitio de WordPress.

Para obtener instrucciones detalladas, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Si estás usando la versión Pro, visita la página WPForms » Ajustes en la barra lateral de administración de WordPress para ingresar tu clave de licencia tras la activación.

Puedes encontrar esta información en tu cuenta en el sitio web de WPForms.

A continuación, ve a WPForms » Ajustes en tu panel de administración y verifica que la casilla 'Usar marcado moderno' esté seleccionada.

Debes habilitar el Marcado Moderno para desbloquear la configuración de diseño avanzada y las opciones de personalización dentro del editor de bloques de WordPress.

No olvides hacer clic en el botón ‘Guardar cambios’ para almacenar tu configuración.

Paso 2. Crear tu formulario de WordPress

Desde aquí, dirígete a la pantalla WPForms » Agregar Nuevo desde el panel de administración de WordPress para crear tu formulario.

Esto te llevará a la página de ‘Configuración’, donde puedes empezar escribiendo un nombre para tu formulario.

Después de eso, puedes elegir la plantilla de formulario que desees, pasar el cursor sobre ella y hacer clic en el botón ‘Usar plantilla’ debajo de ella. Para este tutorial, crearemos y añadiremos 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.

Paso 3. Personalizar el diseño de tu formulario con los temas de WPForms

Ahora estás listo para agregar tu formulario al editor de bloques y personalizarlo. Hagamos clic en el botón 'Incrustar' dentro del constructor de formularios.

Esto abrirá el asistente de incrustación, donde puede elegir una de las siguientes opciones:

• Seleccionar una página existente: Elija una página en su sitio de WordPress y agregue el formulario usando el bloque WPForms.
• Crear una página nueva: Esto agrega automáticamente el formulario a una página nueva.

Para esta guía, elegiremos ‘Crear página nueva’.

A continuación, agreguemos un nombre para la página nueva, por ejemplo, ‘Contáctenos’.

Continúe y haga clic en ‘¡Vamos!’ cuando haya terminado aquí.

Esto abrirá el editor de páginas con su formulario ya incrustado.

Para más detalles, consulta nuestra guía sobre cómo incrustar formularios en WordPress.

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 con estilo en acción.

Método 2: Cómo estilizar formularios de WordPress con CSS (Personalización avanzada)

Si no deseas utilizar las opciones de personalización que ofrece WPForms o si deseas aplicar personalizaciones diferentes con CSS, también puedes usar un fragmento de CSS personalizado.

Paso 1. Crea tu formulario usando WPForms

Para empezar, necesitarás crear un formulario usando WPForms. Es el mejor plugin de formularios de contacto de WordPress con un constructor de arrastrar y soltar, que ofrece más de 2000 plantillas para ayudarte a crear rápidamente formularios de contacto, formularios de carga de archivos, formularios de registro y formularios de RSVP.

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 haya hecho eso, obtengamos el ID de su formulario; lo necesitará para su fragmento de código personalizado.

Para hacer esto, visite la página WPForms » Todos los formularios en el panel de WordPress y copie el número de ID de WPForms del formulario que desea estilizar.

Paso 2. Instala y activa WPCode

WPCode es el plugin de fragmentos de código de WordPress más seguro y fácil para agregar CSS personalizado para estilizar formularios. Cuenta con validación de código inteligente para prevenir errores y ofrece una biblioteca de fragmentos listos para usar para la personalización de WordPress.

Usamos WPCode en WPBeginner para agregar y administrar fragmentos de código personalizados en nuestros sitios web comerciales. Para leer más sobre nuestra experiencia, consulta nuestra reseña completa de WPCode.

Primero, puedes crear una cuenta de WPCode. En el sitio web de WPCode, haz clic en el botón ‘Obtener WPCode Ahora’, selecciona un plan y sigue las instrucciones en pantalla para registrarte.

Ahora, instalemos y activemos el plugin WPCode.

En tu panel de administración de WordPress, ve a Plugins » Añadir Plugin.

A continuación, puedes usar el cuadro de búsqueda para encontrar rápidamente el plugin WPCode.

Cuando lo veas, haz clic en el botón ‘Instalar ahora’ y ‘Activar’.

Para obtener instrucciones detalladas, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Paso 3. Agrega un fragmento de código personalizado para personalizar formularios de WordPress

Después de la activación, visita la página Fragmentos de código » + Añadir fragmento desde el panel de WordPress.

Luego, pasa el cursor sobre la opción ‘Agregar tu código personalizado (Nuevo fragmento)’ y haz clic en el botón ‘Usar fragmento’.

Verás entonces una ventana emergente que te pide que selecciones tu Tipo de código.

Elegiremos ‘Fragmento de CSS’.

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’. Las etiquetas !important le indican al navegador que priorice estos estilos sobre la configuración predeterminada de tu tema:

#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;
}

Así es como podría verse en tu pantalla:

A continuación, puedes cambiar el código hexadecimal, como #ADD8E6, para que coincida con el color específico de tu marca. Puedes encontrar estos códigos usando cualquier herramienta gratuita de selección de color en línea.

También puedes agregar una familia de fuentes de tu elección y configurar el relleno (espacio dentro del cuadro) y el radio del borde (esquinas redondeadas) 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 publicación 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 en una ventana de Incógnito o Privada para ver el formulario personalizado en acción, ya que el almacenamiento en caché del navegador a veces puede ocultar cambios recientes.

Consejo extra 🧑‍💻: Cómo crear páginas web personalizadas fácilmente

Puedes estilizar tus formularios de WordPress para hacer tu sitio más atractivo y visualmente interesante. También es posible diseñar tus propias páginas web completamente personalizadas usando SeedProd. Es el mejor plugin de creación de páginas de WordPress de arrastrar y soltar para crear páginas y temas de sitios web sin código.

Hemos probado exhaustivamente SeedProd para ver cómo se compara con otras soluciones. Para leer más sobre nuestra experiencia, consulta nuestra reseña completa de SeedProd.

SeedProd también tiene plantillas y kits de sitios pre-hechos, 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.

Preguntas frecuentes sobre la personalización y el estilo de formularios de WordPress

¿Todavía tienes preguntas? Aquí tienes algunas de las preguntas más frecuentes que recibimos de nuestros lectores, respondidas.

¿Qué puedo personalizar en un formulario de WordPress?

Puedes personalizar los campos, el diseño, los colores, las fuentes, las etiquetas, los mensajes de error y el botón de envío para que coincidan con el diseño de tu sitio.

¿Necesito conocimientos de codificación para estilizar formularios de WordPress?

No. Con excelentes plugins como WPForms, puedes personalizar y estilizar formularios usando configuraciones integradas, sin necesidad de código.

¿Puedo hacer que mis formularios coincidan con la marca de mi sitio web?

Sí. Puedes usar los colores, fuentes y espaciado de tu marca para que el formulario se integre de forma natural con tu tema de WordPress.

¿Cambiar el estilo de un formulario afectará su funcionamiento?

Los cambios visuales no afectarán la funcionalidad. Solo asegúrate de probar el formulario si cambias campos o reglas obligatorias.

¿Puedo cambiar el estilo del formulario más tarde?

Absolutamente. Puedes actualizar el diseño en cualquier momento sin tener que reconstruir el formulario desde cero.

Más guías para usar formularios en WordPress

Esperamos que este artículo te haya ayudado a aprender cómo personalizar y estilizar tus formularios de WordPress.

También te puede interesar ver nuestros tutoriales sobre:

• Cómo subir archivos desde formularios de WordPress a Google Drive
• Cómo permitir a los usuarios tomar fotos y videos en vivo en formularios de WordPress
• Consejos para hacer tus formularios de WordPress más interactivos
• Cómo automatizar formularios de WordPress con n8n para ahorrar horas de trabajo manual
• Las mejores alternativas a Google Forms (mejores funciones + gratis)

Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.