I moduli in Bitrix24 vengono creati e configurati nell’editor integrato. Se i parametri standard non sono sufficienti, l’aspetto del modulo può essere modificato con CSS. Ad esempio, puoi cambiare la dimensione del carattere, il colore del testo e dello sfondo, lo stile dei pulsanti, configurare il bordo e l’arrotondamento dei campi. Questo aiuta ad adattare il modulo al design del progetto e a renderlo più comodo per gli utenti.

Per modificare un modulo CRM, aggiungi gli stili CSS nella pagina in cui è inserito. Puoi farlo in due modi.

• modificare il file CSS collegato alla pagina,
• aprire la pagina in modalità di modifica del codice e aggiungere gli stili nel blocco <style> prima del codice del modulo.

Il testo tra i tag /* e */ è un commento che aiuta a orientarsi nel codice e non influisce sull’aspetto del modulo CRM. Puoi lasciarlo oppure eliminarlo.

A sinistra c’è il modulo standard di Bitrix24, a destra il modulo dopo la configurazione con CSS

Come adattare il modulo al design del progetto

Con CSS puoi adattare il modulo CRM al design del sito: configura colori, caratteri e stile dei campi e dei pulsanti in base allo stile generale della pagina. In questo modo il modulo apparirà coerente con il resto dell’interfaccia, senza contrasto visivo.

Larghezza del modulo. Configura la larghezza massima del modulo per una visualizzazione corretta su diversi dispositivi.

 /* Larghezza del modulo */ 
.b24-form-wrapper { 
    min-height: 250px !important; 
    max-width: 540px !important; 
} 

Carattere del modulo. Imposta un carattere uniforme per tutti gli elementi del modulo.

/* Carattere del modulo */ 
html, body,.form-container, .b24-form, .b24-form * { 
    font-family: 'Inter', sans-serif !important; 
}

Titolo e sottotitolo del modulo. Modifica la dimensione, il peso e il colore del carattere, l’interlinea e lo spazio dopo il titolo.

/* Titolo del modulo */ 
.b24-form-header-title { 
    font-size: 25px !important; /* Dimensione del carattere */ 
    line-height: 38px !important; /* Interlinea */ 
    margin-top: 60px !important; /* Spazio dopo il titolo */ 
    margin-bottom: 10px !important; /* Spazio dopo il titolo */ 
    font-weight: 700 !important; /* Peso del carattere */ 
}

	 /* Sottotitolo del modulo */ 
.b24-form-header-description { 
    font-size: 16px !important; /* Dimensione del carattere */ 
    line-height: 26px !important; /* Interlinea */ 
    color: #4b5563 !important; /* Colore del sottotitolo */ 
}

A sinistra c’è il modulo standard di Bitrix24, a destra il modulo dopo la configurazione con CSS

Aspetto del campo. Configura altezza, colore di sfondo e bordo. Il CSS modificherà i parametri di tutti i campi del modulo.

/* Parametri del campo */ 
.b24-form-control-string .b24-form-control, .b24-form-control-list 
.b24-form-control, 
.b24-form-control-text .b24-form-control, .b24-form-control-select .field-item { 
    height: 60px !important; /* Altezza del campo */ 
    background-color: #FAFBFC !important; /* Colore di sfondo */ 
    padding-left: 16px !important; /* Spazio a sinistra prima del testo */ 
    padding-right: 16px !important; /* Spazio a destra dopo il testo */ 
    border: 1px solid #c9d2dd !important; /* Spessore del bordo */ 
    border-color: #E2E2E2 !important; /* Colore del bordo */ 
    border-radius: 12px !important; /* Arrotondamento del bordo */ 
}

Nome del campo — modifica colore, dimensione e spaziatura dell’etichetta in modo che corrisponda allo stile del sito.

Per i diversi stati del campo — predefinito, attivo e compilato — puoi impostare parametri separati. Ad esempio, modificare dimensione o posizione del nome.

/* Nome del campo */ 
.b24-form-control-label { 
    font-size: 16px !important; /* Dimensione del nome del campo */ 
    line-height: 52px !important; /* Altezza del campo di inserimento */ 
    color: #525C69 !important; /* Colore del testo del nome */ 
    opacity: 1 !important; /* Trasparenza del testo */ 
    padding-left: 16px !important; /* Spazio a sinistra prima del nome */ 
    padding-right: 16px !important; /* Spazio a destra dopo il nome */ 
} 

	 /* Nome quando il campo è attivo o compilato */ 
.b24-form-control-select-label, .b24-form-control:focus + 
.b24-form-control-label, 
.b24-form-control-not-empty + .b24-form-control-label { 
    font-size: 13px !important; /* Dimensione del nome del campo */ 
    top: -10px !important; /* Posizione del nome del campo */ 
    color: #525C69 !important; /* Colore */ 
    background: transparent !important; /* oppure elimina semplicemente background-color */ 
    padding-left: 14px !important; /* Spazio a sinistra prima del nome */ 
    padding-right: 12px !important; /* Spazio a destra dopo il nome */ 
}

Testo nel campo. Indica la dimensione e il colore del carattere che l’utente inserirà.

/* Testo nel campo */ 
.b24-form-control { 
    font-size: 16px !important; /* Dimensione del carattere */ 
    color: #000000 !important; /* Colore del testo */ 
}

A sinistra c’è il modulo standard di Bitrix24, a destra il modulo dopo la configurazione con CSS

Campo elenco. Imposta la dimensione del carattere nell’elenco a discesa in modo che corrisponda allo stile degli altri campi del modulo. Configura gli elementi di controllo: la croce per rimuovere l’opzione e l’icona per aprire l’elenco.

/* Dimensione del carattere delle opzioni nell’elenco */ 
.b24-form-control-list-selector-item-title { 
    font-size: 16px !important; 
} 

	 /* Croce nel campo dell’elenco a discesa */ 
.b24-form-icon-remove::after, . b24-form-icon-remove::before { 
    height: 24px !important; /* Altezza */ 
    top: 4px !important; /* Posizione */ 
} 

	 /* Campo */ .b24-form-control-list 
.b24-form-icon-remove { 
    height: 60px !important; /* Altezza */ 
    right: 50px !important; /* Spostamento dal bordo destro */ 
} 

	 /* Icona di apertura elenco */ 
.b24-form-control-list . b24-form-control-container::after { 
    height: 12px !important; /* Altezza */ 
    width: 12px !important; /* Larghezza dell’elemento */ 
    top: 26px !important; /* Posizione */ 
    right: 20px !important; /* Spostamento dal bordo destro */ 
}

A sinistra c’è il modulo standard di Bitrix24, a destra il modulo dopo la configurazione con CSS

Consensi. Configura l’aspetto delle caselle di controllo e del testo del consenso in base al design del sito: modifica dimensioni, spaziatura e colore degli elementi.

/* Dimensione della casella di controllo */ 
.b24-form-control-agreement input[type="checkbox"], .b24-form-control-bool input[type="checkbox"] { 
    width: 20px; /* Larghezza della casella */ 
    height: 20px; /* Altezza della casella */ 
} 

	 /* Interlinea nel testo del consenso */ 
.b24-form-control-desc { 
    font-size: 14px !important; 
    line-height: 1.45 !important; 
} 

	 /* Dimensione del carattere nel testo del consenso */ .
b24-form-field-agreement .b24-form-field-agreement-link { 
    font-size: 14px !important; 
} 

	 /* Spazio dopo il consenso */ 
.b24-form-btn-container { 
    margin-top: 24px !important; 
}

Pulsanti. Modifica l’aspetto dei pulsanti: colore, carattere, dimensione e così via.

/* Parametri del pulsante */ 
.b24-form-btn { 
    background: #10B769 !important; /* Colore di sfondo del pulsante */ 
    color: #fff !important; /* Colore del testo del pulsante */ 
    font-weight: 400 !important;/* Peso del carattere */ 
    font-size: 16px !important; /* Dimensione del carattere del pulsante */ 
    height: 62px !important; /* Altezza del pulsante */ 
    border: 1px solid #10B769 !important; /* Bordo del pulsante */ 
    border-radius: 12px !important; /* Arrotondamento degli angoli */ 
}

A sinistra c’è il modulo standard di Bitrix24, a destra il modulo dopo la configurazione con CSS

Moduli multipagina. Configura la visualizzazione del numero e del nome della pagina, del campo Commento.

/* Numero della pagina */ 
.b24-form-progress-bar-counter { 
    font-size: 14px !important; /* Dimensione del carattere */ 
    top: 46% !important; /* Posizione */ 
} 

	 /* Nome della pagina */ 
.b24-form-progress-bar-title { 
    font-size: 18px !important; /* Dimensione del carattere */ 
} 

	 /* Campo “Commento” */ 
.b24-form-control-text .b24-form-control { 
    height: 190px !important; /* Altezza */ 
    min-height: 190px !important; /* Altezza minima */ 
    max-height: 190px !important; /* Altezza massima */ 
    padding: 34px 16px 16px !important; /* Posizione dell’etichetta in alto */ 
    box-sizing: border-box !important; /* Dimensione del campo */ 
    resize: none !important; /* Possibilità di modificare la dimensione del campo durante la compilazione */ 
} 

	 /* Etichetta nel campo di testo */ 
.b24-form-control-text .b24-form-control-label, .b24-form-control-text 
.b24-form-control:focus + .b24-form-control-label, 
.b24-form-control-text .b24-form-control-not-empty + .b24-form-control-label { 
    top: 12px !important; /* Posizione */ 
    left: 16px !important; /* Spazio a sinistra */ 
    right: 16px !important; /* Spazio a destra */ 
    transform: none !important; /* Modifica dell’elemento */ 
    font-size: 13px !important; /* Dimensione del carattere */ 
    line-height: 1.2 !important; /* Interlinea */ 
    opacity: 1 !important; /* Trasparenza */ 
    padding: 0 !important; /* Spazi interni */ 
}

Elementi attivi. Modifica colore e stile di campi, caselle di controllo e pulsanti al passaggio del mouse e al focus da tastiera, in modo che corrispondano allo stile del sito e al design generale del modulo.

/* Bordo del campo al passaggio del mouse o al focus da tastiera */ 
.b24-form-control-string .b24-form-control:focus:not([readonly]), 
.b24-form-control-list .b24-form-control:focus:not([readonly]), 
.b24-form-control-text .b24-form-control:focus:not([readonly]), 
.b24-form-control-select .field-item:focus:not([readonly]) { 
    border-color: #10B769 !important; /* Colore del bordo */ 
    outline: 3px solid #bcdcff !important; /* Spessore del bordo */ 
    outline-offset: 2px !important; 
} 

	 /* Bordo del pulsante “Invia” al focus da tastiera */ 
.b24-form-btn:focus-visible { 
    outline: 3px solid #1f2937 !important; /* Colore e spessore del bordo */ 
    outline-offset: 2px !important; 
} 

	 /* Bordo delle caselle di controllo al focus da tastiera */ 
.b24-form-control-agreement input[type="checkbox"]:focus-visible, 
.b24-form-control-bool input[type="checkbox"]:focus-visible { 
    outline: 3px solid #1f2937 !important; /* Colore e spessore del bordo */ 
    outline-offset: 2px !important; 
} 

	 /* Icona di chiusura nel consenso */ 
.b24-window-close { 
    background-color: #005def !important; /* Colore di sfondo */ 
} 

	 /* Icona di chiusura nel consenso */ 
.b24-window-close::after, .b24-window-close::before { 
    background-color: #000000 !important; /* Colore della croce */ 
}

A sinistra c’è il modulo standard di Bitrix24, a destra il modulo dopo la configurazione con CSS

Come migliorare l’accessibilità e la leggibilità del modulo

Vediamo la configurazione usando come esempio l’adattamento del modulo per persone con disabilità visive e difficoltà nella percezione del testo. Spiegheremo come modificare i parametri che influiscono sulla leggibilità e sulla percezione dell’interfaccia.

Carattere del modulo. Imposta un carattere uniforme per tutti gli elementi del modulo.

/* Carattere del modulo */ 
html, body,.form-container, .b24-form, .b24-form * { 
    font-family: 'Inter', sans-serif !important; 
}

Titolo e sottotitolo del modulo. Aumenta la dimensione del carattere, l’interlinea e lo spazio dopo il titolo per rendere il testo più leggibile.

/* Titolo del modulo */ 
.b24-form-header-title { 
    font-size: 38px !important; /* Dimensione del carattere */ 
    line-height: 60px !important; /* Interlinea */ 
    margin-top: 60px !important; /* Spazio dopo il titolo */ 
    margin-bottom: 20px !important; /* Spazio dopo il titolo */ 
}

	 /* Sottotitolo del modulo */ 
.b24-form-header-description { 
    font-size: 30px !important; /* Dimensione del carattere */ 
    line-height: 36px !important; /* Interlinea */ 
}

A sinistra c’è il modulo standard di Bitrix24, a destra il modulo dopo la configurazione con CSS

Aspetto del campo. Aumenta l’altezza, cambia il colore di sfondo in bianco e aggiungi un bordo nero. Questo permetterà di usare un carattere più grande e garantirà un contrasto netto degli elementi. Il CSS modificherà i parametri di tutti i campi del modulo.

/* Parametri del campo */ 
.b24-form-control-string .b24-form-control, .b24-form-control-list 
.b24-form-control, .b24-form-control-text .b24-form-control, .b24-form-control-select .field-item { 
    height: 100px !important; /* Altezza del campo */ 
    background-color: #fff !important; /* Colore di sfondo */ 
    padding-left: 20px !important; /* Spazio a sinistra prima del testo */ 
    padding-right: 20px !important; /* Spazio a destra dopo il testo */ 
    border: 2px solid #A8ADB4 !important; /* Spessore del bordo */ 
    border-color: #A8ADB4 !important; /* Colore del bordo */ 
    border-radius: 20px !important; /* Arrotondamento del bordo */ 
}

Nome del campo — configura i parametri che cambiano in base alle azioni dell’utente. Per impostazione predefinita usa un carattere grande di colore scuro: in questo modo il nome è più facile da leggere e rende chiaro quale informazione deve essere inserita.

Per un campo attivo o compilato, la dimensione del nome può essere ridotta in modo che non copra il testo dell’utente.

/* Nome del campo */ 
.b24-form-control-label { 
    font-size: 30px !important; /* Dimensione del nome del campo */ 
    line-height: 100px !important; /* Altezza del campo di inserimento */ 
    color: #000 !important; /* Colore del testo del nome */ 
    opacity: 1 !important; /* Trasparenza del testo */ 
    padding-left: 20px !important; /* Spazio a sinistra prima del nome */ 
    padding-right: 20px !important; /* Spazio a destra dopo il nome */ 
} 

	 /* Nome quando il campo è attivo o compilato */ 
.b24-form-control-select-label, .b24-form-control:focus + 
.b24-form-control-label, .b24-form-control-not-empty + .b24-form-control-label { 
    font-size: 20px !important; /* Dimensione del nome del campo */ 
    top: -24px !important; /* Posizione del nome del campo */ 
    padding-left: 20px !important; /* Spazio a sinistra prima del nome */ 
    padding-right: 20px !important; /* Spazio a destra dopo il nome */ 
}

Testo nel campo. Indica la dimensione e il colore del carattere che l’utente inserirà. Il testo deve essere grande e ben visibile sullo sfondo del campo.

/* Testo nel campo */ 
.b24-form-control { 
    font-size: 30px !important; /* Dimensione del carattere */ 
    color: #000000 !important; /* Colore del testo */ 
    padding-top: 24px !important; /* Spaziatura */ 
}

A sinistra c’è il modulo standard di Bitrix24, a destra il modulo dopo la configurazione con CSS

Campo elenco. Imposta la dimensione del carattere nell’elenco a discesa per facilitare la lettura e la scelta dell’opzione corretta. Ad esempio, il programma di un’escursione.

/* Dimensione del carattere delle opzioni nell’elenco */ 
.b24-form-control-list-selector-item-title { 
    font-size: 25px !important; 
} 

	 /* Croce nel campo dell’elenco a discesa */ 
.b24-form-icon-remove::after, .b24-form-icon-remove::before { 
    height: 24px !important; /* Altezza */ 
    top: 30px !important; /* Posizione */ 
} 

	 /* Campo */ 
.b24-form-control-list .b24-form-icon-remove { 
    height: 100px !important; /* Altezza */ 
    right: 50px !important; /* Spostamento dal bordo destro */ }
 

	 /* Icona di apertura elenco */ 
.b24-form-control-list .b24-form-control-container::after { 
    height: 12px !important; /* Altezza */ 
    width: 12px !important; /* Larghezza dell’elemento */ 
    top: 45px !important; /* Posizione */ 
    right: 20px !important; /* Spostamento dal bordo destro */ 
}

A sinistra c’è il campo elenco standard, a destra dopo la configurazione con CSS

Consensi. Aumenta la dimensione delle caselle di controllo in cui gli utenti esprimono la loro scelta. Ad esempio, per acconsentire al trattamento dei dati personali o confermare di aver letto le condizioni di consegna.

/* Dimensione della casella di controllo */ 
.b24-form-control-agreement input[type="checkbox"], .b24-form-control-bool 
input[type="checkbox"] { 
    width: 28px; /* Larghezza della casella */ 
    height: 28px; /* Altezza della casella */ 
} 

	 /* Interlinea nel testo del consenso */ 
.b24-form-control-desc { 
    font-size: 25px !important; 
} 

	 /* Dimensione del carattere nel testo del consenso */ 
.b24-form-field-agreement .b24-form-field-agreement-link { 
    font-size: 25px !important; 
} 

	 /* Spazio dopo il consenso */ 
.b24-form-btn-container { 
    margin-top: 40px !important; 
}

Pulsanti. Modifica l’aspetto dei pulsanti: colore, carattere, dimensione e così via. Rendili più contrastati per facilitare l’uso da parte degli utenti.

/* Parametri del pulsante */ 
.b24-form-btn { 
    background: #000000 !important; /* Colore di sfondo del pulsante */
    color: #fff !important; /* Colore del testo del pulsante */ 
    font-size: 32px !important; /* Dimensione del carattere del pulsante */ 
    height: 100px !important; /* Altezza del pulsante */ 
    border: 20px solid #000000 !important; /* Bordo del pulsante */ 
    border-radius: 20px !important; /* Arrotondamento degli angoli */ 
}

A sinistra c’è il modulo standard di Bitrix24, a destra il modulo dopo la configurazione con CSS

Moduli multipagina. Configura la visualizzazione del numero e del nome della pagina, del campo Commento.

/* Numero della pagina */ 
.b24-form-progress-bar-counter { 
    font-size: 20px !important; /* Dimensione del carattere */ 
    top: 46% !important; /* Posizione */ 
} 

	 /* Nome della pagina */ 
.b24-form-progress-bar-title { 
font-size: 28px !important; /* Dimensione del carattere */ 
} 

	 /* Campo “Commento” */ 
.b24-form-control-text .b24-form-control { 
    height: 300px !important; /* Altezza */ 
    min-height: 300px !important; /* Altezza minima */ 
    max-height: 300px !important; /* Altezza massima */ 
    padding: 44px 20px 20px !important; /* Posizione dell’etichetta in alto */ 
    box-sizing: border-box !important; /* Dimensione del campo */ 
    resize: none !important; /* Possibilità di modificare la dimensione del campo durante la compilazione */ 
} 

	 /* Etichetta nel campo di testo */ 
.b24-form-control-text .b24-form-control-label, .b24-form-control-text 
.b24-form-control:focus + .b24-form-control-label, 
.b24-form-control-text .b24-form-control-not-empty + .b24-form-control-label { 
    top: 16px !important; /* Posizione */ 
    left: 20px !important; /* Spazio a sinistra */ 
    right: 20px !important; /* Spazio a destra */ 
    transform: none !important; /* Modifica dell’elemento */ 
    font-size: 18px !important; /* Dimensione del carattere */ 
    line-height: 1.2 !important; /* Interlinea */ 
    opacity: 1 !important; /* Trasparenza */ 
    padding: 0 !important; /* Spazi interni */ 
}

Elementi attivi. Per aiutare l’utente a capire in quale punto del modulo si trova, rendi più evidenti gli elementi selezionati. Al passaggio del cursore o al passaggio da tastiera a un campo, una casella di controllo o alla croce nella finestra del consenso, questi elementi saranno evidenziati in modo più chiaro.

/* Bordo del campo al passaggio del mouse o al focus da tastiera */ 
.b24-form-control-string .b24-form-control:focus:not([readonly]), .b24-form-control-list .b24-form-control:focus:not([readonly]), 
.b24-form-control-text .b24-form-control:focus:not([readonly]), . b24-form-control-select .field-item:focus:not([readonly]) { 
    border-color: #000000 !important; /* Colore del bordo */ 
    outline: 5px solid #636363 !important; /* Spessore del bordo */ 
    outline-offset: 5px !important; 
} 

	 /* Bordo aggiuntivo del pulsante “Invia” al focus da tastiera */ 
.b24-form-btn:focus-visible { 
    outline: 5px solid #000 !important; /* Colore e spessore del bordo */ 
    outline-offset: 5px !important; 
} 

	 /* Bordo delle caselle di controllo al focus da tastiera */ 
.b24-form-control-agreement input[type="checkbox"]:focus-visible, 
.b24-form-control-bool input[type="checkbox"]:focus-visible { 
    outline: 5px solid #000 !important; /* Colore e spessore del bordo */ 
    outline-offset: 5px !important; 
} 

	 /* Icona di chiusura nel consenso */ 
.b24-window-close { 
    background-color: #000 !important; /* Colore di sfondo */ 
} 

	 /* Icona di chiusura nel consenso */ 
.b24-window-close::after, .b24-window-close::before { 
    background-color: #000 !important; /* Colore della croce */ 
}

A sinistra c’è il modulo standard di Bitrix24, a destra il modulo dopo la configurazione con CSS