Progettare e personalizzare il modulo ActiveCampaign

Con ActiveCampaign, puoi personalizzare i moduli in base ai colori del tuo marchio, aggiungere immagini, cambiare il tipo di carattere e altro ancora.

Guarda un video

Guarda questo video per scoprire come creare e personalizzare il modulo. 

Opzioni di personalizzazione del modulo di Access

Le opzioni di personalizzazione di un modulo si trovano nella scheda "Stile" nel generatore di moduli.

Per accedere a questa scheda per qualsiasi modulo:

  1. Fai clic su "Sito Web" > "Moduli" nel menu a sinistra. 
  2. Modificare o creare un nuovo modulo. 
  3. Verrà caricato il generatore di moduli. Tutte le opzioni di modifica e stile verranno visualizzate nel riquadro di destra. Fai clic sulla scheda "Stile" situata nel riquadro di destra.

    Form_builder_style_tab.png

Personalizzare un modulo in linea

Con il modulo in linea, è possibile scegliere un layout e personalizzare lo stile per il modulo e inviare il pulsante.

Layout

Fare clic su una delle opzioni per scegliere un layout orizzontale o verticale per il modulo.

Form_builder_layout.png

Stile modulo

La casella "Stile modulo" consente di personalizzare il modo in cui il modulo apparirà ai visitatori del sito Web. Di seguito è riportata una tabella che mostra tutte le opzioni di stile del modulo. 

Opzioni di personalizzazione dello stile del modulo Descrizione
Priorità bassa Modificare il colore di sfondo del modulo o renderlo trasparente.

Le immagini di sfondo non sono supportate da questo tipo di modulo. 
Colore carattere Modificare il colore del testo visualizzato nel modulo.
Carattere Modificare il tipo di carattere nel modulo in modo che corrisponda al marchio. 
confine Utilizzare questa opzione per aggiungere un bordo al modulo. I bordi vengono impostati come valore pixel. È possibile aumentare o diminuire il bordo, modificarne il colore e selezionare tra quattro diversi tipi di bordo: Solido, Punteggiato, Crespato e Doppio. 
Raggio d'angolo Utilizzare questa opzione per arrotondare o quadrare gli angoli del modulo. Il raggio d'angolo viene impostato come valore pixel. 
Larghezza Utilizzare questa opzione per regolare la larghezza del modulo. La larghezza è impostata come valore pixel. 

 

Pulsante

La casella "Pulsante" consente di personalizzare l'aspetto del pulsante di invio del modulo. Di seguito è riportata una tabella che mostra tutte le opzioni di personalizzazione dei pulsanti. 

Opzioni di personalizzazione dei pulsanti Descrizione
Priorità bassa Modificare il colore di sfondo del pulsante di invio. 
Testo Modificare il colore del testo del pulsante. 
confine Utilizzare questa opzione per aggiungere un bordo al pulsante. I bordi vengono impostati come valore pixel. È possibile aumentare o diminuire il bordo, modificarne il colore e selezionare tra quattro diversi tipi di bordo: Solido, Punteggiato, Crespato e Doppio. 
Raggio d'angolo Utilizzare questa opzione per arrotondare o quadrare gli angoli del pulsante. Il raggio d'angolo viene impostato come valore pixel. 
Spaziatura interna La spaziatura interna è lo spazio intorno al pulsante. È possibile utilizzare questa opzione per aumentare o diminuire la spaziatura interna. Questo è impostato come valore pixel. 

 

Si noti che non sarà in grado di regolare l'altezza o la larghezza del pulsante qui. Sarà necessario utilizzare CSS personalizzato per apportare tali modifiche (vedere la sezione successiva).

Personalizzare un modulo pop-up modale

Con il modulo pop-up modale, è possibile scegliere un layout e personalizzare lo stile per il modulo, i campi di input e il pulsante invia.

Layout

Sono disponibili quattro opzioni tra cui scegliere per il modulo: nessuna immagine, immagine a sinistra, immagine nella parte superiore o immagine al centro.

modal_form_layout_options.png

Stile modale

La casella "Stile modale" ti consente di personalizzare il modo in cui il modulo apparirà ai visitatori del tuo sito web. Di seguito è riportata una tabella che mostra tutte le opzioni di personalizzazione modale:

Opzioni di personalizzazione dello stile del modale Descrizione
Priorità bassa Fare clic sul selettore colori per modificare il colore del modulo o aggiungere un'immagine di sfondo.
Priorità bassa Fare clic sul selettore colori per modificare il colore del modulo o aggiungere un'immagine di sfondo.
Carattere Modificare il tipo di carattere nel modulo in modo che corrisponda al marchio. 
Larghezza Utilizzare questa opzione per regolare la larghezza del modulo. La larghezza è impostata come valore pixel.
Spaziatura interna La spaziatura interna è lo spazio intorno al tuo modulo. È possibile utilizzare questa opzione per aumentare o diminuire la spaziatura interna. Questo è impostato come valore pixel.
Raggio d'angolo Utilizzare questa opzione per arrotondare o quadrare gli angoli del modulo. Il raggio d'angolo viene impostato come valore pixel.
Ombra Usare questa funzionalità per aggiungere un'ombreggiatura al modulo. In questo modo si contribuirà a distinguersi. È possibile scegliere tra le seguenti opzioni: Nessuno, Leggero, Medio e Pesante.

 

Ingressi

Gli input si riferiscono ai campi che i visitatori del sito web utilizzeranno per inviarti le loro informazioni personali. Le opzioni di personalizzazione dell'input includono:

Opzioni di personalizzazione dell'input Descrizione
Priorità bassa Fare clic sul selettore colori per modificare il colore dei campi di input.
Colore carattere Fare clic sulla selezione colori per modificare il colore del testo del campo di input. 
Raggio d'angolo Utilizzare questa opzione per arrotondare o quadrare gli angoli dei campi di input. Il raggio d'angolo viene impostato come valore pixel.

 

Pulsante

La casella "Pulsante" consente di personalizzare l'aspetto del pulsante di invio del modulo. Le opzioni di personalizzazione dei pulsanti includono:

Opzioni di personalizzazione dei pulsanti Descrizione
Priorità bassa Modificare il colore di sfondo del pulsante di invio. 
Testo Modificare il colore del testo del pulsante. 
confine Utilizzare questa opzione per aggiungere un bordo al pulsante. I bordi vengono impostati come valore pixel. È possibile aumentare o diminuire il bordo, modificarne il colore e selezionare tra quattro diversi tipi di bordo: Solido, Punteggiato, Crespato e Doppio. 
Raggio d'angolo Utilizzare questa opzione per arrotondare o quadrare gli angoli del pulsante. Il raggio d'angolo viene impostato come valore pixel. 
Spaziatura interna Utilizzare questa opzione per regolare la spaziatura interna del pulsante. La spaziatura interna è impostata come valore pixel. 

 

Si noti che non sarà in grado di regolare l'altezza o la larghezza del pulsante qui. Sarà necessario utilizzare CSS personalizzato per apportare tali modifiche (vedere la sezione successiva).

Personalizzare un modulo a box flottante

Con il modulo a box flottante, è possibile scegliere un layout e personalizzare lo stile per il modulo, i campi di input e il pulsante invia.

Layout

Sono disponibili quattro opzioni tra cui scegliere per il modulo: nessuna immagine, immagine a sinistra, immagine nella parte superiore o immagine al centro.

Floating_box_layout.png

Stile scatola

La casella "Stile modulo" consente di personalizzare il modo in cui il modulo apparirà ai visitatori del sito Web. Le opzioni di personalizzazione dello stile del modulo includono:

Opzioni di personalizzazione dello stile di casella Descrizione
Priorità bassa Fare clic sul selettore colori per modificare il colore del modulo o aggiungere un'immagine di sfondo.
Colore carattere Modificare il colore del testo visualizzato nel modulo.
Carattere Modificare il tipo di carattere nel modulo in modo che corrisponda al marchio. 
Larghezza Utilizzare questa opzione per regolare la larghezza del modulo. La larghezza è impostata come valore pixel. 
Spaziatura interna La spaziatura interna è lo spazio intorno al tuo modulo. È possibile utilizzare questa opzione per aumentare o diminuire la spaziatura interna. Questo è impostato come valore pixel. 
Raggio d'angolo Utilizzare questa opzione per arrotondare o quadrare gli angoli del modulo. Il raggio d'angolo viene impostato come valore pixel. 
Ombra Usare questa funzionalità per aggiungere un'ombreggiatura al modulo. In questo modo si contribuirà a distinguersi. È possibile scegliere tra le seguenti opzioni: Nessuno, Leggero, Medio e Pesante. 

 

Ingressi

Gli input si riferiscono ai campi che i visitatori del sito web utilizzeranno per inviarti le loro informazioni personali. Le opzioni di personalizzazione dell'input includono:

Opzioni di personalizzazione dell'input Descrizione
Priorità bassa Fare clic sul selettore colori per modificare il colore dei campi di input.
Colore carattere Fare clic sulla selezione colori per modificare il colore del testo del campo di input. 
Raggio d'angolo Utilizzare questa opzione per arrotondare o quadrare gli angoli dei campi di input. Il raggio d'angolo viene impostato come valore pixel.

 

Pulsante

La casella "Pulsante" consente di personalizzare l'aspetto del pulsante di invio del modulo. Le opzioni di personalizzazione dei pulsanti includono:

Opzioni di personalizzazione dei pulsanti Descrizione
Priorità bassa Modificare il colore di sfondo del pulsante di invio. 
Testo Modificare il colore del testo del pulsante. 
confine Utilizzare questa opzione per aggiungere un bordo al pulsante. I bordi vengono impostati come valore pixel. È possibile aumentare o diminuire il bordo, modificarne il colore e selezionare tra quattro diversi tipi di bordo: Solido, Punteggiato, Crespato e Doppio. 
Raggio d'angolo Utilizzare questa opzione per arrotondare o quadrare gli angoli del pulsante. Il raggio d'angolo viene impostato come valore pixel. 
Spaziatura interna Utilizzare questa opzione per regolare la spaziatura interna del pulsante. La spaziatura interna è impostata come valore pixel. 

 

Si noti che non sarà in grado di regolare l'altezza o la larghezza del pulsante qui. Sarà necessario utilizzare CSS personalizzato per apportare tali modifiche (vedere la sezione successiva).

Personalizzare un modulo a barra flottante

Con il modulo a barra flottante, è possibile personalizzare lo stile del modulo e inviare il pulsante. Le opzioni di layout non sono disponibili con questo tipo di modulo.

Stile barra

La casella "Stile barra" consente di personalizzare il modo in cui il modulo apparirà ai visitatori del sito Web. Le opzioni di personalizzazione dello stile della barra includono:

Opzioni di personalizzazione dello stile della barra Descrizione
Priorità bassa Modificare il colore di sfondo del modulo.

Le immagini di sfondo non sono supportate da questo tipo di modulo.
Colore carattere Modificare il colore del testo visualizzato nel modulo.
Carattere Modificare il tipo di carattere nel modulo in modo che corrisponda al marchio. 

 

Pulsante

La casella "Pulsante" consente di personalizzare l'aspetto del pulsante di invio del modulo. Le opzioni di personalizzazione dei pulsanti includono:

Opzioni di personalizzazione dei pulsanti Descrizione
Priorità bassa Modificare il colore di sfondo del pulsante di invio. 
Testo Modificare il colore del testo del pulsante. 
confine Utilizzare questa opzione per aggiungere un bordo al pulsante. I bordi vengono impostati come valore pixel. È possibile aumentare o diminuire il bordo, modificarne il colore e selezionare tra quattro diversi tipi di bordo: Solido, Punteggiato, Crespato e Doppio. 
Raggio d'angolo Utilizzare questa opzione per arrotondare o quadrare gli angoli del pulsante. Il raggio d'angolo viene impostato come valore pixel. 
Spaziatura interna Utilizzare questa opzione per regolare la spaziatura interna del pulsante. La spaziatura interna è impostata come valore pixel. 

 

Si noti che non sarà in grado di regolare l'altezza o la larghezza del pulsante qui. Sarà necessario utilizzare CSS personalizzato per apportare tali modifiche (vedere la sezione successiva).

Modificare il testo del pulsante "Invia"

È possibile modificare il testo del pulsante "Invia" per qualsiasi modulo.

  1. Dalla pagina Moduli, fai clic sul pulsante "Modifica" per il modulo che desideri aggiornare.
  2. Fai clic sul pulsante "Invia" nel generatore di moduli.
  3. Il menu giusto mostrerà l'etichetta del pulsante e un campo. Digitare il testo che si desidera utilizzare per il pulsante.

    Button_text.png

Il nuovo testo del pulsante verrà salvato automaticamente.

Personalizzazione avanzata

Ogni tipo di modulo in ActiveCampaign ha un'opzione CSS personalizzata disponibile. Questo è per gli utenti avanzati che hanno familiarità con CSS e sono a proprio agio nell'usarlo. L'opzione CSS personalizzata si trova nella scheda "Stile" per ogni modulo e può essere utilizzata per aggiungere ulteriori modifiche a qualsiasi elemento del modulo. Ad esempio, è possibile utilizzare questa opzione per:

  • Regolare la larghezza e l'altezza dei campi di input
  • Regolare la larghezza e l'altezza del pulsante di invio
  • Regolare le dimensioni del carattere
  • Regolare il tipo di carattere per gli elementi singolari. Ad esempio, è possibile utilizzarlo per rendere il tipo di carattere del testo del pulsante diverso dal resto del modulo

Se vuoi saperne di più sull'uso di CSS, consulta questo tutorial CSS di w3schools.com.

Per usare l'opzione CSS personalizzata:

  1. Dal generatore di moduli, fai clic sulla scheda "Stile".
  2. Scorri verso il basso fino a visualizzare la casella "CSS personalizzato".
  3. Fare clic sul pulsante "Inspector", quindi fare clic sull'elemento del modulo che si desidera modificare.
  4. Una volta fatto clic sull'elemento che si desidera personalizzare, apparirà nella casella CSS personalizzato. Digitare il CSS in questa casella.

Il CSS aggiunto all'elemento modulo verrà salvato automaticamente.

Disattivare il branding ActiveCampaign

Se si ha un piano Plus, Professional o Enterprise, è possibile rimuovere il branding ActiveCampaign dal modulo. Gli utenti del piano Lite non sono in grado di disattivare il branding.

Disattivare il branding ActiveCampaign

  1. Dal generatore di moduli, fai clic sulla scheda "Stile".
  2. Scorri verso il basso fino a visualizzare la casella "Varie".
  3. Fare clic sull'interruttore di branding CA per impostarlo sulla posizione "Off".

Questa impostazione verrà salvata automaticamente.

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 5 su 40

Have more questions? Submit a request

Start free trial