Crea e progetta moduli con il widget Modulo Elementor

Ogni sito web deve includere un modulo di contatto! I moduli di contatto sono utili per una varietà di scopi, indipendentemente dal tipo di sito web che possiedi. Possono generare lead, creare connessioni e relazioni, consentire agli utenti di segnalare problemi con il tuo sito e tutto il resto.

Non è necessario essere un esperto tecnico per creare moduli di contatto in WordPress. Il generatore di pagine Elementor rende più semplice che mai la creazione di bellissimi siti Web.

Per dimostrare come creare moduli di contatto con Elementor, esamineremo le diverse opzioni e tutto ciò che c'è da sapere sui moduli di contatto in Elementor.

Elementor include un widget Modulo ormai da un po' di tempo, il che significa che non avrai più bisogno di andare da nessun'altra parte per creare moduli per il tuo sito Web WordPress, il che è una benedizione!

In passato potresti aver riscontrato difficoltà durante la creazione di moduli con alcuni dei plugin disponibili. Il processo di progettazione e configurazione dei moduli può richiedere molto tempo ed essere frustrante. Fortunatamente per tutti noi, è semplice lavorare con il widget Elementor Form.

Prima di iniziare con il generatore di moduli Elementor, diamo una rapida occhiata ad alcune delle sue funzionalità più essenziali.

Una delle caratteristiche più distintive, per cominciare, è che è completamente integrato nell'interfaccia di Elementor, il che significa che hai accesso a molte opzioni di design/stile/layout disponibili in Elementor. Non credo che troverai un plugin per moduli autonomo con un sistema di progettazione robusto come questo.

Da lì puoi creare fino a 18 diversi tipi di campi:

  • Testo Email Area di testo Area di testo
  • L'URL e il numero di telefono sono i seguenti:
  • I pulsanti di opzione sono un tipo di pulsante di opzione.
  • Scegli da un elenco (a discesa)
  • Le caselle di controllo vengono utilizzate nelle liste di controllo.
  • C'è solo una casella di controllo (accettazione)
  • reCAPTCHA
  • Gli honeypot sono un tipo di contenitore che contiene il miele (previene lo spam)

Puoi anche dividere i moduli in più pagine per creare moduli in più passaggi, utili per le applicazioni di lunga durata.

Elementor Pro ha oltre 12 integrazioni con i più diffusi servizi di email marketing e sistemi di gestione delle relazioni con i clienti per aiutarti a ottenere il massimo dai tuoi moduli. Esiste anche un'integrazione generica di Zapier che ti consente di connetterti a uno qualsiasi delle migliaia di strumenti disponibili sulla piattaforma Zapier se il tuo strumento non è elencato.

Ci sono anche alcune altre alternative interessanti. Ad amp , quando qualcuno compila il tuo modulo, puoi ricevere notifiche tramite Slack o Discord.

A proposito di notifiche, puoi anche personalizzare le notifiche e-mail che ricevi e le notifiche e-mail ricevute dagli autori dei moduli. Dopo aver inviato il modulo, puoi reindirizzarli a una pagina di ringraziamento personalizzata creata da te.

Qual è il modo migliore per creare un modulo in Elementor?

Inizieremo aprendo l'editor di Elementor e quindi trascinando e rilasciando il widget del modulo nella posizione in cui vogliamo creare il nostro modulo.

Come creare un modulo Elementor

Come tutto il resto in Elementor, il processo di creazione dei moduli viene eseguito visivamente. Non è necessario utilizzare un plugin aggiuntivo, né è essenziale che funga da backend del tuo sito web.

Formare elementi Elementor in modo strutturato

Una volta creato il modulo, il primo passo è organizzare le informazioni in esso contenute. Quali campi sono necessari e che tipi di campi dovrebbero essere? Che cosa sta cercando?

Quando si lavora nell'editor di Elementor, i campi del modulo vengono aggiunti e modificati dalla scheda Contenuto. Come puoi vedere amp seguente, i moduli includono alcuni campi predefiniti. Selezionando Aggiungi elemento dal menu a discesa, puoi creare nuovi campi.

È possibile duplicare un Campo anche selezionando l'icona che raffigura due documenti, uno di fronte all'altro, e cliccandoci sopra. 

Tipi di campi in un modulo

Sono disponibili molti tipi di campi modulo, dai semplici campi di testo ai campi password, ReCaptcha e honeypot.

Per modificare il comportamento di un campo modulo, seleziona innanzitutto il campo e poi seleziona il menu a discesa Tipo per visualizzare i vari tipi di campo disponibili.

Tipi di campi in un modulo Elementor

Larghezza di una colonna del modulo

Questa funzionalità ti consente di utilizzare due campi modulo sulla stessa riga regolando l'impostazione Larghezza colonna. Modificare la larghezza della finestra selezionandola dal selettore a discesa e selezionando 50%. Vale la pena notare che se lo fai con due campi modulo consecutivi, noterai che appaiono insieme sulla stessa riga.

Moduli in Elementor per lo styling

Dai stile ai tuoi moduli in Elementor nello stesso modo in cui stili gli altri widget accedendo al pannello Stile situato nell'interfaccia di modifica di Elementor.

È possibile personalizzare il modulo stesso, i campi, i pulsanti, eventuali passaggi, i messaggi di errore e i messaggi di conferma.

Per coloro che hanno già familiarità con Elementor, non c'è molto altro da imparare sullo styling di Elementor Forms.

Azioni su un modulo

Dopo la nostra discussione sulla creazione di un modulo in Elementor, diamo un'occhiata alla configurazione di cosa succede dopo l'invio del modulo; ciò avviene tramite le azioni del modulo o, come indicato in Elementor, Azioni dopo l'invio.

Quando viene inviato un modulo, è normale che il sistema invii un'e-mail e reindirizzi l'utente a una pagina Web diversa. Ovviamente puoi includere tutte le azioni che desideri nei tuoi moduli e combinarle nel modo che preferisci. Come ci si potrebbe aspettare, esiste un campo di selezione specifico senza alcuna codifica coinvolta.

Ciascuna delle azioni aggiunte verrà visualizzata come un'opzione di scheda separata nel menu principale. Al momento disponiamo di un'opzione di scheda per E-mail, ma se dovessi includere un reindirizzamento nel campo Aggiungi azione, vedrei anche Reindirizzamento nelle opzioni della scheda, come mostrato amp seguente.

Per concludere, dimostrerò come configurare il modulo per accettare invii tramite e-mail, la domanda più frequente sui moduli.

Quando selezioni Email dalla scheda Contenuto nell'editor, ti verrà presentata la schermata mostrata di seguito; qui è dove puoi personalizzare l'e-mail di provenienza e l'e-mail di risposta e puoi anche aggiungere un CC o BCC a chiunque debba ricevere una copia degli invii dal modulo.

Creazione di un modello di messaggistica del modulo di contatto in Elementor

Molte persone sono sorprese nell'apprendere che l'editor di moduli di Elementor è più potente di quanto sembri a prima vista e una delle funzionalità più avanzate è la possibilità di personalizzare la messaggistica per ciascun modulo.

È possibile personalizzare i messaggi del modulo per fornire un processo di feedback più personalizzato all'utente finale che ha compilato il modulo, anziché sembrare un noioso robot. Ma, nello specifico, quali messaggi puoi personalizzare per il tuo modulo di contatto Elementor sono i seguenti:

Per iniziare, devi prima abilitare la messaggistica personalizzata selezionando "Opzioni aggiuntive" dal menu a discesa e quindi spostando l'interruttore per "Messaggistica personalizzata" su "Sì".

Personalizzazione del widget del modulo di contatto Elementor aggiungendo messaggi personalizzati

Come puoi vedere, ci sono quattro diversi messaggi che puoi personalizzare, inclusi quelli elencati di seguito:

Un messaggio di successo viene visualizzato all'utente finale dopo aver inviato il modulo e verificato che il modulo sia stato compilato correttamente (ad esempio, nessun campo obbligatorio mancante, ecc.).

Messaggio di errore: un messaggio che viene visualizzato all'utente finale quando si verifica un errore sconosciuto durante l'invio del modulo.

Messaggio obbligatorio: viene visualizzato quando un campo del modulo obbligatorio non è compilato, il modulo viene inviato e il modulo non è completato.

Quando qualcosa all'interno del modulo inviato non è corretto e non può essere inviato, all'utente finale viene visualizzato il messaggio Messaggio non valido.

Essere in grado di modificare i messaggi ti consente di essere creativo e eccentrico, o più formale e professionale se gestisci un sito aziendale. La parte migliore è che sono completamente modificabili, quindi puoi fare quello che vuoi!

Conclusione

Widget del modulo Elementor, è semplice costruire un modulo di contatto. Viene fornito con un intuitivo generatore di moduli di contatto drag-and-drop e una miriade di opzioni di personalizzazione che lo distinguono dagli altri plugin di moduli di contatto disponibili sul mercato. Puoi personalizzarne facilmente lo stile e la combinazione di colori per adattarli all'aspetto della tua azienda. Sono inclusi anche vari altri widget interessanti, oltre 300 modelli professionali e un generatore di pop-up in un unico comodo pacchetto. Questo generatore di pagine WordPress completo di tutte le funzionalità è costituito da tutti i widget e le funzionalità necessarie, quindi non dovrai acquistare generatori di pagine aggiuntivi per personalizzare ulteriormente il tuo sito web. Inoltre, consente l'integrazione di oltre 30 servizi di marketing, motivo per cui è uno dei plugin più acquistati oggi sul mercato.

Hanson F.

messaggi recenti

Come utilizzare intestazioni e piè di pagina con Elementor

Le intestazioni e i piè di pagina di un sito Web sono elementi essenziali. Nella maggior parte dei casi, l'intestazione fornisce la navigazione...

6 gennaio 2022

Confronto dei temi WordPress: Astra vs OceanWP

Due dei temi WordPress più popolari sul mercato sono Astra e OceanWP. Professionale…

2 gennaio 2022

Confronto dei temi delle notizie WordPress: giornali vs. Astra

Per creare un eccellente sito Web di notizie non è necessario che tu diventi un web designer. Noi…

25 ottobre 2021

Crea un sito Web relativo alle notizie con il tema del giornale

Il tema Giornale è uno dei temi WordPress più significativi progettati da tagDiv, un...

18 ottobre 2021

Come costruire un eCommerce con il builder Avada WooCommerce

Quando si tratta di creare un negozio online, WooCommerce è il plugin di riferimento. Esso…

4 ottobre 2021

Come utilizzare l'intestazione fissa e gli effetti di scorrimento con Elementor

Un'intestazione è generalmente la prima cosa che una persona vede quando visita il tuo sito web,...

21 settembre 2021