Personalizar WPForms con CSS

En este tutorial aprenderás a personalizar WPForms con CSS en WordPress para adaptar completamente el diseño de tus formularios. Veremos cómo modificar colores, bordes, botones y mensajes de confirmación mediante CSS personalizado.

Guía actualizada en 2026. Este tutorial sobre cómo personalizar WPForms con CSS ha sido revisado y optimizado para las versiones actuales de WordPress. Los ejemplos reflejan las mejores prácticas vigentes en 2026.

Personalizar WPForms con CSS es una de las formas más efectivas de integrar los formularios de WPForms en el diseño de tu sitio WordPress.

En esta guía aprenderás a:

• Identificar correctamente las clases de WPForms
• Aplicar estilos profesionales y accesibles
• Mejorar el diseño de campos, botones, mensajes y errores
• Usar presets listos para copiar
• Evitar problemas comunes en futuras actualizaciones

¿Cómo personalizar WPForms con CSS correctamente?

Existen tres opciones para añadir CSS a tu WordPress. Estas son, ordenadas por calidad:

1º – Tema hijo → style.css (RECOMENDADO)

La opción más profesional. Tu CSS será persistente y organizado.

Ruta: /wp-content/themes/tu-tema-hijo/style.css

2º – Personalizador de WordPress

Apariencia → Personalizar → CSS adicional.

Válido si no usas un tema hijo.

3º – Plugin de CSS personalizado

Ejemplo: Simple Custom CSS.

Útil si no puedes modificar archivos del tema.

Nos centraremos en la primera opción.

El formulario básico tal cual nos facilita WPForms es algo así:

Cómo inspeccionar y obtener las clases de WPForms

Para personalizar WPForms correctamente, necesitas usar el inspector del navegador (F12).

Elementos clave que WPForms utiliza:

Estructura HTML de WPForms

  <div class="wpforms-container">
    <form class="wpforms-form">
        <div class="wpforms-field wpforms-field-name">
            <label class="wpforms-field-label">Nombre</label>
            <input type="text" class="wpforms-field-medium">
        </div>

        <div class="wpforms-submit-container">
            <button class="wpforms-submit">Enviar</button>
        </div>
    </form>
  </div>

  Con esto ya puedes identificar dónde aplicar tus estilos.

CSS profesional para personalizar WPForms

Este preset mejora notablemente cualquier formulario WPForms, sin romper accesibilidad, respetando buenas prácticas y con transiciones suaves.

  /*  Campos del formulario  */
  .wpforms-form input[type="text"],
  .wpforms-form input[type="email"],
  .wpforms-form input[type="url"],
  .wpforms-form input[type="tel"],
  .wpforms-form input[type="number"],
  .wpforms-form textarea {
      width: 100%;
      border: 2px solid #1e73be;
      padding: 12px;
      font-size: 16px;
      border-radius: 6px;
      transition: border-color .25s ease, box-shadow .25s ease;
  }

  /*  Estado focus  */
  .wpforms-form input:focus,
  .wpforms-form textarea:focus {
      outline: none;
      border-color: #124a7a;
      box-shadow: 0 0 4px rgba(18, 74, 122, .4);
  }

  /*  Labels  */
  .wpforms-form .wpforms-field-label {
      font-weight: 600;
      margin-bottom: 6px;
      display: block;
      color: #333;
  }

  /*  Botón Enviar  */
  .wpforms-submit {
      background-color: #1e73be;
      color: #fff;
      padding: 14px 28px;
      border-radius: 6px;
      font-size: 17px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: background .25s ease, transform .2s ease;
  }

  .wpforms-submit:hover {
      background-color: #124a7a;
      transform: translateY(-1px);
  }

  /*  Mensaje de confirmación  */
  .wpforms-confirmation-container-full {
      padding: 20px;
      border-left: 4px solid #1e73be;
      background: #f0f8ff;
      font-size: 16px;
      border-radius: 4px;
  }

  /*  Errores  */
  .wpforms-error {
      color: #b50000;
      font-size: 14px;
      margin-top: 4px;
  }

Personalizaciones avanzadas de WPForms con CSS

Placeholders.

  .wpforms-form ::placeholder {
      color: #8a8a8a;
      opacity: 1;
  }

Mensajes de error del formulario

  .wpforms-field.wpforms-has-error input,
  .wpforms-field.wpforms-has-error textarea {
      border-color: #b50000;
      background: #fff5f5;
  }

Radio y checkboxes personalizados

  .wpforms-form input[type="checkbox"],
  .wpforms-form input[type="radio"] {
      accent-color: #1e73be;
  }

Modo oscuro

  body.dark-mode .wpforms-form input,
  body.dark-mode .wpforms-form textarea {
      background: #1d1d1d;
      color: white;
      border-color: #444;
  }

  body.dark-mode .wpforms-submit {
      background: #444;
  }

Buenas prácticas para mantener todo estable

Evita !important
Solo úsalo si WPForms aplica estilos inline difíciles de sobrescribir.

Usa clases globales, no selectores frágiles.
Evita estructuras profundas tipo:
.wpforms-container .wpforms-field .wpforms-field-large .otro-div input

Revisa el formulario en móvil.
WPForms es responsive, pero tus estilos pueden no serlo.

Si tu tema no está creado desde cero, trabaja siempre en un tema hijo.
Evitarás perder estilos en actualizaciones.

Ejemplos de personalización de WpForm

Cambiar los colores de los bordes

Para poder, por ejemplo, cambiar los colores de los bordes tanto de los inputs, texarea y botón de enviar tenemos que atacar directamente las clases que usa WPForms y darles nuestros propios estilos.

El procedimiento para ello es ver con el inspector de código cuales son esas clases y posteriormente llevarlas a nuestro fichero css y hacer las modificaciones que nos parezcan oportunas.

Ya en el inspector si nos vamos al primer input que nos aparece vemos que está dentro de una serie de clases donde se ataca a los distintos tipos de campos que hemos creado en nuestro formulario.

Date cuenta que se está buscado clases donde aparezca la propiedad ‘border’.

Si observas la parte derecha de la imagen inferior veras los estilos que se aplican a todas las cajas del formulario, puedes ir desmarcando algunas de ellas y veras los cambios directamente en el formulario.

Veras que tenemos la propiedad ‘border’ si desmarcamos esa en concreto observamos que el borde de las cajas de nuestro formulario desaparecen, copiamos todas esas clases y las llevamos a nuestro fichero de estilos.

Lo mejor a mi modo de entender es copiar todo y pegarlo directamente en nuestro fichero de estilos.

Podemos dejarlo tal cual están o bien analizar los tipos de campos que tiene nuestro formulario y eliminar las demás.

Podemos eliminar las demás clases que nos sobran o podemos dejarlas por si en un futuro metemos algún otro campo en el formulario.

Cambiar los colores de los bordes en el estado ‘fucus’

Podemos mejorar las cajas si añadimos el código siguiente.

Personalizando el botón de ‘Enviar’

Ahora tendremos que buscar la propiedad ‘submit’, vamos al botón de enviar nos colocamos encima y abrimos el inspector, vemos esto.

Procedemos como anteriormente y ya en nuestro fichero .css damos nuestros estilos personalizados.

Podemos mejorar este botón si añadimos el código siguiente.

Modificar el mensaje

Veamos como modificar los estilos del mensaje de texto que nos aparece una vez se ha enviado correctamente.

Si el proyecto que estas realizando lo has empezado desde cero ese mensaje de texto aparecerá pegado al margen izquierdo de la pantalla. Pues colócate encima y vamos a verlo con el inspector de elementos.

El procedimiento es el mismo, lo llevamos al .css y añadimos las propiedades que deseemos, por ejemplo estas.

Veremos esto.

Como has visto, personalizar WPForms con CSS permite adaptar completamente el diseño de los formularios a la estética de tu web WordPress. Desde cambios sencillos en colores y botones hasta personalizaciones más avanzadas, el uso de CSS ofrece un control total sobre la apariencia del formulario.

Puedes ampliar conocimientos visitando:

Documentación oficial de WPForms
Guía de estilos de WPForms
Personalización de campos individuales en WPForms
Documentación de CSS en MDN

También te puede interesar

• Aprende WP Query paso a paso
• Font Awesome en WordPress
• Introducción a Gutenberg

Salir del blog