Come modificare gli stili con il css in un Google Form

"poter avere due o più campi sulla stessa riga per risparmiare spazio"- Google Docs Editors Community

Ti hanno chiesto di adattare un modulo al design della tua organizzazione, e le opzioni del tema di Google Forms arrivano fino a un certo punto. Puoi cambiare l'immagine di intestazione, i colori e i caratteri, ma le domande restano su una sola colonna, e la barra del titolo e la spaziatura restano come le ha impostate Google. Incorporare il modulo nel tuo sito web non aiuta, perché il CSS del sito non arriva dentro l'iframe. Con Formfacade puoi passare il modulo a due colonne, impostarne i colori e aggiungere il tuo CSS per il resto.

Ecco tre modi per cambiare l'aspetto di un Google Form, e dove ognuno non basta.

L'esigenza:

Durante la crisi del COVID-19, il Centre of Small & Medium Enterprises organizza regolarmente corsi di formazione online per preparare le PMI e i loro dipendenti alle misure di sicurezza alla riapertura delle attività. Il centro voleva creare un modulo di iscrizione ai corsi pulito e semplice, come questo.
Il modulo di esempio per l'iscrizione ai corsi che il centro voleva, con sfondo verde acqua e due colonne

1. Personalizza il tema in Google Forms

Google Forms ti lascia scegliere un'immagine di intestazione, un colore del tema, un colore di sfondo e i caratteri. Dove non basta: le domande restano su una sola colonna, e non puoi cambiare la barra del titolo, la spaziatura o il pulsante da solo. Se incorpori il modulo nel tuo sito web, il CSS del sito non arriva dentro l'iframe.
Un Google Form chiamato Training Registration con First Name, Last Name, Email Address, Occupation e Business Name

2. Crea il tuo modulo HTML

Scrivi un modulo HTML sul tuo sito web che invia ogni risposta al tuo Google Form, usando l'entry ID di ogni domanda.
Dove non basta: devi trovare ogni entry ID, aggiornare il codice ogni volta che il modulo cambia e gestire gli errori da solo.

3. Usa Formfacade e il tuo CSS

Formfacade li aiuta a rendere il Google Form qui sopra proprio come lo immaginavano.
Ti mostro la trasformazione del modulo con una guida dettagliata, passo dopo passo. Seguimi mentre personalizzo e aggiungo CSS agli elementi del modulo per arrivare allo stile voluto.

Passo 1: Preparare il modulo per la personalizzazione

  • Clicca su Crea il tuo modulo, dai un nome al modulo, clicca su Build form e poi su Proceed.
  • Clicca sulla scheda "Preview"
Le schede Edit, Preview, Share e Responses, con Preview evidenziata
2. Clicca sulla scheda "LAYOUT" nella barra laterale e seleziona "Comfortable" per passare al layout a 2 colonne. Clicca su "Apply to this form".
Le impostazioni di anteprima del modulo con la scheda LAYOUT, Comfortable e il pulsante Apply to this form evidenziati
3. Nella stessa barra laterale, clicca sulla scheda "THEME" per cambiare i colori del modulo. Il pulsante "Apply to all forms" applica i colori a tutti i tuoi moduli.
Le impostazioni di anteprima del modulo con la scheda THEME, Primary color e Background evidenziati
4. Guarda il tuo modulo rifarsi il look con Formfacade e confrontalo con il modulo di esempio.
Quasi fatto, vero? Ma aspetta!
Ci sono ancora alcune piccole cose da sistemare nel titolo
- Il titolo deve essere rosso cremisi - codice hex #DC143C o rgb(220,20,60)
- Il titolo deve avere una fascia bianca di sfondo, da un lato all'altro.
- La descrizione deve restare nera. E centrata.
- Il padding va sistemato dappertutto.
Training Registration su Formfacade con due colonne e sfondo verde acqua, prima di aggiungere il CSS
5. Usiamo "Inspect element" e vediamo quale CSS va bene.
6. Ho fatto queste modifiche in "Inspect element" e sono arrivato al codice CSS qui sotto.
.ff-title {
color:#DC143C !important;
padding: 20px !important;
background-color: white;
position: relative;
transform: translateX(-4%);
width: 109%;
}
.ff-description {
padding-top: 20px !important;
align: center !important;
}
.ff-form {
padding: 0px 30px !important;
}
.ff-compose {
padding: 0px !important;
background: none !important
}
.ff-section {
padding-top: 0px !important;
}
7. Ora aggiungo il codice al mio modulo. Clicco su "EDIT", clicco sul titolo del modulo, poi sull'icona ⚙️ e sulla scheda "Advanced" per aggiungerlo in "Custom CSS". Clicca su "Save".
Training Registration nell'editor di Formfacade con la scheda EDIT e l'icona dell'ingranaggio sulla scheda del titolo evidenziate
8. Guarda il video qui sotto per vedere come si trasforma il modulo mentre aggiungo il codice un pezzo alla volta.
Ed ecco il modulo finale. Sta benissimo, vero?
Il modulo Training Registration finale, con il titolo cremisi su una fascia bianca, due colonne e un pulsante Submit verde
Che ne pensi di questa personalizzazione? Mostraci i tuoi design e scrivici a support@formfacade.com.

Bonus!

Ecco una tabella che confronta le personalizzazioni possibili con Google Forms e con Formfacade.
1. Trova in questa tabella la personalizzazione che vuoi per il tuo modulo/campo.
2. Clicca sull'articolo collegato per un tutorial dettagliato, passo dopo passo, per ottenere il design che vuoi.
Fai fare bella figura al tuo Google Form sul tuo sito web. Buon design!
Modulo Google Forms Formfacade
Layout Una colonna standard Più colonne
Colore di sfondo/tema Sì Sì
Colore del pulsante No Sì
Campi del modulo No Sì
Cambiare le impostazioni del font
Colore del font ? No
Stile del font Sì Sì
Stili CSS avanzati No Sì
Campi
Cambiare il testo segnaposto No Sì
Aspetto (nascosto/sola lettura) No Sì
Cambiare il nome della domanda? No Sì
Precompilazione Sì Sì
Campi calcolati No Sì
Personalizzazione avanzata (formattazione del testo: grassetto, corsivo) No Sì
Monitoraggio delle conversioni No Sì
Integrazione con Hotjar No Sì
Caricamento file Drive, richiede l'accesso Sì

Riepilogo

Il tema di Google Forms cambia i colori e i caratteri ma non il layout né la spaziatura, e il CSS del tuo sito web non arriva a un modulo dentro un iframe. Con Formfacade cambi il layout e i colori e aggiungi il tuo CSS per sistemare il resto. Crea il tuo modulo e segui i passaggi qui sopra. Se hai domande, scrivi all'assistenza.

Ultimo aggiornamento: