Personalización de Estilos en Formularios de DataCrush: Guía Práctica.

Para poder personalizar los estilos del formulario de DataCrush que colocas en tu sitio web, debes tener en cuenta lo siguiente:

Cada elemento del formulario, así como los contenedores que los agrupan (como los fieldset), cuenta con identificadores y clases específicas que pueden utilizarse para personalizar y adaptar el diseño del formulario.

Esta personalización implica definir los estilos correspondientes en la hoja de estilos (CSS) del sitio web donde el formulario esté embebido.

Cuando desde el diseño del formulario se selecciona la opción “El formulario utilizará los estilos del website”, no se aplica la clase z-form-style, la cual define el estilo general predeterminado de los formularios de DataCrush.

Esto permite que el formulario adopte completamente los estilos de tu sitio web, pero de todas formas debes realizar ajustes para que el formulario tenga la apariencia que deseas.
 

Para personalizar su apariencia, será necesario definir los estilos correspondientes en la hoja de estilos de tu propio sitio, utilizando los selectores del formulario según tus necesidades.

Al momento de adaptar el formulario a los estilos del sitio web, recuerda colocar luego de cada estilo "!important" para que tenga mayor relevancia sobre los estelos generales.



Para personalizar el diseño y comportamiento del formulario, puedes utilizar los siguientes selectores CSS y/o JavaScript:

- Contenedor general del formulario
Para aplicar estilos globales a todo el bloque del formulario (fondo, márgenes, tipografías, ancho, etc.), podés utilizar la siguiente clase: .z-form-container
Este selector es ideal para encapsular estilos y evitar que afecten otros formularios del sitio.

- Elemento <form>
Si necesitas personalizar únicamente el formulario en sí (por ejemplo validaciones, comportamiento o estilos específicos), tenés dos opciones:
    •    Utilizar el ID del formulario, que podés obtener inspeccionando el HTML una vez publicado: #z-form-5909i3Yr...
    •    O seleccionar el formulario desde su contenedor:
Ambas opciones permiten aplicar reglas sin afectar otros formularios.

- Fieldsets por campo
Cada campo del formulario está contenido dentro de un fieldset con un ID propio, por ejemplo:
#fieldset_first_name
#fieldset_last_name

Estos selectores son útiles para:
    •    ajustar márgenes y espaciados,
    •    modificar la alineación de los campos,
    •    ocultar o mostrar campos específicos según el caso.
    
    
- Inputs y selects por campo
Cada input o selector tiene su propio ID, por ejemplo:
#first_name
#last_namee
#email

Estos IDs permiten aplicar:
    •    estilos puntuales por campo,
    •    validaciones o lógica personalizada mediante JavaScript,
    •    comportamientos dinámicos según el valor ingresado.
    
    
- Botón de envío
El botón de envío del formulario se puede personalizar utilizando el siguiente ID: #btnFormSend
Desde este selector es posible modificar:
    •    colores y estilos visuales,
    •    estados hover y disabled,
    •    indicadores de carga o envío en proceso.

Por ejemplo:

#fieldset_first_name

{width: 49% !important; float: left !important; text-align: left !important;}

#fieldset_last_name {width: 49% !important; float: right !important; text-align: left !important;}

#fieldset_email {width: 100% !important;}

#btnFormSend {color: #fff; background-color: #fe0000; border-color: #fe0000; text-transform: uppercase; font-weight: 300; position: relative; font-size: 16px !important; line-height: 30px; padding-top: 15px; padding-bottom: 15px; padding-right: 30px; padding-left: 30px; text-align: center !important; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; letter-spacing: 5px; font-family: "Lato", sans-serif !important;}

.z-control-button {text-align: center !important;}