Impostazione e stile di un modulo HubSpot su un sito esterno

Dopo aver creato un modulo in HubSpot, è possibile aggiungerlo alle pagine di HubSpot o a pagine create all'esterno di HubSpot. I formulari possono essere condivisi sul vostro sito esterno, non ospitato da HubSpot, in due modi:

• Incorporare il codice del modulo in una pagina esistente.
• Creazione di una pagina di modulo indipendente a cui collegarsi.

Con entrambi i metodi, le modifiche apportate al modulo nello strumento dei moduli di HubSpot si rifletteranno automaticamente sul modulo live del vostro sito esterno. Dopo l'aggiunta del modulo, è possibile creare lo stile del modulo HubSpot embeded sulle pagine esterne nell'editor dei moduli o con i CSS nel foglio di stile esterno.

Se lavorate con WordPress, imparate a inserire un modulo nel vostro post o pagina WordPress.

Attenzione: a partire dal 16 maggio 2024, quando si aggiunge il codice di incorporamento del modulo a una pagina esterna, il dominio della pagina deve essere aggiunto come dominio del sito per essere trattato come dominio attendibile. In caso contrario, gli invii di form saranno filtrati tra gli invii di spam.

Aggiungere il codice di incorporamento del modulo

• Nel tuo account HubSpot, passa a Marketing > 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 HubSpot deve essere rata sulla pagina esterna in cui si inserisce il modulo 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, passa a Marketing > Form.
• Passare il mouse su un modulo e fare clic su Azioni > Condividi.
• Nella finestra di dialogo, fare clic sulla scheda Condividi link .
• 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.
  
  

Stile del modulo incorporato nell'editor dei moduli

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

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

Stile del modulo con un tema (legacy)

Se si vuole dare uno stile al proprio modulo legacy 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 un tema per il vostro modulo:

• Nel tuo account HubSpot, passa a Marketing > Form.
• Passare il mouse su un modulo e fare clic su Modifica.
• Nell'editor del modulo, fare clic sulla scheda Stile e anteprima .
• Se si sta modificando un modulo precedente, nel riquadro a sinistra deselezionare la casella Mantieni 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

È inoltre possibile modellare i moduli a un livello più granulare.

Per applicare uno stile personalizzato:

• Nel tuo account HubSpot, passa a Marketing > Form.
• Passare il mouse su un modulo e fare clic su Modifica.
• Se state modificando un modulo precedente e avete un abbonamento a Marketing Hub Starter, Professional o Enterprise , fate clic sulla scheda Stile e anteprima nell'editor dei moduli.
  • Nel riquadro di sinistra, fate clic sulla sezioneStile . 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 su base individuale e sovrascrivono le impostazioni globali dello stile del modulo.
  • Dopo aver personalizzato il modulo, in alto a destra, fare clic su Pubblica o Aggiorna.
    
    

• Se si utilizza l'editor di moduli aggiornato, sul lato sinistro, fare clic sull'icona Stilizzazione.
  • Per personalizzare il testo, i campi di input o il pulsante, è possibile scegliere tra gli stili esistenti utilizzando gli stili di input del campo rapido. In alternativa, è possibile personalizzare manualmente lo stile per ciascun componente 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.

Modellare il modulo incorporato con i CSS nel foglio di stile esterno (legacy)

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

Nota bene: è possibile impostare i moduli legacy solo come HTML grezzo.

Per creare lo stile del modulo incorporato con i CSS:

• Nel tuo account HubSpot, passa a Marketing > Form.
• Passare il mouse su un modulo e fare clic su Modifica.
• Nell'editor dei moduli, fare clic sulla scheda Stile e anteprima .
• Fare clic per attivare l'interruttore Imposta 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, fare 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 la nuova versione senza stile. Dopo aver incorporato il modulo:
  
  • Potrete stilizzare il modulo nel vostro foglio di stile esterno con i CSS.
  • È inoltre possibile modificare il codice di incorporamento del modulo per apportare ulteriori personalizzazioni. Poiché i moduli di HubSpot sono costruiti con JavaScript, non con HTML, la personalizzazione del codice embed del modulo richiede l'aiuto di uno sviluppatore che sappia lavorare con JavaScript