Come aggiungere un modulo multi-fase Growform a Unbounce

Unbounce è il nostro costruttore di landing page preferito, ma spesso gli utenti desiderano costruire moduli a più fasi che non possono essere realizzati con la loro interfaccia.

Invece di mettere insieme centinaia di righe di JavaScript o di mettere insieme più landing page, questa guida vi mostrerà come implementare Growform – il principale costruttore di form multi step – sulla vostra landing page Unbounce.

Se si sceglie di incorporare il modulo nella pagina, si otterrà qualcosa di simile:

… o se si preferisce mostrare il modulo in sovraimpressione quando si fa clic su un pulsante, si otterrà qualcosa di simile:

Per prima cosa,decidere se “incorporare” o “sovrapporre”.

Ora che conoscete la differenza tra le due opzioni, è il momento di scegliere se incorporare il vostro modulo multi-step direttamente nella vostra pagina Unbounce o se farlo “comparire” in sovrimpressione quando si fa clic su un pulsante.

Quale utilizzare dipenderà principalmente dal vostro modello Unbounce – non c’è una “risposta giusta” – quindi scegliete quello che si adatta meglio al vostro design.

Ora, scegliete un’opzione…

⬇️ Incorporare il modulo direttamente nella pagina (continuare a leggere questa guida)
⬇️ Far apparire il modulo in sovraimpressione quando si fa clic su un pulsante

Incorporare il modulo direttamente nella pagina

1 – Creare un modulo su Growform

Naturalmente, è necessario creare un modulo su Growform. C’è una prova gratuita di 14 giorni (non è richiesta la carta di credito): iscrivetevi qui.

Il primo passo sarà simile a questo:

Seguite la nostra guida introduttiva se avete bisogno di aiuto per creare il vostro primo modulo.

2 – Ottenere il codice di condivisione Growform

Per ottenere il codice di condivisione di Growform, aprire Growform e assicurarsi che il modulo sia salvato. Poi, nella barra blu in alto, andate su “Modulo di condivisione”.

Scegliete la prima opzione – “Incorpora Growform direttamente nel tuo sito web con uno snippet HTML”, fate clic sul codice e copiatelo negli appunti:

3 – Aggiungere un blocco HTML personalizzato a Unbounce e incollare il proprio codice

Ora, aprite la vostra pagina Unbounce nell’editor e trascinate il blocco “HTML personalizzato”. Verrà quindi richiesto di incollare il codice.

Incollare il codice ottenuto al punto 2 e riposizionare il riquadro in modo che si adatti al progetto:

Premete “Salva” e non dimenticate di regolare il posizionamento del box per i dispositivi mobili, come di consueto nel builder di Unbounce).

4 – Visualizzare l’anteprima del modulo e apportare alcune modifiche

Quando si preme l’anteprima, si dovrebbe vedere il modulo in più fasi incorporato con successo nella pagina di Unbounce:

Ecco alcune modifiche da apportare per ottenere una forma perfetta:

• Nelle impostazioni del “Tema” di Growform, impostare lo sfondo del contenitore padre su colore e scegliere un colore di sfondo che corrisponda a quello di Unbounce.
• Rimuovere le intestazioni/istruzioni nella parte superiore del modulo Growform, che possono essere sempre presenti in Unbounce.
• Regolate il colore primario del modulo (che influisce sulle barre di avanzamento e sugli accenti) e le altre impostazioni di colore.

Con un piccolo aggiustamento, possiamo ottenere un modulo a più fasi che sembra al 100% “incorporato” nella pagina di Unbounce:

5 – Attivare il monitoraggio delle conversioni di Unbounce

Infine, come tocco finale ma opzionale, si può scegliere di far tracciare i riempimenti dei moduli Growform come conversioni in Unbounce. Questo incrementa semplicemente la colonna “conversioni” nelle statistiche della vostra pagina di destinazione Unbounce.

Per abilitare questa opzione, in Growform, andare su “Modifica impostazioni del modulo” > “Tracciamento e tag” > “Abilita il tracciamento delle conversioni di Unbounce”.

Serve altro? Stiamo lavorando attivamente alla nostra offerta Unbounce, compresa la possibilità di vedere i lead apparire in Unbounce.

Contattateci per fornire un feedback e aiutarci a definire la roadmap.