Configurare e personalizzare un modulo Legacy su un sito esterno

Dopo aver creato un modulo in HubSpot, puoi aggiungerlo alle pagine di HubSpot o a pagine che hai creato al di fuori di HubSpot. I moduli possono essere condivisi sul tuo sito esterno, non ospitato da HubSpot, in uno dei seguenti modi:

• Incorporando il codice del modulo in una pagina esistente.
• Creando una pagina dedicata al modulo a cui è possibile collegarsi.

Con entrambi i metodi, le modifiche apportate al modulo nello strumento Moduli di HubSpot verranno automaticamente riportate sul modulo pubblicato sul tuo sito esterno. Dopo aver aggiunto il modulo, puoi personalizzare l’aspetto del modulo HubSpot incorporato nelle tue pagine esterne nell’editor dei moduli o tramite CSS nel tuo foglio di stile esterno. Se utilizzi WordPress, scopri come inserire un modulo in un post o in una pagina di WordPress.

Nota: questo articolo è dedicato esclusivamente ai moduli esistenti creati con l’editor precedente. Si consiglia di utilizzare l’editor dei moduli aggiornato per creare e gestire i moduli. Scopri come personalizzare e incorporare i moduli su un sito esterno.

Prima di iniziare

Quando si aggiunge il codice di incorporamento del modulo su una pagina esterna, il dominio della pagina deve essere aggiunto come dominio del sito per essere considerato un dominio attendibile. In caso contrario, gli invii al modulo verranno filtrati come spam.

Accedi al codice di incorporamento 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. Passa il mouse su un modulo e fai clic su Azioni > Condividi.
3. Nella finestra di dialogo, se desideri aggiungere i contatti che inviano il modulo a una campagna Salesforce, fai clic sul menu a discesa Aggiungi contatti a una campagna Salesforce e seleziona una campagna. Se associ una campagna Salesforce al tuo modulo, il codice di incorporamento del modulo verrà modificato. In questo caso, dovrai reinserire il codice di incorporamento nel tuo sito esterno.
4. Fai clic su " Copia".
5. Incolla il codice di incorporamento nel modulo HTML della tua pagina esterna. Per monitorare le statistiche relative al tuo modulo, il codice di tracciamento HubSpot deve essere installato sulla pagina esterna in cui inserisci un modulo HubSpot.

Crea una pagina dedicata al modulo

Puoi anche condividere il tuo modulo tramite il link di condivisione. In un link di condivisione, il modulo verrà visualizzato su una pagina autonoma con un proprio URL. Questo link di condivisione non può essere nascosto né reso privato. Chiunque disponga del link di condivisione potrà accedere al 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. Passa il mouse su un modulo e fai clic su Azioni > Condividi.
3. Nella finestra di dialogo, fare clic sulla scheda "Link di condivisione ".
4. Fare clic su Copia per copiare l'URL della pagina del modulo negli appunti.
5. Nel browser, apri una nuova finestra o scheda e incolla l'URL della pagina del modulo 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.
   
   

Personalizza lo stile del tuo modulo incorporato nell'editor dei moduli

Quando personalizzi il tuo modulo incorporato con l'editor di moduli di HubSpot, puoi utilizzare un tema oppure applicare uno stile personalizzato.

Nota: i temi e gli stili impostati nell’editor dei moduli si applicheranno solo ai moduli incorporati o alle pagine dei moduli autonome. I moduli presenti sulle tue pagine HubSpot possono essere personalizzati solotramite le opzioni di stile del modulo disponibili nell’editor dei contenuti.

Personalizza il tuo modulo con un tema

Se desideri personalizzare il tuo modulo legacy senza scrivere codice personalizzato, puoi applicare temi predefiniti al tuo modulo incorporato o alla pagina del modulo autonoma. Questi temi aggiungono ulteriori opzioni di personalizzazione ai tuoi moduli, oltre alle impostazioni globali di stile dei moduli.

Per personalizzare il tuo modulo con un tema:

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. Nell'editor del modulo, clicca sulla scheda "Stile e anteprima ".
4. Se stai modificando un modulo legacy, nel riquadro a sinistra deseleziona la casella di controllo Mantieni il tema precedente . In questo modo verrà rimosso il precedente stile predefinito di HubSpot applicato a questo modulo. Qualsiasi codice CSS o JavaScript personalizzato che hai aggiunto al modulo non funzionerà più. Questa casella di controllo non si applica ai nuovi moduli creati nel tuo account.
5. Seleziona un tema.
6. In alto a destra, clicca su Pubblica o Aggiorna.

Utilizza uno stile personalizzato

È inoltre possibile personalizzare lo stile dei moduli a un livello più dettagliato.

Per applicare uno stile personalizzato:

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 clicca su Modifica.
3. Fai clic sulla scheda "Stile e anteprima " nell'editor del modulo.
   • Nel riquadro a sinistra, clicca sulla sezione"Stile". Qui puoi configurare la larghezza dei campi del modulo, il tipo di carattere, le dimensioni dei caratteri, i colori dei caratteri e il pulsante del modulo. Questi stili vengono impostati singolarmente per ogni modulo e hanno la precedenza sulle impostazioni globali dello stile dei moduli.
   • Dopo aver personalizzato il modulo, in alto a destra, clicca su Pubblica o Aggiorna.

Personalizza lo stile del tuo modulo incorporato con CSS nel tuo foglio di stile esterno (metodo tradizionale)

Se utilizzi un modulo legacy, puoi incorporare il tuo modulo come modulo HTML grezzo. Successivamente, puoi personalizzare lo stile di questo modulo incorporato con i CSS nel tuo foglio di stile esterno.

Nota: è possibile impostare come HTML grezzo solo i moduli legacy. Scopri di più su come applicare stili al tuo modulo incorporato tramite CSS nell'editor dei moduli aggiornato.

Per applicare uno stile al modulo incorporato tramite CSS:

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. Nell'editor del modulo, clicca sulla scheda "Stile e anteprima ".
4. Fai clic per attivare l'opzione "Imposta come modulo HTML grezzo" . Il modulo verrà visualizzato come elemento HTML grezzo sulla tua pagina esterna anziché all’interno di un iframe. Qualsiasi stile predefinito di HubSpot applicato al modulo verrà rimosso.
5. In alto a destra, clicca su "Pubblica " o " Aggiorna".
6. Aggiungi il codice di incorporamento del modulo alla tua pagina esterna. Se hai già incorporato il modulo, devi sostituire il codice di incorporamento esistente con questa nuova versione senza stile. Dopo aver incorporato il modulo:
   
   • Potrai applicare uno stile al modulo nel tuo foglio di stile esterno utilizzando i CSS.
   • Puoi anche modificare il codice di incorporamento del modulo per apportare ulteriori personalizzazioni. Poiché i moduli HubSpot sono realizzati con JavaScript, non con HTML, la personalizzazione del codice di incorporamento del modulo richiede l’aiuto di uno sviluppatore che sappia lavorare con JavaScript