Impostazione e stile di un modulo HubSpot su un sito esterno

Dopo aver creato un modulo in HubSpot, si può aggiungerlo alle pagine di HubSpot o pagine create al di fuori di HubSpot. I moduli possono essere condivisi su un sito esterno non ospitato da HubSpot:

• Incorporando il codice del modulo in una pagina esistente.
• Creando una pagina del modulo indipendente a cui collegarsi.

In entrambi i casi, le modifiche apportate al modulo nello strumento moduli di HubSpot si rifletteranno automaticamente sul modulo live del sito esterno. Dopo aver aggiunto il modulo, è possibilecreare lo stile del modulo HubSpot incorporato nelle pagine esterne nell'editor dei moduli o con i CSS nel foglio di stile esterno.

Se lavorate con WordPress, scoprite come inserire un modulo in un post o in una pagina di WordPress.

Aggiungere il codice di integrazione del modulo

• Nel tuo account HubSpot, naviga su Marketing > Acquisizione lead > Form.
• Passare il mouse su un modulo e fare clic su Azioni > Condividi.
• Nella finestra di dialogo, se si desidera aggiungere i contatti che inviano il modulo a una campagna Salesforce, fare clic sul menu a discesa Aggiungi contatti a una campagna Salesforce e selezionare una campagna. Se si associa una campagna Salesforce al modulo, il codice di incorporamento del modulo verrà modificato. In questo caso, è necessario aggiungere nuovamente il codice embed al sito esterno.
• Fare clic su Copia.
• Incollare il codice embed nel modulo HTML della pagina esterna. Per tracciare gli analytics del modulo, il codice di tracciamento di HubSpot deve essere installato sulla pagina esterna in cui si inserisce il modulo di HubSpot.

Creare una pagina di modulo indipendente

È anche possibile condividere il modulo tramite il link Condividi. In un link di condivisione, il modulo viene visualizzato in una pagina indipendente con un proprio URL. Questo link di condivisione non può essere nascosto o reso privato. Chiunque abbia il link di condivisione potrà accedere al modulo.

• Nel tuo account HubSpot, naviga su Marketing > Acquisizione lead > Form.
• Passare il mouse su un modulo e fare clic su Azioni > Condividi.
• Nella finestra di dialogo, fare clic sulla scheda Collegamento di condivisione .
• Fare clic su Copia per copiare l'URL della pagina del modulo negli appunti.
• 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 nell'editor di moduli

Quando si sceglie di personalizzare il modulo incorporato con l'editor di moduli di HubSpot, è possibile utilizzare un tema o applicare uno stile personalizzato.

Attenzione: i temi e gli stili impostati nell'editor di moduli si applicano solo ai moduli incorporati o alle pagine di moduli indipendenti. I moduli delle pagine di HubSpot possono essere personalizzati solocon le opzioni di stile del modulo di moduli nell'editor di contenuti.

Modellare il modulo con un tema

Se si desidera creare uno stile per i moduli senza scrivere alcun codice personalizzato, è possibile applicare temi preimpostati al modulo incorporato o alla pagina del modulo indipendente. Questi temi aggiungono ulteriori opzioni di personalizzazione ai moduli, oltre alle impostazioni globali dello stile del modulo.

Per creare lo stile del modulo con un tema:

• Nel tuo account HubSpot, naviga su Marketing > Acquisizione lead > Form.
• Passare il mouse su un modulo e fare clic su Modifica.
• Nell'editor dei moduli, fare clic sulla schedaStile e anteprima .
• Se si sta modificando un modulo precedente, nel riquadro di sinistra deselezionare la casellaMantieni il vecchio tema . Questo rimuoverà lo stile predefinito di HubSpot applicato al modulo. Qualsiasi CSS o JavaScript personalizzato aggiunto al modulo non funzionerà più. Questa casella di controllo non si applica ai nuovi moduli creati nel vostro account.
• Selezionare un tema.
• In alto a destra, fare clic su Pubblica o Aggiorna.

Utilizzare uno stile personalizzato

Se avete un abbonamento aMarketing Hub Starter, Professional o Enterprise con il vostro account HubSpot, potete anche personalizzare i moduli incorporati a un livello più granulare.

Per applicare uno stile personalizzato:

• Nel tuo account HubSpot, naviga su Marketing > Acquisizione lead > Form.
• Passare il mouse su un modulo e fare clic su Modifica.
• Nell'editor dei moduli, fare clic sulla schedaStile e anteprima .
• Nel riquadro di sinistra, fare clic sulla sezione Stile . Qui è possibile configurare la larghezza dei campi del modulo, la famiglia di caratteri, le dimensioni dei caratteri, i colori dei caratteri e il pulsante del modulo. Questi stili sono impostati per ogni singolo modulo e sovrascrivono le impostazioni globali dello stile del modulo.
  
• Dopo aver personalizzato il modulo, inalto a destra, fare clic su Pubblica o Aggiorna.
  
  

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

Se avete un abbonamento a Marketing Hub o CMS Hub Professional o Enterprise con il vostro account HubSpot, potete incorporare il vostro modulo come un modulo HTML grezzo, e poi stilizzare questo modulo incorporato con i CSS nel vostro foglio di stile esterno.

Per creare lo stile del modulo incorporato con i CSS:

• Nel tuo account HubSpot, naviga su Marketing > Acquisizione lead > Form.
• Passare il mouse su un modulo e fare clic su Modifica.
• Nell'editor del modulo, fare clic sulla schedaStile e anteprima .
• Fare clic per attivare l'interruttoreImposta come modulo HTML grezzo. Il modulo verrà visualizzato come elemento HTML grezzo sulla pagina esterna, anziché all'interno di un iframe, e qualsiasi stile predefinito di HubSpot applicato al modulo verrà rimosso.
• In alto a destra, fate clic su Pubblica o Aggiorna .
• Aggiungete il codice di incorporamento del modulo alla vostra pagina esterna. Se il modulo è già stato incorporato, è necessario sostituire il codice di incorporamento esistente con questa nuova versione senza stile. Dopo aver incorporato il modulo:
  
  • Sarà possibile modificare lo stile del modulo nel foglio di stile esterno con i CSS.
  • È inoltre possibilemodificare il codice diincorporamento del modulo per apportare ulteriori personalizzazioni. Poiché i moduli di HubSpot sono costruiti con JavaScript e non con HTML, la personalizzazionedel codice incorporato del modulorichiede l'aiuto di uno sviluppatore che sappia lavorare con JavaScript.