Cómo agregar estilos CSS personalizados para WPForms

¿Te gustaría añadir estilos CSS personalizados a tu sitio? Este tutorial te ofrecerá múltiples opciones sobre cómo añadir estos fragmentos a tu sitio con instrucciones paso a paso para cada forma opcional que elijas.

Con esta útil guía, podrás elegir fácilmente la forma en que deseas añadir los fragmentos a tu sitio. Una vez que hayas seleccionado tu método de implementación, podrás empezar a explorar la documentación para desarrolladores para elegir qué fragmentos CSS te gustaría empezar a añadir a tu sitio.

Para echar un vistazo a la gran cantidad de fragmentos disponibles, explora nuestra documentación para desarrolladores.

Consulta nuestro videotutorial para una visión más práctica de cómo añadir fragmentos CSS personalizados a tu sitio.

Opciones de Implementación

CSS es una herramienta potente para estilizar tu sitio, así como tus formularios. Existen 3 enfoques principales para añadir CSS personalizado a tu sitio.

Usando el plugin WPCode (recomendado)

Usar el plugin WPCode es súper rápido y fácil para añadir fragmentos CSS a tu sitio.

Una de las muchas razones por las que recomendamos encarecidamente usar este plugin para añadir fragmentos personalizados a tu sitio es que tiene una comprobación integrada antes de guardar tu fragmento. Si se omite un punto y coma o se añade un corchete extra, el fragmento no se guardará. Esto evita que ocurran problemas en tu sitio debido a un fragmento CSS copiado y pegado incorrectamente. Y sí, incluso con la versión gratuita, recibirás esta auditoría adicional antes de que tu fragmento se active.

Una vez instalado el plugin, navega al menú Fragmentos de código desde el menú lateral izquierdo de tu panel de WordPress y selecciona + Añadir fragmento. A continuación, simplemente haz clic en Añadir tu código personalizado (Nuevo fragmento), y luego haz clic en el botón azul Usar fragmento para crear un nuevo fragmento CSS.

Cuando aparezca la pantalla de tu nuevo fragmento, dale un nombre que tenga sentido para ti, de modo que tú y los administradores de tu sitio entendáis su propósito. En el menú desplegable Tipo de código, selecciona CSS, ya que solo añadiremos CSS a este fragmento.

En la sección Vista previa del código, añade tu CSS. Aquí tienes un ejemplo para usar con el propósito de esta documentación.

/* write your CSS code here */
    ul#wpforms-999-field_27 li label, 
    ul#wpforms-999-field_26 li label {
    padding: 10px;
    transition: all ease 0.3s;
    background: linear-gradient(to right, #e27730 50%, #cd631d 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    color: white;
    }
     
    ul#wpforms-999-field_27 li.wpforms-selected label, 
    ul#wpforms-999-field_27 li label:hover, 
    ul#wpforms-999-field_26 li.wpforms-selected label, 
    ul#wpforms-999-field_26 li label:hover {
        cursor: pointer;
        border-radius: 2px;
        background-position: right top;
    }
     
    ul#wpforms-999-field_27 li input, 
    ul#wpforms-999-field_26 li input {
        display: none;
    }
     
    ul#wpforms-999-field_27 li, 
    ul#wpforms-999-field_26 li {
        float: left;
        width: auto;
        display: inline-block;
        padding: 10px 10px 10px 0!important;
    }

A continuación, verás la sección Inserción. Como vamos a añadir CSS, seleccionaremos Inserción automática para el Método de inserción y Encabezado de todo el sitio para la Ubicación.

Una vez que hayas agregado tu fragmento, haz clic en Guardar fragmento. Esto guardará el fragmento, pero no lo activará automáticamente. Una vez que hayas guardado inicialmente, notarás que el estado del fragmento se establece en Inactivo por defecto. Simplemente cambia el interruptor de Inactivo a Activo y haz clic en Actualizar para establecer el fragmento como Activo.

Usar CSS Hero

Si prefiere no tocar ningún código, WPForms tiene un tutorial completo sobre cómo usar CSS Hero. Para obtener más información al respecto, siga este tutorial.

Crear un tema hijo

Los temas hijos se recomiendan para un desarrollo más avanzado. Puedes averiguar cómo crear un tema hijo siguiendo este tutorial.

En cada tema hijo se encuentra el archivo requerido style.css, en este archivo es donde agregarías tu CSS personalizado.

Uso del personalizador de WordPress o del editor de sitios

WordPress incluye una herramienta integrada para añadir CSS personalizado a su tema o a cualquier plugin que tenga instalado, lo que la convierte en una opción popular. Dónde la encontrará depende del tipo de tema que esté utilizando.

Para obtener más información sobre el Personalizador de WordPress, consulta su documentación.

En los temas clásicos, navegue a Apariencia » Personalizar » CSS adicional.

En los temas de bloques, WordPress oculta el Personalizador. Vaya a Apariencia » Editor y abra Estilos para encontrar la opción CSS adicional. Si no la encuentra, la guía de WordPress para aplicar CSS personalizado muestra dónde se encuentra en su versión.

Solo recuerde guardar sus cambios después de añadir su CSS. Mientras el tema permanezca activo, su CSS personalizado se aplicará.

Enlaces adicionales

Para obtener información adicional sobre CSS personalizado para WPForms, consulta estos enlaces de referencia:

• Documentación de estilo para WPForms
• Una lista completa de documentación para estilizar WPForms usando CSS

Preguntas frecuentes

P: ¿Cómo me ayuda esto a agregar CSS personalizado para WPForms?

R: Este tutorial no es específicamente para CSS personalizado de WPForms, sino para cualquier CSS personalizado que desees agregar a tu sitio.

Simplemente encuentra qué opción de las anteriores te resulta más fácil para agregar cualquier fragmento de código, incluidos los fragmentos de código de WPForms mencionados en la sección Tutoriales y Fragmentos.