Impostare e stilizzare un modulo HubSpot su un sito esterno

Con lo strumento dei moduli, puoi raccogliere informazioni dai visitatori del tuo sito web, permettendoti di commercializzare, vendere e servire quei visitatori mentre si impegnano con il tuo business. Quando crei un modulo in HubSpot, puoi aggiungilo alle pagine HubSpot o pagine che hai creato fuori da HubSpot. I moduli possono essere condivisi in due modi sul tuo sito esterno, non ospitato da HubSpot: incorporando il codice del modulo in una pagina esistente o creando una pagina indipendente del modulo a cui puoi collegarti.

Con entrambi i metodi, le modifiche apportate al modulo nello strumento moduli di HubSpot si rifletteranno automaticamente sul modulo live sul tuo sito esterno

Se stai lavorando con WordPress, impara come inserire un modulo nel tuo post o pagina di WordPress.

Aggiungere il codice embed del modulo

Nota: se associ una campagna Salesforce al tuo modulo, il codice embed del modulo sarà cambiato. In questo caso, devi aggiungere nuovamente il codice embed al tuo sito esterno.

• Nel tuo account HubSpot, naviga su Marketing > Acquisizione lead > Form.
• Crea un nuovo modulo o passa il mouse su unmoduloesistente , clicca sul menu a discesaAzioni e seleziona Modifica modulo .
• Clicca sulla scheda Opzioni per scegliere cosa succede dopo che un visitatore invia il tuo modulo. Puoi scegliere di reindirizzare i tuoi visitatori a una pagina di ringraziamento o visualizzare un messaggio di ringraziamento in linea quando un visitatore invia il tuo modulo.

• Nell'editor del modulo, in alto a destra, clicca su Condividi.
• Nella finestra di dialogo, se vuoi aggiungere i contatti che inviano il modulo a una campagna Salesforce, clicca sul menu a discesa Aggiungi contatti a una campagna Salesforce e seleziona una campagna.
• Fare clic su Copia.
  
• In alto a destra, clicca su Pubblica.
• Incolla il codice embed nel modulo HTML della tua pagina esterna. Per tracciare gli analytics per il tuo modulo, il tuo codice di tracciamento HubSpot deve essere installato sulla pagina esterna dove metti un modulo HubSpot. HubSpot raccoglierà i moduli senza il codice di tracciamento HubSpot installato ma nessun analytics sarà registrato.

Se stai lavorando con WordPress, impara come inserire un modulo nel tuo post o pagina di WordPress.

Creare una pagina di modulo indipendente

Puoi condividere il tuo modulo tramite una pagina del modulo, in modo che esista su una pagina propria con un proprio URL.

• Nel tuo account HubSpot, naviga su Marketing > Acquisizione lead > Form.
• Crea un nuovo modulo o passa il mouse su unmoduloesistente , clicca sul menu a discesaAzioni e seleziona Modifica modulo .
• In alto a destra, clicca su Condividi.

• Nella finestra di dialogo, clicca sulla scheda Condividi collegamento .
• Clicca su Copia per copiare l'URL della pagina del modulo negli appunti.

• In alto a destra, clicca su Publish.

• Nel tuo browser, apri una nuova finestra o scheda e incolla l'URL della pagina del tuo modulo nella barra degli indirizzi per caricarlo. Puoi anche condividere l'URL della pagina del modulo direttamente con altri per dare loro accesso al modulo.

Se notate che il vostro modulo non funziona in WordPress o il codice embed viene alterato quando visualizzate la pagina live, potrebbe essere necessario inserire il modulo utilizzando un plugin per assicurarsi che il codice embed rimanga intatto. Se state usando l'ultima versione di Gutenberg, che rimuove il JavaScript in linea, usate il plugin Inline JS Block for Gutenberg per incorporare moduli e CTA nella vostra pagina.

Stile del tuo modulo incorporato su pagine esterne

Dai uno stile al tuo modulo incorporato HubSpot sulle tue pagine esterne in due modi, nell'editor dei moduli o con i CSS nel tuo foglio di stile esterno.

Nell'editor di moduli

Tema

Se vuoi dare stile ai tuoi moduli senza scrivere alcun codice personalizzato, puoi applicare temi preimpostati al tuo modulo incorporato o alla pagina del modulo indipendente. I temi aggiungono più opzioni di personalizzazione ai tuoi moduli, oltre a qualsiasi impostazione globale di stile del modulo.

• Nel tuo account HubSpot, vai su Marketing > Lead Capture > Forms.
• Cliccate sulnome di un modulo.
• Nell'editor del modulo, clicca sullascheda Style & Preview .
• Nel pannello di sinistra, sezioneTema , deseleziona la casella di controllo Mantieni il vecchio tema .

Nota: deselezionando la casella di controllo Mantieni il vecchio tema si rimuoverà il precedente stile predefinito HubSpot applicato a questo modulo. Qualsiasi CSS o JavaScript personalizzato che hai aggiunto al modulo non funzionerà più. Questa casella di controllo è disponibile solo per i moduli precedenti e non sarà disponibile in nessun nuovo modulo creato nel tuo account.

• Seleziona uno dei quattrotemi di .

Stile(Marketing Hub Starter, Professional, Enterprise, o Legacy Marketing Hub Basic solo)

Oltre ai temi, è possibile dare uno stile ai moduli incorporati a un livello più granulare.

• Nel tuo account HubSpot, vai su Marketing > Lead Capture > Forms.
• Cliccate sulnome di un modulo.
• Nell'editor del modulo, clicca sullascheda Style & Preview .

• Nel pannello di sinistra, clicca sulla sezione > Style per espanderla. Qui, puoi dare uno stile alla larghezza del campo del modulo, alla famiglia dei caratteri, alle dimensioni dei caratteri, ai colori dei caratteri e al pulsante del modulo.

Questi stili sono impostati su una base individuale del modulo e sovrascriveranno le impostazioni globali dello stile del modulo.

Nota bene: temi e stili impostati nell'editor dei moduli si applicano solo a moduli incorporati o pagine di moduli indipendenti. Imoduli sulle tue pagine HubSpot possono essere stilizzat isolo con le opzioni di stile del modulo dei modulinell'editor dei contenuti.

Stilizza il tuo modulo con i CSS nel tuo foglio di stile esterno (Marketing Hub e CMS Hub Professional o Enterprise, o Legacy Marketing Hub SoloBasic )

• Nel tuo account HubSpot, vai su Marketing > Lead Capture > Forms.
• Cliccate sulnome del modulo.
• Nell'editor del modulo, clicca sullascheda Style & preview .
• Clicca per attivare l'interruttore Set as raw HTML form . Il modulo sarà reso come un elemento HTML grezzo sulla tua pagina esterna invece che all'interno di un iframe, e qualsiasi stile predefinito HubSpot applicato al modulo sarà rimosso.

• In alto a destra, clicca su Share.
• Nella finestra di dialogo, clicca su Copy per copiare il codice embed del modulo.
• Aggiungi il codice incorporato del modulo alla tua pagina esterna. Se hai già incorporato il tuo modulo, devi sostituire il codice incorporato esistente con questa nuova versione non stilizzata.

• Dopo aver incorporato il tuo modulo, puoi stilizzare il modulo nel tuo foglio di stile esterno con i CSS.
• In alternativa, è possibile modificare il codice incorporatodel modulo per fare ulteriori personalizzazioni del modulo. Poiché HubSpot i moduli sono costruiti con JavaScript, non HTML,la personalizzazione del codice incorporato del modulo richiede l'aiuto di uno sviluppatore che sappia lavorare con JavaScript.