Añadir clases CSS al input o al contenedor del campo

Esta guía explica cómo añadir clases CSS personalizadas a un campo específico del formulario (como un campo de texto o una casilla de verificación) o a su contenedor externo. Esta operación es útil para aplicar estilos gráficos personalizados definidos en tu tema.


1. Añadir Clases a un Campo del Formulario

Estas instrucciones se aplican a cualquier campo añadido mediante la sección "Campi" de tu formulario.

1.1 Acceder a las Configuraciones Avanzadas

Para visualizar los campos donde insertar las clases CSS, primero debes habilitar las configuraciones avanzadas para el campo seleccionado:

1. Accede a la sección "Campi" de tu formulario y selecciona el campo que deseas modificar.

2. Desplázate hasta el final de las configuraciones del campo.

3. Encuentra y marca la casilla denominada Mostra impostazioni avanzate.

  • Nota: Una vez marcada, aparecerán nuevos campos de texto, incluidos aquellos para las clases.

1.2 Insertar las Clases CSS

Después de habilitar las configuraciones avanzadas, verás dos campos dedicados a la inserción de clases:

1. Para añadir clases al elemento de entrada (ej. <input>, <select>, <textarea>):

  • Localiza el campo etiquetado Classi Input.
  • Inserta las clases CSS deseadas, separadas por un espacio (ej. mia-classe-rossa w-100).

2. Para añadir clases al contenedor del campo (el elemento que envuelve la entrada y la etiqueta):

  • Localiza el campo etiquetado Classi Contenitore.
  • Inserta las clases CSS deseadas, separadas por un espacio.

2. Añadir Clases al Botón de Envío (Submit)

El botón de envío se gestiona por separado, dentro de la sección "Pulsante di invio" de la pestaña Generali.

1. Ve a la pestaña Generali en la configuración del formulario.

2. Desplázate hasta la sección Pulsante di invio.

3. Para personalizar el botón (el elemento <button> o <input type="submit">):

  • Localiza el campo etiquetado Classi Input.
  • Inserta las clases CSS deseadas.

4. Para personalizar el contenedor del botón (el elemento <div> que lo envuelve):

  • Localiza el campo etiquetado Classi Contenitore.
  • Inserta las clases CSS deseadas.

Una vez completados los cambios, asegúrate de guardar el formulario. Las nuevas clases CSS se aplicarán cuando el formulario se muestre en el sitio.