Personalizza e incorpora i moduli HubSpot in un sito esterno

Utilizza i moduli HubSpot sul tuo sito web esterno per acquisire lead e sincronizzare automaticamente i dati dei contatti con il tuo account HubSpot. Puoi personalizzare il modulo in HubSpot e utilizzare il codice di incorporamento per aggiungerlo al tuo sito. Oppure puoi utilizzare un link di condivisione per inviare un modulo autonomo al tuo pubblico.

L'incorporamento di un modulo garantisce che i dati inviati vengano sincronizzati direttamente con il tuo account HubSpot, dove potrai gestire i contatti, attivare flussi automatizzati e analizzare le prestazioni. Ad esempio, puoi aggiungere un modulo HubSpot a una pagina di prodotto sul sito web della tua azienda per acquisire richieste di demo e inviare un'e-mail automatica di follow-up.

Se il tuo modulo è stato creato nell’editor di moduli legacy, scopri come configurare e personalizzare un modulo legacy su un sito esterno.

Prima di iniziare

Prima di iniziare a utilizzare questa funzionalità, consulta i requisiti tecnici e le considerazioni relative all'uso dei moduli su siti esterni.

Requisiti

• Per monitorare le statistiche relative al tuo modulo incorporato, installa il codice di tracciamento HubSpot sulla tua pagina esterna.
  
• Quando incorpori un modulo HubSpot in un sito esterno, dovrai aggiungere il dominio del sito alle tue impostazioni di tracciamento. Gli invii dei moduli provenienti da domini non aggiunti verranno contrassegnati come spam.

Limitazioni e considerazioni

• L'impostazione del modulo come modulo HTML grezzo non è disponibile nell'editor dei moduli aggiornato. Solo i moduli creati utilizzando l'editor dei moduli precedente possono essere impostati come HTML grezzo.
• La personalizzazione del codice di incorporamento di un modulo richiede l’aiuto di uno sviluppatore che sappia utilizzare JavaScript. È possibile effettuare personalizzazioni più avanzate utilizzando un modulo creato su misura e l’API dei moduli di HubSpot.

Personalizza lo stile del tuo modulo

Personalizza il testo, i campi di immissione, i pulsanti e lo sfondo del modulo e delle sue fasi. Le personalizzazioni dello stile del modulo vengono applicate a tutte le fasi del modulo. Non è possibile personalizzare separatamente le singole fasi del modulo.

1. Nel tuo account HubSpot, fai clic su Altro, quindi vai a Marketing > Form. Se Altro non appare nel tuo account, vai direttamente a Marketing > Form.
2. Crea un nuovo modulo oppure passa il mouse su un modulo esistente e fai clic su Modifica.
3. Nel menu della barra laterale sinistra, clicca sull'icona "Stile di styles ".
4. Dal pannello " Stili del modulo " è possibile personalizzare i seguenti componenti:
   • Campi: personalizza il campo, inclusi sfondo e bordi. Puoi anche personalizzare il carattere, la dimensione del carattere e i colori delle etichette, nonché i colori del testo di aiuto, dei segnaposto e del testo di errore.
   • Pulsanti: personalizza l’altezza del pulsante, l’arrotondamento degli angoli, lo sfondo, la sfumatura e aggiungi un’ombra al pulsante. Puoi anche personalizzare il carattere, la dimensione del carattere e il colore del testo del pulsante.
   • Paragrafo (testo formattato): personalizza il carattere, la dimensione e il colore del testo del corpo.
   • Intestazione: personalizza il carattere e il colore del testo della tua intestazione. Puoi scegliere di aggiungere un’ombra al testo dell’intestazione.
   • Sfondo: personalizza lo sfondo del modulo e delle sue fasi. Puoi scegliere di impostare un colore di sfondo o utilizzare un’immagine come sfondo. Puoi utilizzare gli assistenti AI per generare immagini. Puoi anche scegliere di impostare un bordo per il modulo.
   • Barra di avanzamento: personalizza la barra di avanzamento del tuo modulo, compreso il colore della linea di avanzamento e il carattere della barra stessa.

Condividi una pagina del modulo autonoma

Utilizza un link di condivisione per visualizzare il tuo modulo su una pagina autonoma. Chiunque disponga del link di condivisione può accedere al modulo. Gli URL dei link di condivisione vengono generati automaticamente e non possono essere modificati né personalizzati.

Per copiare il link di condivisione:

1. Nel tuo account HubSpot, fai clic su Altro, quindi vai a Marketing > Form. Se Altro non appare nel tuo account, vai direttamente a Marketing > Form.
2. Passa il mouse su un modulo e fai clic su Modifica.
3. In alto a destra, clicca su " Rivedi e aggiorna".
4. Nel pannello di destra, in basso, clicca su " Aggiorna".
5. Nella finestra di dialogo, clicca su " Copia un link di condivisione".
6. In fondo alla pagina, clicca su "Copia". In questo modo l'indirizzo web della pagina verrà copiato negli appunti.
7. Nel browser, apri una nuova finestra o scheda e incolla l'URL della pagina nella barra degli indirizzi per caricarla. Puoi anche condividere direttamente l'URL della pagina del modulo con altre persone per consentire loro di accedere al modulo.

Copia il codice di incorporamento del modulo

Incorpora il modulo nella tua pagina esterna copiando il codice di incorporamento del modulo e incollandolo nella tua pagina esterna. Per monitorare le statistiche relative al modulo incorporato, è necessario che il codice di tracciamento HubSpot sia installato sulla pagina esterna in cui incorpori il modulo HubSpot.

Per copiare il codice di incorporamento:

1. Nel tuo account HubSpot, fai clic su Altro, quindi vai a Marketing > Form. Se Altro non appare nel tuo account, vai direttamente a Marketing > Form.
2. Passa con il mouse su un modulo e clicca su Modifica.
3. In alto a destra, clicca su " Rivedi e aggiorna".
4. Nel pannello di destra, in basso, clicca su " Aggiorna".
5. Nella finestra di dialogo, clicca su " Ottieni codice di incorporamento".
6. Nella scheda "Codice di incorporamento ", clicca su "Copia".
7. Incolla il codice di incorporamento nel modulo HTML della tua pagina esterna.

Accedi al codice di sviluppo del modulo

Incorpora il tuo modulo e personalizzane lo stile utilizzando i CSS nel tuo foglio di stile esterno. Con questo metodo, puoi sovrascrivere gli stili predefiniti, applicare stili dettagliati a elementi specifici del modulo e impostare regole globali per garantire uno stile coerente in tutti i tuoi moduli incorporati. Scopri di più su come definire stili personalizzati per i moduli incorporati utilizzando i CSS.

Per accedere al codice di sviluppo:

1. Nel tuo account HubSpot, fai clic su Altro, quindi vai a Marketing > Form. Se Altro non appare nel tuo account, vai direttamente a Marketing > Form.
2. Passa il mouse su un modulo e fai clic su Modifica.
3. In alto a destra, clicca su " Rivedi e aggiorna".
4. Nel pannello di destra, in basso, clicca su " Aggiorna".
5. Nella finestra di dialogo, clicca su " Ottieni codice di incorporamento".
6. Fai clic sulla scheda " Codice sviluppatore (Avanzato) ".
7. Per accettare il rischio che le modifiche apportate esternamente a CSS o JavaScript possano causare il malfunzionamento del modulo, seleziona la casella di controllo "Comprendo i rischi, mostrami il codice ".
8. In fondo alla pagina, fare clic su " Copia".
9. Aggiungi il codice di incorporamento del modulo alla tua pagina esterna. Dopo aver incorporato il modulo, potrai personalizzarne lo stile nel tuo foglio di stile esterno utilizzando i CSS.
   • Le variabili CSS che è possibile sovrascrivere sono elencate in questo articolo.
   • Gli stili globali sovrascriveranno gli stili di primo livello in tutti i tuoi moduli incorporati. Puoi anche applicare lo stile a singoli elementi dei tuoi moduli, come una riga di elementi del modulo, i pulsanti di invio o le intestazioni del modulo.