Setup Web to Lead Form

I Web to Lead Form permettono di integrare form di acquisizione lead direttamente nel tuo sito web, landing page o campagne. I visitatori compilano il form e diventano automaticamente lead in FlashCRM.

Cos'è un Web to Lead Form

Definizione:

Form personalizzabile che:

• Si integra nel tuo sito via iframe

• Raccoglie dati dai visitatori

• Crea automaticamente lead in FlashCRM

• Notifica il team commerciale

Vantaggi:

• ✅ Acquisizione lead 24/7 automatica

• ✅ Nessuna codifica necessaria

• ✅ Form personalizzabili per campagna

• ✅ Protezione spam con reCAPTCHA

• ✅ Tracciamento conversioni

• ✅ Notifiche immediate team

Scenari d'uso:

• Form "Richiedi preventivo" su sito aziendale

• Landing page campagna Google Ads

• Pagina "Contattaci"

• Form scaricamento risorsa (ebook, guida, trial)

• Iscrizione webinar/demo

Creare un Web to Lead Form

Passaggio 1: Accedere alla configurazione

1. Vai su Impostazioni → Lead → Web To Lead

2. Clicca pulsante Nuovo Form

Passaggio 2: Configurazione iniziale form

Devi prima creare le impostazioni generali, poi potrai costruire il form vero e proprio.

Nome Form:

Nome interno per identificare il form:

Lingua:

Lingua usata per messaggi di validazione (es. "Campo obbligatorio"):

• Italiano

• Inglese

• Altra lingua installata

Nota: Non influenza i label dei campi (li personalizzi dopo).

Testo pulsante submit:

Personalizza il testo del pulsante di invio:

Messaggio dopo invio successo:

Cosa mostra al visitatore dopo compilazione:

Consenti lead duplicati:

SÌ: Permette inserimento lead con email già esistente

• Crea task invece di lead

• Task contiene tutti i dati form

• Staff assegnato rivede e decide azione

NO: Blocca inserimento se email esiste

• Mostra messaggio errore al visitatore

• Previene duplicati

Quando usare SÌ:

• Form su siti ad alto traffico (molti duplicati potenziali)

• Preferisci task di verifica manuale

Quando usare NO:

• Vuoi database lead pulito

• Pochi duplicati previsti

Fonte:

Seleziona fonte da assegnare ai lead di questo form:

Crea fonti specifiche per campagna per tracciare performance.

Stato:

Stato iniziale lead acquisito:

Responsabile:

Staff da assegnare automaticamente ai lead del form:

• Seleziona commerciale specifico

• Lascia vuoto per lead non assegnati

• Usa per bilanciamento carico lavoro

Impostazioni notifica:

Chi notificare:

Seleziona staff o ruoli da notificare:

• Staff specifici

• Ruoli (es. "Commerciali")

• Admin (spunta se vuoi notificarli)

Tipo notifica:

• In-app (campanello notifiche)

• Email (se template "New Lead Assigned" è attivo)

reCAPTCHA:

Protezione anti-spam di Google:

Per abilitare:

1. Prima configura chiavi reCAPTCHA

2. Poi spunta questa opzione nel form

Effetto: Aggiunge verifica "Non sono un robot" al form.

Raccomandato: SÌ, sempre, per prevenire spam bot.

Passaggio 3: Salvare impostazioni iniziali

Clicca Salva.

Ora appariranno due nuove tab:

• Form Builder: Costruisci il form trascinando campi

• Codice Integrazione: Codice per incorporare nel sito

Costruire il form (Form Builder)

Passaggio 1: Accedere al builder

Dopo salvataggio, sei automaticamente sulla tab Form Builder.

Interfaccia:

Sinistra: Campi disponibili (da trascinare) Destra: Area form (dove costruisci)

Passaggio 2: Aggiungere campi al form

Campi disponibili:

FlashCRM mostra tutti i campi del profilo lead:

• Nome ⭐ (raccomandato obbligatorio)

• Email ⭐ (raccomandato obbligatorio)

• Telefono

• Azienda

• Posizione

• Sito web

• Indirizzo

• Città

• Provincia

• CAP

• Paese

• Descrizione/Messaggio

• Valore Lead

• Custom Fields (se configurati)

Aggiungere campo:

Drag & drop:

1. Trascina campo dalla sinistra

2. Rilascia nell'area form destra

3. Campo appare nel form

Limiti:

• Ogni campo può essere aggiunto una sola volta

• Dopo aggiunta, campo si disabilita a sinistra

Campi non supportati:

Custom field tipo "Hyperlink" non può essere usato nei form.

Passaggio 3: Personalizzare campi

Dopo aver trascinato un campo, puoi personalizzarlo:

Hover sopra il campo:

• Appare icona modifica (matita) in alto a destra

• Appare icona elimina (X)

Clicca icona modifica:

Si apre pannello personalizzazione:

Label (Etichetta):

Testo che appare sopra il campo:

Placeholder:

Testo di esempio dentro il campo (grigio):

Testo di aiuto (Help Text):

Piccola nota sotto il campo:

Obbligatorio:

Spunta per rendere campo obbligatorio:

• Campo richiesto per inviare form

• Mostra asterisco rosso *

• Validazione automatica

Raccomandati obbligatori:

• Nome

• Email

Classe CSS personalizzata:

Per layout avanzato (vedi sezione layout multi-colonna).

Passaggio 4: Ordinare campi

Trascina i campi per riordinarli:

• Clicca e tieni premuto su campo

• Sposta su/giù

• Rilascia nella posizione desiderata

Ordine tipico consigliato:

Passaggio 5: Salvare form

Clicca pulsante Salva in basso a sinistra.

Layout multi-colonna

Per form più compatti, puoi disporre campi in colonne multiple.

Sistema a griglia Bootstrap:

FlashCRM usa griglia 12 colonne:

• form-col-12: Larghezza piena (default)

• form-col-6: Mezza larghezza (2 campi per riga)

• form-col-4: Un terzo larghezza (3 campi per riga)

• form-col-3: Un quarto larghezza (4 campi per riga)

Esempio: 2 colonne

Vuoi Nome ed Email affiancati:

1. Modifica campo Nome

2. Classe CSS: form-col-6

3. Modifica campo Email

4. Classe CSS: form-col-6

5. Salva

Risultato:

Esempio: 3 colonne

Per container piccoli (mobile):

Aggiungi anche classe responsive:

form-col-6 form-col-xs-6

Garantisce layout anche su schermi piccoli.

Nota: Layout multi-colonna si vede solo nel form live, non nel builder.

Ottenere codice integrazione

Passaggio 1: Accedere al codice

Dopo salvataggio form, clicca tab Codice Integrazione.

Passaggio 2: Codice iframe

FlashCRM fornisce codice iframe pronto:

<iframe src="https://tuodominio.com/flashcrm/forms/wtl/abc123xyz"
        width="100%"
        height="850"
        frameborder="0">
</iframe>

Parametri personalizzabili:

width: Larghezza iframe

height: Altezza iframe

Nota: Se form ha molti campi, aumenta height per evitare scrollbar interno.

Passaggio 3: Incorporare nel sito

Opzione A: Pagina HTML statica

1. Apri file HTML

2. Incolla codice iframe dove vuoi il form

3. Salva e carica online

Opzione B: WordPress

1. Modifica pagina/post

2. Aggiungi blocco "HTML personalizzato"

3. Incolla codice iframe

4. Pubblica

Opzione C: CMS vari Ogni CMS ha modo di inserire HTML personalizzato. Cerca "HTML widget" o "Codice personalizzato".

Condivisione diretta (senza iframe)

Invece di incorporare, puoi condividere link diretto al form:

URL base:

Parametri URL utili:

Mostra logo aziendale:

Styling migliorato (per link diretto):

Quando usare link diretto:

• Email marketing (link "Richiedi info")

• SMS campagne

• Social media post

• QR code su materiale stampato

Personalizzazione avanzata (CSS)

Per adattare colori form al tuo brand:

Passaggio 1: Creare file CSS custom

1. Accedi via FTP/cPanel

2. Vai in assets/css/

3. Crea file custom.css (se non esiste)

Passaggio 2: Aggiungere stili

Cambiare colore bordo input:

body.web-to-lead input,
body.web-to-lead select,
body.web-to-lead textarea {
    border-color: #007bff; /* Blu */
}

Cambiare colore pulsante submit:

body.web-to-lead #form_submit {
    background: #28a745; /* Verde */
    border-color: #28a745;
}
 
body.web-to-lead #form_submit:hover {
    background: #218838; /* Verde scuro hover */
}

Cambiare font:

body.web-to-lead {
    font-family: 'Arial', sans-serif;
}

Cambiare colore label:

body.web-to-lead label {
    color: #333;
    font-weight: bold;
}

Passaggio 3: Testare

Apri URL form nel browser e verifica modifiche CSS.

Redirect dopo invio

Per reindirizzare utente a pagina personalizzata dopo invio (es. pagina "Grazie"):

Passaggio 1: Creare helper personalizzato

1. Via FTP, vai in application/helpers/

2. Crea file my_functions_helper.php (se non esiste)

3. Aggiungi questo codice:

<?php
 
hooks()->add_action('web_to_lead_form_submitted', 'redirect_after_form');
 
function redirect_after_form($data) {
    echo json_encode(array(
        'success' => true,
        'redirect_url' => 'https://tuosito.com/grazie'
    ));
    die;
}

Personalizza URL:

'redirect_url' => 'https://tuosito.com/grazie'

Passaggio 2: Testare

Compila form e verifica redirect.

Best practice Web to Lead Form

Campi obbligatori:

✅ Sempre obbligatori:

• Nome

• Email

✅ Consigliati obbligatori:

• Telefono (se intendi chiamare lead)

• Messaggio (per qualificare interesse)

❌ Evita troppi obbligatori:

• Diminuisce conversion rate

• Chiedi solo essenziale

Lunghezza form:

Form breve (3-5 campi):

• ✅ Alto conversion rate

• ❌ Lead meno qualificati

Form lungo (8+ campi):

• ❌ Conversion rate più basso

• ✅ Lead più qualificati e seri

Bilanciamento: Testa diverse lunghezze per trovare optimal conversion/qualità.

reCAPTCHA:

✅ Sempre attivo per:

• Prevenire spam bot

• Proteggere database

• Ridurre lead fake

Messaggio dopo invio:

✅ Chiaro e rassicurante:

✅ Imposta aspettative:

• Quando riceveranno risposta

• Cosa succede dopo

• Prossimi passi

HTTP vs HTTPS:

⚠️ Importante: Protocolli devono corrispondere:

• Sito HTTPS → FlashCRM HTTPS ✅

• Sito HTTP → FlashCRM HTTP ✅

• Sito HTTPS → FlashCRM HTTP ❌ (form non funziona)

Soluzione: Configura certificato SSL su FlashCRM se sito è HTTPS.

Testing:

Prima di lanciare:

1. ✅ Testa form su desktop

2. ✅ Testa su mobile

3. ✅ Verifica reCAPTCHA funziona

4. ✅ Compila form test e verifica lead creato

5. ✅ Verifica notifiche arrivano

6. ✅ Testa validazione campi obbligatori

7. ✅ Testa messaggio successo

Monitoring:

Dopo lancio:

• Monitora conversion rate

• Controlla lead creati giornalmente

• Verifica qualità lead

• Identifica e blocca spam

• A/B test varianti form