Stile e incorporazione dei moduli HubSpot in un sito esterno

Utilizzate i moduli di HubSpot sul vostro sito web esterno per catturare i contatti e sincronizzarli automaticamente con il vostro account HubSpot. Potete creare il vostro modulo in HubSpot e utilizzare il codice di incorporamento del modulo per aggiungerlo al vostro sito. Oppure utilizzate un link di condivisione per inviare un modulo indipendente al vostro pubblico.

L'incorporazione di un modulo garantisce la sincronizzazione degli invii direttamente con il vostro account HubSpot, dove potete gestire i contatti, attivare l'automazione e analizzare le prestazioni. Ad esempio, potete aggiungere un modulo HubSpot a una pagina di prodotto sul sito web della vostra azienda per catturare le richieste di demo e seguirle con un'e-mail automatica.

Se il vostro modulo è stato creato nell'editor di moduli legacy, scoprite come impostare e modellare un modulo legacy su un sito esterno.

Prima di iniziare

Prima di iniziare a lavorare con questa funzione, è necessario esaminare i requisiti tecnici e le considerazioni sull'uso dei moduli su siti esterni.

Requisiti tecnici

• Quando si incorpora un modulo HubSpot in un sito esterno, è necessario aggiungere il dominio del sito alle impostazioni di tracciamento. Gli invii di moduli da domini non aggiunti saranno contrassegnati come spam.
• Per monitorare gli analytics sul modulo incorporato, è necessario installare il codice di tracciamento HubSpot sulla pagina esterna.
  

Limitazioni e considerazioni

• L'impostazione del modulo come modulo HTML grezzo non è disponibile nell'editor di moduli aggiornato. Solo i moduli costruiti con l'editor di moduli precedente possono essere impostati come HTML grezzo.
• La personalizzazione del codice incorporato di un modulo richiede l'aiuto di uno sviluppatore che sappia lavorare con JavaScript. Una personalizzazione più avanzata può essere effettuata con un modulo personalizzato e con l'API HubSpot Forms.

Stile del modulo

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

1. Nel tuo account HubSpot, passa a Marketing > Form.
2. Creare un nuovo modulo o passare il mouse su un modulo esistente e fare clic su Modifica.
3. Nel menu della barra laterale sinistra, fare clic sull'icona styles Styling.
4. Nel pannello Stili modulo è possibile personalizzare i seguenti componenti:
   • Campi: personalizzare il campo, compresi sfondo e bordi. È inoltre possibile 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: è possibile personalizzare l'altezza del pulsante, l'arrotondamento degli angoli, lo sfondo, il gradiente e aggiungere un'ombra al pulsante. È inoltre possibile personalizzare il carattere, la dimensione del carattere e il colore del testo del pulsante.
   • Paragrafo (testo ricco): consente di personalizzare il carattere, la dimensione e il colore del testo del corpo.
   • Intestazione: personalizzare il font e il colore del testo dell'intestazione. Si può scegliere di aggiungere un'ombra al testo dell'intestazione.
   • Sfondo: personalizzare lo sfondo del modulo e delle fasi del modulo. Si può scegliere di impostare un colore di sfondo o di utilizzare un'immagine per lo sfondo. È possibile utilizzare gli assistenti AI per generare le immagini. Si può anche scegliere di impostare un bordo per il modulo.
   • Barra di avanzamento: personalizzare la barra di avanzamento del modulo, compresi il colore della linea di avanzamento e il carattere della barra di avanzamento.

Condividere una pagina di modulo indipendente

Utilizzare un link di condivisione per visualizzare il modulo in una pagina indipendente. Chiunque abbia il link di condivisione può accedere al modulo. Il link di condivisione non può essere nascosto o reso privato.

Per copiare il link di condivisione:

1. Nel tuo account HubSpot, passa a Marketing > Form.
2. Passare il mouse su un modulo e fare clic su Modifica.
3. In alto a destra, fare clic su Rivedi e aggiorna.
4. Nel pannello di destra, in basso, fare clic su Aggiorna.
5. Nella finestra di dialogo, fare clic su Copia di un link di condivisione.
6. In basso, fare clic su Copia. L'indirizzo web della pagina verrà copiato negli appunti.
7. Nel browser, aprire una nuova finestra o scheda e incollare l'URL della pagina nella barra degli indirizzi per caricarla. È anche possibile condividere l'URL della pagina del modulo direttamente con altre persone per consentire loro di accedere al modulo.

Copiare il codice di incorporamento del modulo

Per incorporare il modulo nella pagina esterna, copiare il codice di incorporamento del modulo e incollarlo nella pagina esterna. Per tracciare gli analytics del modulo incorporato, il codice di tracciamento HubSpot deve essere installato sulla pagina esterna in cui è stato incorporato il modulo HubSpot.

Per copiare il codice embed:

1. Nel tuo account HubSpot, passa a Marketing > Form.
2. Passare il mouse su un modulo e fare clic su Modifica.
3. In alto a destra, fare clic su Rivedi e aggiorna.
4. Nel pannello di destra, in basso, fare clic su Aggiorna.
5. Nella finestra di dialogo, fare clic su Ottieni codice di incorporamento.
6. Nella scheda Codice incorporato, fare clic su Copia.
7. Incollare il codice embed nel modulo HTML della pagina esterna.

Accedere al codice sviluppatore del modulo

Incorporare il modulo e personalizzare lo stile usando i CSS nel foglio di stile esterno. Con questo metodo, è possibile sovrascrivere gli stili predefiniti, applicare uno stile granulare a elementi specifici del modulo e impostare regole globali per uno stile coerente in tutti i moduli incorporati. Per saperne di più su come definire uno stile personalizzato per i moduli incorporati usando i CSS.

Per accedere al codice dello sviluppatore:

1. Nel tuo account HubSpot, passa a Marketing > Form.
2. Passare il mouse su un modulo e fare clic su Modifica.
3. In alto a destra, fare clic su Rivedi e aggiorna.
4. Nel pannello di destra, in basso, fare clic su Aggiorna.
5. Nella finestra di dialogo, fare clic su Ottieni codice incorporato.
6. Fare clic sulla scheda Codice sviluppatore (avanzato).
7. Per accettare il rischio che le modifiche apportate esternamente a CSS o JavaScript possano causare la rottura del modulo, selezionare la casella di controllo Comprendo i rischi, mostrami il codice.
8. In fondo, fare clic su Copia.
9. Aggiungere il codice di incorporamento del modulo alla pagina esterna. Dopo aver incorporato il modulo, sarà possibile stilizzare il modulo nel foglio di stile esterno con i CSS.
   • Le variabili CSS che si possono sovrascrivere sono elencate in questo articolo.
   • Gli stili globali sovrascrivono lo stile di primo livello di tutti i moduli incorporati. È anche possibile indirizzare singoli elementi dei moduli, come le righe di un elemento del modulo, i pulsanti di invio o le intestazioni del modulo.