Supporto prioritario
Help Center / Themes / Tema Hello Biz / Form lite

Form lite

Ultimo aggiornamento: Settembre 3, 2025

Aggiungi il widget

Per accedere e usare un widget:

  1. Nell’Editor di Elementor, clicca su +.
    Vengono visualizzati tutti i widget disponibili.

  2. Clicca o trascina il widget sull’area di lavoro. Per maggiori informazioni, consulta Aggiungere elementi a una pagina.

Cos'è il widget Form lite?

Raccogliere informazioni dai visitatori può essere una delle cose più importanti che il tuo sito web può fare per te.

Il widget Form Lite ti permette di creare in modo rapido ed efficiente un modulo che consente ai visitatori di inviare informazioni che ti vengono inviate via email e archiviate nella tua area WP Admin.

Scopri tutte le opzioni disponibili con il widget Form Lite.

Caso d'uso comune

Alex vuole accettare prenotazioni via email per il suo pub sportivo. Ha inserito una CTA sulla sua home page collegata a un modulo di prenotazione. Quando gli utenti compilano il modulo con una richiesta di prenotazione, questa viene inviata all’indirizzo email del pub in modo che Alex possa riservare un tavolo.

Casi d'uso aggiuntivi

  • Fai compilare un modulo ai visitatori per iscriversi alla tua newsletter.
  • Raccogli candidature di lavoro utilizzando un modulo sul tuo sito.
  • I visitatori del tuo sito possono inviare un modulo in modo che uno dei tuoi rappresentanti possa mettersi in contatto con loro.

Aggiungere un widget Form lite: guida passo-passo

Nell’esempio seguente, vedremo un modulo di prenotazione. I clienti che desiderano prenotare un tavolo compilano il modulo e, una volta inviato, il proprietario del pub, Alex, riceverà un’email. Le informazioni saranno disponibili anche nell’area WP Admin.

Aggiungi un modulo

Per aggiungere un widget Form Lite:

  1. Aggiungi un widget Form Lite all’area di lavoro.
  2. Seleziona uno dei design di modulo Predefiniti.
  3. Apri il campo Testo.
  4. Nel pannello, nella casella di testo Intestazione inserisci Prenota ora!

  5. Nella casella di testo Descrizione inserisci Garantisci il tuo posto inviandoci una richiesta di prenotazione.
    Il widget Form Lite ha campi predefiniti per Nome, Email e Messaggio. Tuttavia, vorremmo anche chiamare le persone per confermare la loro prenotazione, quindi aggiungeremo un campo Telefono.
  6. Nel pannello, apri la sezione Campi del modulo.
  7. Clicca su Aggiungi elemento.
  8. Usa il menu a discesa Tipo, seleziona Tel.
  9. Nel campo di testo Etichetta, inserisci Telefono.
  10. Imposta obbligatorio su Sì.
  11. Trascina il nuovo campo in modo che sia sotto il campo Email.
    Ora ci assicureremo che gli invii del modulo vadano nel posto giusto.
  12. Chiudi la sezione Campi del modulo.
  13. Apri il campo Azioni dopo l’invio.
  14. Nel campo A, inserisci il tuo indirizzo email.
  15. Nella riga Oggetto inserisci Richiesta di prenotazione.

    Quando gli utenti inviano il modulo cliccando sul pulsante Invia, un’email viene inviata all’indirizzo che hai inserito. L’invio viene anche memorizzato nel tuo WP Admin. Per i dettagli, vedi Gestisci gli invii dei moduli.

Impostazioni per il widget Form lite

Puoi personalizzare i tuoi widget utilizzando contenuti, stile e altri parametri avanzati, offrendoti grande flessibilità nell’adattarli alle tue esigenze. Clicca sulle schede qui sotto per vedere tutte le impostazioni disponibili per il widget Modulo.

Scheda Contenuto

Aggiungi, elimina e modifica campi del modulo, passaggi, pulsanti e controlli. Determina cosa succede dopo che i visitatori inviano le loro risposte.

Seleziona uno dei modelli di modulo per iniziare con il tuo design.

  • Intestazione: Inserisci un’intestazione per il tuo modulo nella casella di testo. L’intestazione dovrebbe essere il più breve possibile, meno di cinque parole.
  • Tag HTML dell’intestazione: Il tag HTML indica ai motori di ricerca e al software di accessibilità l’importanza dell’elemento. Si consiglia di lasciare l’impostazione predefinita, ma è possibile utilizzare il menu a discesa per cambiare il tag HTML.
  • Descrizione: Inserisci tutti i dettagli che desideri fornire sul tuo modulo.

Dai un nome al tuo modulo.

Modifica e crea campi per il tuo modulo. Ogni campo rappresenta i dati che raccogli dai tuoi visitatori, come Nome ed Email.

Ci sono due icone che appaiono a destra del nome del campo:

– Duplica questa voce di menu. L’uso della copia aiuta a mantenere la coerenza nel tuo menu.

– Elimina questa voce di menu.

Quando clicchi sul nome di un campo, appaiono opzioni aggiuntive sotto due schede: Contenuto e Avanzate.

Nella scheda Contenuto, sono disponibili le seguenti opzioni:

  • Tipo: Imposta il tipo di campo per aiutare a filtrare i dati irrilevanti. Ad esempio, impostando il tipo su email, significa che i visitatori devono inserire indirizzi email validi. Vedi Tipi di campo per maggiori dettagli.
  • Etichetta: Crea un nome per il campo, come Nome, per indicare agli utenti quali informazioni inserire.
  • Testo segnaposto: Conosciuto anche come testo fantasma, è un testo che appare nel campo per fornire informazioni più dettagliate sul campo; ad esempio, in un campo chiamato Film preferiti, il testo fantasma potrebbe essere: “Elenca le tue tre scelte migliori.”
  • Obbligatorio: Usa l’interruttore per determinare se gli utenti devono compilare questo campo per inviare il modulo.
  • Larghezza colonna: Imposta quanto spazio occuperà il campo. Questo può essere usato per campi in cui ti aspetti risposte brevi o se vuoi che più campi appaiano su una riga. Ad esempio, se vuoi che due campi appaiano su una riga, assegna a ciascuno una larghezza del 50%.

Crea un campo vuoto per il tuo modulo.

Usa l’interruttore per Mostrare o Nascondere il nome del campo.

Usa l’interruttore per Mostrare o Nascondere se il campo è obbligatorio. La pratica standard è contrassegnare questi campi in modo che i visitatori sappiano che devono compilarli.

Larghezza colonna: Imposta la dimensione dell’area assegnata al pulsante. Questo influenzerà il posizionamento del pulsante.

Ad esempio, se la dimensione della tua colonna è del 100% e allinei il pulsante a destra, il pulsante sarà a destra. Tuttavia, se imposti una larghezza di colonna del 50% e allinei il pulsante a destra, apparirà al centro del modulo.

Il pulsante Invia invia le informazioni del modulo al proprietario del sito web. Viene aggiunto all’ultima pagina del modulo.

Se non vuoi etichettare il pulsante Invia, usa la casella di testo per inserire un’etichetta diversa.

Puoi aggiungere una piccola immagine al pulsante:

  • Per nessuna icona, clicca .
  • Per caricare la tua immagine .svg da usare come icona, clicca
  • Per selezionare un’icona dalla libreria, clicca sul simbolo dell’icona.

Assegna un ID al tuo pulsante in modo da poterlo identificare in seguito. Questo spesso aiuterà nell’elaborazione delle informazioni che raccogli.

Imposta su Sì se vuoi mostrare ai visitatori una pagina diversa dopo che hanno inviato un modulo. La pagina potrebbe contenere un semplice ringraziamento o includere informazioni aggiuntive come: “Ti ricontatteremo entro 48 ore.”

Se imposti su Sì, dovrai aggiungere l’URL della pagina.

Quando un visitatore invia un modulo, puoi ricevere gli invii come email. Usa questa sezione per definire queste email.

  • A: L’indirizzo email a cui verranno ricevuti gli invii.
  • Oggetto: La riga dell’oggetto dell’email che verrà inviata all’indirizzo email nell’impostazione A.
  • Messaggio: Qualsiasi testo e informazione del modulo che verrà inviata nell’email. L’impostazione predefinita è [all-fields], include tutte le informazioni del modulo nell’email.
  • Email del mittente: Aggiungi l’email da cui verrà inviata l’email.
  • Nome del mittente: Determina con quale nome verrà inviata l’email. Questo potrebbe aiutarti a filtrare queste email in seguito.
  • Rispondi a: Modifica questo indirizzo email se vuoi rispondere a queste email e far sì che queste risposte vengano inviate a un indirizzo diverso.
  • Cc: Invia una copia di queste email a un altro indirizzo.
  • Ccn: Invia una copia nascosta di queste email a un altro indirizzo.
  • Metadati: Per impostazione predefinita, le email inviate dal modulo includono metadati come Ora, Data, URL della pagina, User Agent (informazioni sul browser), IP remoto (indirizzo IP della persona che invia il modulo), Credito (il software che ha creato il modulo).
  • Invia come: Usa il menu a discesa per determinare se l’email inviata dal modulo è in formato HTML o testo semplice.

Solo per gli utenti di Elementor Pro.

Imposta su Attivo per attivare la funzione di invio dei moduli. Questa funzione ti consente di accedere agli invii dei moduli da WP Admin>Elementor>Invii.

Il codice personalizzato a volte può richiedere di assegnare un ID al tuo modulo.

Assicurati che il tuo ID modulo sia unico.

In generale, i browser hanno già messaggi integrati per gli invii di moduli che indicano successo o errori del modulo.

Impostare Messaggi personalizzati su Sì ti permette di creare i tuoi messaggi che verranno visualizzati nel caso in cui il browser del visitatore non fornisca questi messaggi o i messaggi non vengano visualizzati per qualche motivo.

Scheda Stile

Determina l’aspetto e la sensazione degli elementi del menu e dei controlli.

Determina se l’intestazione e la descrizione appariranno a destra, a sinistra o al centro del modulo.

Controlla l’aspetto dell’Intestazione.

Controlla l’aspetto dell’Intestazione.

Controlla il layout del tuo modulo.

  • Spaziatura colonne: Se il tuo modulo ha più di una colonna, usa il cursore per impostare lo spazio tra le colonne. Questo si verifica quando c’è più di un campo in una riga.
  • Spaziatura righe: Usa il cursore per aumentare e diminuire lo spazio tra i campi.

Controlla l’aspetto delle etichette del modulo.

  • Spaziatura: Imposta la distanza tra l’etichetta e il campo.
  • Colore testo: Determina il colore del nome del campo. Per maggiori dettagli, vedi Scegli un colore o Usa font e colori globali.
  • Tipografia: Determina il font e la dimensione del nome del campo.

    Per maggiori dettagli, vedi Tipografia.

Questa sezione determina l’aspetto dei campi del modulo. Include il testo segnaposto, il bordo del campo e altro.

  • Colore testo: Imposta il colore del testo segnaposto. Per maggiori dettagli, vedi Scegli un colore o Usa font e colori globali.
  • Tipografia: Imposta la dimensione e il tipo di font del testo segnaposto. Per maggiori dettagli, vedi Tipografia.
  • Colore sfondo: Imposta il colore della casella del campo.
  • Per maggiori dettagli, vedi Scegli un colore o Usa font e colori globali.
  • Bordo: Imposta su Sì se vuoi un bordo attorno al campo.
  • Colore bordo: Imposta un colore per il bordo del campo. Per maggiori dettagli, vedi Scegli un colore o Usa font e colori globali.
  • Spessore bordo: Delinea il campo con un bordo.
  • Forma: Seleziona una forma del bordo dal menu a discesa:
    • Arrotondato: I pulsanti appaiono con angoli smussati.
    • Arrotondato: I pulsanti appaiono con bordi uniformemente curvi.
    • Netto: Pulsanti rettangolari.

Usa il menu a discesa per selezionare:

  • Pulsante: Apparirà come un pulsante standard.
  • Link: Apparirà come testo.

Imposta la dimensione e il tipo di font per tutti i pulsanti nel modulo.

Puoi far cambiare il pulsante quando gli utenti muovono il mouse:

  • Normale: Come appare per impostazione predefinita.
  • Hover: Come appare il pulsante quando i visitatori ci passano sopra con il mouse. La modalità hover ti permette di impostare una durata di transizione. Questa è la quantità di tempo necessaria al pulsante per cambiare il suo aspetto.

Di seguito le caratteristiche che possono cambiare:

Aggiungi un bordo al tuo pulsante. Se aggiungi un bordo, puoi anche impostare:

Scegli una delle seguenti opzioni:

  • Arrotondato: I pulsanti appaiono con angoli smussati.
  • Arrotondato: I pulsanti appaiono con bordi uniformemente curvi.
  • Netto: Pulsanti rettangolari.

Determina la spaziatura tra il bordo del pulsante e il testo. Per maggiori dettagli, vedi Spaziatura interna e margini.

La sezione Messaggi controlla lo stile di tutti i messaggi mostrati ai visitatori dopo l’invio di un modulo:

  • Tipografia: Determina la dimensione e il tipo di carattere utilizzato nel messaggio.
  • Colore messaggio di successo: Imposta il colore del messaggio se il modulo del visitatore è stato inviato al proprietario del sito web. Per maggiori dettagli, vedi Scegli un colore o Usa caratteri e colori globali.
  • Colore messaggio di errore: Imposta il colore del messaggio se il modulo del visitatore non è stato inviato al proprietario del sito web. Per maggiori dettagli, vedi Scegli un colore o Usa caratteri e colori globali.
  • Colore messaggio in linea: Questo è rilevante solo se hai scelto di visualizzare messaggi personalizzati. Alcuni messaggi personalizzati appaiono all’interno del modulo stesso, questi sono chiamati messaggi in linea e questa impostazione ne determina il colore.

Aggiungi uno sfondo al tuo modulo. Per dettagli, vedi Crea uno sfondo.

Usa lo slider per determinare la larghezza del modulo.

Crea spazio tra il contenuto del modulo e i bordi del modulo. Per dettagli, vedi Spaziatura interna e margini.

Scheda Avanzate

Controlla il posizionamento del tuo widget, inserisci link, aggiungi codice personalizzato e altro ancora.

Scopri di più sulle impostazioni della scheda Avanzate.

In questa pagina

Condividi questo articolo

Hosted with