Impostazione e stile di un modulo HubSpot su un sito esterno

Dopo aver creato un modulo in HubSpot, è possibile aggiungerlo a pagine HubSpot o a pagine create al di fuori di HubSpot. Se i contenuti sono ospitati al di fuori di HubSpot, è possibile aggiungere moduli con i seguenti metodi:

• Incorporare il modulo copiando il codice embed e aggiungendolo alla pagina esterna.
• Utilizzare il link di condivisione del modulo, che offre una pagina web indipendente per il modulo a cui è possibile collegarsi.

Con entrambi i metodi, le modifiche apportate al modulo verranno aggiornate automaticamente sul modulo live del sito esterno. Il modulo HubSpot incorporato può essere personalizzato nell'editor del modulo o con i CSS del foglio di stile esterno.

Prima di iniziare

• Se volete impostare il vostro modulo come un modulo HTML grezzo, questa opzione non è disponibile nell'editor di moduli aggiornato. Solo i moduli costruiti con l'editor di moduli precedente possono essere impostati come HTML grezzo.
• Se si incorpora il modulo HubSpot in una pagina esterna, è necessario installare il codice di tracciamentoHubSpot per monitorare gli analytics. Scopri come installare il codice di tracciamento HubSpot.

Stile del modulo

Personalizzate il testo, i campi di input, il pulsante e lo sfondo del modulo e delle fasi del modulo. Le opzioni di stile configurate nella scheda Stilizzazione globale saranno 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. È possibile personalizzare lo stile dei seguenti componenti del modulo:
   • 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.

Copiare il codice di incorporamento del modulo

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

Per accedere al 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.

Usare il link di condivisione per condividere una pagina di modulo indipendente

È possibile condividere il modulo con il link di condivisione, che visualizzerà il modulo in una pagina web indipendente. Questo link di condivisione non può essere nascosto o reso privato. Chiunque abbia il link di condivisione potrà accedere al modulo.

Per accedere al 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 del modulo verrà copiato negli appunti.
7. Nel browser, aprire una nuova finestra o scheda e incollare l'URL della pagina del modulo nella barra degli indirizzi per caricarla. È anche possibile condividere l'URL della pagina del modulo direttamente con altri utenti per consentire loro di accedere al modulo.

Modellare il modulo incorporato con i CSS del foglio di stile esterno

Gli utenti di un account Marketing Hub o Content Hub Professional o Enterprise possono incorporare i moduli e stilizzarli 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. Ulteriori informazioni su come definire uno stile personalizzato per i moduli incorporati utilizzando 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.