I moduli propform hanno già un aspetto pulito così come sono — ma se li incorpori nel tuo sito web o li utilizzi con un dominio proprio, vorrai adattarli alla tua identità aziendale. Ecco le opzioni disponibili.
Tutte le impostazioni di design possono essere configurate su due livelli:
| Livello | Dove | Quando |
|---|---|---|
| A livello di account | Impostazioni account → Stile predefinito del modulo | Valori predefiniti, validi per tutti i moduli in cui è attiva l'opzione "Usa stile predefinito" |
| Per singolo modulo | Impostazioni modulo → Stile | Sovrascrivono il valore dell'account per quel singolo modulo |
> 💡 Raccomandazione: Gestisci logo, colori e font una sola volta nelle impostazioni dell'account. Modifica le impostazioni per singolo modulo solo in casi particolari (co-branding, promozioni speciali).
Viene visualizzato sopra i tuoi moduli.
Piccolo logo nella scheda del browser.
Tre opzioni per l'hosting delle immagini del logo e della favicon:
https://meinmaklerbüro.de/wp-content/uploads/logo.png)mcms.onoffice.de/...)> 💡 Suggerimento per il logo dall’e-mail: Se il tuo logo è già incorporato in un modello di email onOffice, puoi copiare l'indirizzo dell'immagine da lì e utilizzarlo in propform — nella maggior parte dei casi si tratta di un PNG trasparente.
Inserisci il codice esadecimale (ad es. #FF6B35 per l'arancione) o utilizza il selettore di colori.
> 💡 Suggerimento CI: scegli un colore di accento identico al colore primario del tuo sito web — in questo modo il modulo incorporato sembrerà parte integrante della pagina.
Il carattere tipografico viene selezionato nelle impostazioni dell'account/del modulo da una selezione di caratteri Google ospitati.
> 🔒 Ospitiamo tutti i Google Font sui nostri server — quando accedi al tuo modulo non viene stabilita alcuna connessione con Google. In questo modo eviti la problematica relativa al GDPR delle diffide sui Google Font.
Se il font della tua identità aziendale non è presente nella selezione:
Invece di un semplice colore di sfondo, puoi inserire un'immagine come sfondo — ad es. una suggestiva foto lifestyle per un modulo di acquisizione clienti.
Configurazione: Impostazioni account/modulo → Stile → Immagine di sfondo → Inserisci l'URL dell'immagine.
Nelle impostazioni del modulo → Stile → Tipo di design puoi scegliere l'aspetto dei pulsanti e dei campi di inserimento:
| Tipo di design | Aspetto | Adatto a |
|---|---|---|
Angolare (rounded-0) |
angoli netti a 90° | siti web tecnici / classici |
Arrotondato (rounded) |
leggera arrotondatura | siti web moderni (standard) |
Pillola (rounded-pill) |
completamente arrotondato | siti web amichevoli / giocosi |
> 💡 Scegli lo stile di design che si adatta allo stile del tuo sito web principale, in modo che i moduli incorporati sembrino una parte naturale di esso.
propform offre quattro diverse varianti di integrazione (integrazione JavaScript, Web Component, iFrame con altezza automatica, iFrame semplice) oltre a impostazioni aggiuntive come destinazione della pagina di ringraziamento, versione dello script e comportamento relativo al consenso sui cookie.
📖 Guida completa con tutte e quattro le varianti e le opzioni aggiuntive: Impostazioni del modulo → Integrazione iFrame
<script> esterni, ma l'iFrame viene lasciato passareform-id deve essere lo slug di sistema, non il percorso URL personalizzatoI moduli propform sono automaticamente responsive — campi, pulsanti e layout si adattano alla larghezza dello schermo.
<head>: <meta name="viewport" content="width=device-width, initial-scale=1.0"> (standard, ma a volte dimenticato nei template molto vecchi)100% (non in px)min-widthTrappola iPhone: con "Scatta foto" è possibile caricare solo 1 immagine. Per il caricamento di più foto è necessario selezionare "Libreria" — vedi Caricamento file non riuscito → iPhone-Multi-Foto.
## CSS personalizzato (in programma)
Attualmente non è possibile utilizzare un CSS personalizzato per ogni modulo — il design è limitato alle opzioni sopra indicate.
In programma: campo di inserimento per ogni modulo per CSS personalizzato e classi CSS, con cui potrai personalizzare ulteriormente gli elementi esistenti (ad es. effetti hover sui pulsanti, icone personalizzate nelle etichette, spaziatura personalizzata). Se ti interessa questa funzionalità e hai un caso d'uso concreto, scrivici brevemente — i casi d'uso ci aiutano a stabilire le priorità.
Nel frattempo: se hai assolutamente bisogno di CSS personalizzati (ad es. a causa di linee guida di branding molto specifiche), puoi risolverlo attorno all'iFrame nel CSS del tuo sito web — ad es. una cornice colorata, ombreggiature o un contenitore con padding.