In questa guida andremo a vedere come creare un form con Squadd e personalizzarlo!
1️⃣ Creazione del Form
Vai sulla sezione Siti e Marketing.
Vai sulla sezione Form Builder.
Clicca su + Add Form:
Avrai la possibilità di:
1. Creare un form a partire da zero
2. Creare un form a partire da un template pre-impostato
In questo modo avrai creato il tuo form!
Andiamo ora a vedere come personalizzarlo 🚀
2️⃣ Personalizzazione del form
🟢 Add Form Element
1. Sezione Quick Add
Ti permette di aggiungere vari elementi al form tra cui:
Campi standard compilabili (Nome, Cognome, Email, Indirizzo, caselle di testo, box a scelta multipla..)
Pulsante "Invia" per inviare il form al momento della compilazione effettuata
Sezioni dedicate all'acquisto dei prodotti e al pagamento di 1 o più somme
Foto, firme, codici HTML, T&C
e molto altro!
2. Sezione Custom Fields
Ti permette di aggiungere campi personalizzati (Custom fields) al tuo form
‼️ I campi personalizzati puoi sia crearli dalla sezione dedicata "Campi personalizzati" che crearli qui sul momento!
🟢 Conditional Logic (Logica Condizionale)
La logica condizionale è un principio secondo cui una determinata azione avviene solo se si verifica una certa condizione -> questa cosa può venir applicata all'interno dei form!
Vediamo ne dettaglio le 4 tipologie di logiche condizionali:
1 - Redirect to URL (Reindirizza a URL)
1 - Redirect to URL (Reindirizza a URL)
Ti permette di reindirizzare automaticamente il contatto verso un URL specifico in base a una compilazione specifica, dopo l'invio del form.
Esempio pratico:
Hai una domanda nel form:
"Che tipo di attività hai?"
Con le seguenti opzioni:
Libero professionista
Azienda
Agenzia di marketing
Puoi impostare questa logica condizionale:
Se l’utente seleziona "Libero professionista", allora redirect a https://tuosito.com/freelance
Se seleziona "Azienda", allora redirect a https://tuosito.com/business
Se seleziona "Agenzia di marketing", allora redirect a https://tuosito.com/agenzia
👉 In questo modo, dopo l’invio del form, ogni contatto verrà portato automaticamente alla pagina più adatta al suo profilo.
2 - Display Custom Message (Mostra Messaggio Personalizzato)
2 - Display Custom Message (Mostra Messaggio Personalizzato)
Ti permette di mostrare un messaggio personalizzato al contatto in base a una compilazione specifica, dopo l'invio del form.
Esempio pratico:
Hai una domanda nel form:
"Hai già acquistato da noi in passato?"
Con le seguenti opzioni:
Sì
No
Puoi impostare questa logica condizionale:
Se l’utente seleziona "Sì", mostra il messaggio:
"Bentornato! Siamo felici di rivederti. Il nostro team ti contatterà a breve per offrirti un trattamento VIP."Se seleziona "No", mostra il messaggio:
"Grazie per esserti registrato! Un nostro consulente ti contatterà a breve per aiutarti a iniziare al meglio."
👉 In questo modo, ogni contatto riceve un messaggio diverso e personalizzato in base alla sua risposta.
3 - Disqualify Lead (Squalifica Lead)
3 - Disqualify Lead (Squalifica Lead)
Ti permette di squalificare il contatto (lead) nel caso in cui non abbia soddisfatto quando specificato nella condizione, dopo l'invio del form.
Esempio pratico:
Hai una domanda nel form:
"Qual è il tuo budget mensile per il servizio?"
Con queste opzioni:
Meno di 300€
Tra 300€ e 1000€
Oltre 1000€
Puoi impostare questa logica condizionale:
Se l’utente seleziona "Meno di 300€", allora squalifica il lead.
👉 In questo modo, il contatto verrà automaticamente marcato come non qualificato, evitando di far perdere tempo al team commerciale su lead fuori target.
4 - Show/Hide Fields (Mostra/Nascondi Campi)
4 - Show/Hide Fields (Mostra/Nascondi Campi)
Ti permette di mostrare/nascondere campi del form in base a una compilazione specifica.
Esempio pratico:
Hai una domanda nel form:
"Hai già un sito web?"
Con le opzioni:
Sì
No
Puoi impostare questa logica condizionale:
Se l’utente seleziona "Sì", allora mostra il campo:
"Inserisci il link del tuo sito web"Se seleziona "No", allora nascondi quel campo.
👉 Così il modulo resta ordinato e mostra solo le domande rilevanti in base alle risposte dell’utente, migliorando l’esperienza di compilazione.
🟢 Show Notification Settings
Ti permette di ricevere notifiche interne via email quando viene compilato un form (1) oppure di mandare una email a chi ha compilato form, con un riepilogo delle informazioni compilate (2)
🟢 Desktop mode/Mobile mode
Ti permette di vedere come risulterebbe la versione da dektop o da mobile del tuo form.
🟢 Settings
On Submit -> puoi inserire un messaggio predefinito che deve comparire dopo l'invio del form
Facebook Pixel ID -> Puoi inserire il codice del tuo pixel di Facebook per inviare i dati a Meta
Facebook Pixel Events ⭢ Puoi inviare al pixel che hai indicato sopra degli eventi
specifici in base alla visualizzazione e all'invio del form
Form Settings ⭢ abbiamo 3 funzioni:
1. Sticky Contats: permette al contatto che compila per la 2° volta lo stesso form,di avere il form pre-compilato con i dati
2. Enable Timezone: permette di catturare il fuso orario del contatto che compilail form
3. Use GDPR Compliant Font: passa al set di font che è conforme con la GDPR
2️⃣.1️⃣ Personalizzazione grafica del form
In questa sezione hai la possibilità di personalizzare a livello grafico il tuo form, andiamo a vedere nel dettaglio le varie funzioni!
🟢 Styles
LAYOUT
Layout type | Modifica il layout del form, mettendo i campi in una sola riga, in 1 o più colonne. |
Input styles | I campi compilabili si presentano come box o come linee su cui scrivere. |
Width | Larghezza del form a livello di pixel, per un max di 1800 px. |
Field spacing | Spazio tra un campo all'altra a livello di pixel, per un max di 1800 px. |
Label width | Larghezza dei nomi dei campi. |
Label alignment | Allineamento dei nomi dei campi- |
Padding | Letteralmente "imbottitura dei margini" - permette di togliere/aggiungere spazio tra i campi e i margini del form. |
Show label | Toggle che se attivo, mostra i nomi dei campi - se disattivo, li nasconde. |
COLORS & BACKGROUND
Background | Colore dello sfondo del form. |
Font color | Colore del font (scritte) del form. |
Input background | Colore delle box dei campi. |
Background image | Immagine di sfondo del form. |
Header image | Immagine dell'intestazione del form. |
MISCELLANEOUS
Agency Branding | Toggle che se attivo, mostra il logo della tua azienda - se disattivo, lo nasconde. |
🟢 Themes
Puoi utilizzare un template (modello) pre-impostato.
🟢 Advanced
FORM
Border Width | Simile al Padding. |
Corner Radius | Permette di arrotondare o meno gli angoli del form. |
Border Color | Colore dei bordi del form. |
Border style | Stile dei bordi del form. |
Color | Colore delle ombre del form. |
Horizontal | Ombre del form. |
Vertical | Ombre del form. |
Blur | Sfocatura delle ombre. |
Spread | Estensione dell'ombra. |
INPUT FIELD
Font Color | Colore delle info quando vengono compilate all'interno dei campi. |
Active Tag Color | Colore dell’etichetta di un campo quando l’utente ci clicca sopra. |
Border Width | Larghezza del bordo dei campi. |
Border Color | Colore del bordo dei campi. |
Corner Radius | Permette di arrotondare o meno gli angoli dei campi. |
Width | Larghezza dei campi. |
Border style | Stile de bordi (lineare, a pallini, a trattini..) |
Padding | Permette di togliere/aggiungere spazio tra la compilazione e il bordo del campo. |
Color | Colore dell'ombra dei campi. |
Horizontal | Ombre dei campi. |
Vertical | Ombre dei campi. |
Blur | Sfocatura delle ombre dei campi. |
Spread | Estensione dell'ombra. |
LABEL
Label Color | Colore del nome dei campi. |
Font Family | Font del form. |
Font Size | Grandezza del form. |
Font Weight | Spessore del font. |
SHORT LABEL
Short Label Color | Colore della descrizione del campo (che si trova sotto al campo) |
Font Family | Font della descrizione dei campi. |
Font Size | Grandezza del font delle descrizione dei campi. |
Font Weight | Spessore del font delle descrizione dei campi. |
PLACEHOLDER
Placeholder Color | Colore del segnaposto. |
Font Family | Font del segnaposto. |
Font Size | Dimensione del font del segnaposto. |
Font Weight | Spessore del font del segnaposto. |
CUSTOM CSS
Puoi implementare il tuo codice CSS personalizzato per definire lo stile (colori, spaziature, font, ecc.) del tuo form!
Oltre a questa personalizzazione generale, puoi cliccare sul singolo campo del form per modificarne:
Label
Short label
Placeholder
Query key
Field width
Se è obbligatorio o meno da compilare
Speriamo questo tutorial sia stato utile, se hai dubbi scrivici in Live Chat o su Whatsapp al +39 351 411 7320! 💪