Quando si ha un sito web aziendale, i form sono un punto fermo. Rendono più facile per i clienti entrare in contatto con voi e fornire informazioni e feedback importanti. Tuttavia, creare moduli può essere impegnativo.
Se state cercando una strategia semplice e diretta, vi consigliamo di usare i form di Elementor. Il popolare page builder fornisce soluzioni per costruire form che sono sia esteticamente piacevoli che facili da usare.
In questo articolo, inizieremo discutendo il motivo per cui potreste voler creare i form di Elementor. Poi vi spiegheremo come fare e presenteremo alcuni utili add-on e suggerimenti per la risoluzione dei problemi. Cominciamo!
Perché Creare Form con Elementor
Ci sono molti vantaggi nel creare form per il vostro sito WordPress. Per cominciare, potete fornire alle persone che lo visitano un metodo rapido e semplice per comunicare con voi. Inoltre, potete usarli per generare lead e acquisire informazioni importanti dal vostro pubblico.
I form possono anche essere strumenti utili per far registrare i vostri utenti e accettare pagamenti. Tuttavia, se volete aggiungere un modulo al vostro sito WordPress, dovrete usare un plugin. In alternativa, è possibile utilizzare un page builder come Elementor.
Elementor vi permette di costruire form stupefacenti senza toccare una riga di codice. Potete usare l’editor drag-and-drop per creare form reattivi che corrispondono al vostro branding e all’estetica del sito.
Potete anche scegliere tra multipli tipi di form, tra cui:
- Elementor Contact Forms: potete usare questa funzione per costruire un semplice modulo in modo che gli utenti possano mettersi in contatto con voi.
- Elementor Gravity Forms: è un widget Gravity Forms che vi dà più flessibilità in termini di personalizzazione e stile dei form.
- Elementor Register Forms: questa funzione vi permette di impostare form di registrazione utenti sul vostro sito web.
Come potete vedere, ognuno di questi form ha il suo caso d’uso specifico e può aiutare a migliorare la funzionalità del vostro sito. Successivamente, vi mostreremo come costruire un modulo di contatto con Elementor.
Come Creare un Modulo di Contatto Elementor in WordPress (in 6 Passaggi)
Ora che abbiamo capito meglio perché potreste voler usare i form di Elementor, diamo un’occhiata a come potete crearne uno in pochi semplici passi. Per questo tutorial, assumiamo che abbiate già Elementor installato e attivato sul vostro sito web.
Esiste sia uno strumento gratuito che un plugin a pagamento. Per accedere alle funzioni del modulo, avrete bisogno della versione premium.
Passo 1: Aggiungere il Widget di Contatto di Elementor
Per iniziare, andate alla pagina o all’articolo dove volete inserire il vostro modulo di contatto. Poi fate clic sul pulsante Modifica con Elementor nella parte superiore dello schermo:
Questo lancerà l’interfaccia dell’editor di Elementor. Dai widget sulla sinistra, cercate e selezionate il widget Modulo:
Poi potete trascinare e rilasciare il widget sulla vostra pagina. Questo inserirà un modulo di contatto standard.
Passo 2: Impostare i Campi del Modulo di Contatto
Una volta posizionato il modulo di contatto sulla pagina, ci sono una manciata di impostazioni da configurare. Per ora, concentriamoci sull’impostazione dei campi del modulo.
Potete modificare i campi base del modulo facendo clic sul widget e personalizzando il testo (se volete cambiare una delle opzioni predefinite). Se volete aggiungere altri campi, potete farlo selezionando Aggiungi elemento:
Potete selezionare il tipo di campo che volete aggiungere dall’elenco a discesa. Poi potete aggiungere un’etichetta, che è il nome del campo del modulo. Questo mostra alle persone che visitano il sito quale input è previsto.
Per l’opzione Placeholder, potete personalizzare il testo che appare nel campo del modulo prima che l’utente inserisca le sue informazioni. Potete usarlo per dare ai visitatori esempi dei dati che volete che forniscano.
Inoltre, potete scegliere di abilitare l’impostazione Richiesta e modificare la larghezza della colonna. Potete anche fare clic sul pannello Pulsanti per personalizzare l’aspetto dei pulsanti del vostro modulo. Potete cambiare le dimensioni così come il carattere e i colori.
Passo 3: Configurare gli Invii di Form
Dopo aver finito di creare i campi del modulo, il passo successivo è quello di configurare le impostazioni di invio del modulo. Potete navigare su Email nell’editor di Elementor per accedere alle numerose opzioni.
Per esempio, potete inserire il vostro indirizzo email nel campo A dove volete che siano consegnati gli invii. Potete inserire più indirizzi email se lo desiderate:
Potete anche personalizzare l’oggetto dell’email e il messaggio. Quando avete finito di configurare tutte le opzioni, assicuratevi di salvare le modifiche.
Passo 4: Personalizzare i Testi del Modulo di Contatto
Se volete personalizzare ulteriormente il vostro modulo di contatto, potete farlo abilitando i testi personalizzati. Selezionate Opzioni aggiuntive, quindi spostare l’interruttore di Messaggio personalizzato sul Sì:
Ci sono quattro tipi di messaggi che potete modificare:
- Messaggio di successo: appare quando un utente invia il modulo
- Messaggio di errore: apparirà se c’è un problema durante il processo di invio
- Messaggio obbligatorio: per informare gli utenti che un particolare campo non è stato completato
- Messaggio non valido: per far sapere agli utenti che qualcosa nell’invio del modulo non va
Potete personalizzare questi messaggi per abbinare la voce e lo stile del vostro brand. Per esempio, potete modificare il testo per aggiungere un po’ di personalità.
Passo 5: Dare uno Stile al Modulo di Contatto Elementor
Una volta che avete rivisto i testi e i campi base del vostro modulo, potete iniziare a personalizzare il design del vostro modulo di contatto Elementor. Per esempio, potreste voler fare in modo che corrisponda al vostro brand.
Per iniziare, potete fare clic sulla scheda Stile in alto nell’editor dei widget:
Qui troverete una grande varietà di opzioni e impostazioni che potete usare per personalizzare il design del vostro modulo di contatto. Per esempio, potete regolare la spaziatura e il padding, così come cambiare i colori, le dimensioni, le etichette e i pulsanti.
Passo 6: Salvare e Pubblicare il Modulo
Quando l’aspetto e il contenuto del vostro modulo di contatto Elementor vi soddisfano, l’unica cosa che resta da fare è salvarlo e pubblicarlo. Potete farlo selezionando il pulsante Pubblica in basso a sinistra dello schermo.
Questo è tutto! Poi potete vedere in anteprima il vostro modulo di contatto sul front-end per confermare che l’aspetto sia proprio quello che volete.
Migliori Add-on per i Form Elementor
Di base, il page builder di Elementor include un sacco di opzioni per costruire form per il vostro sito WordPress. Tuttavia, potreste anche considerare l’aggiunta di plugin per aiutare a estendere la funzionalità dei vostri form. Diamo un’occhiata ad alcune opzioni.
Master Addons for Elementor
Il plugin Master Addons for Elementor è uno strumento freemium che offre una collezione di strumenti utili per migliorare il page builder e, a sua volta, il vostro sito web. Include le seguenti caratteristiche:
- Costruttore di header, footer e modulo di commento
- Costruttore Mega Menu
- Effetti hover delle immagini
- Condizioni di visualizzazione
È anche compatibile con un’ampia varietà di plugin di form. Questo include Contact Form 7, Ninja Forms, WP Forms e Caldera Forms. Per accedere a tutte le caratteristiche del plugin, è necessario acquistare la versione pro, che è disponibile per 39 dollari all’anno.
The Plus Addons
Un altro strumento utile che potete usare con Elementor è The Plus Addons. Questo plugin contiene oltre 8.000 opzioni di personalizzazione e oltre 300 blocchi di interfaccia utente (UI) che possono aiutarvi a creare e progettare le vostre pagine e form con facilità.
Le sue caratteristiche includono:
- Box di icone
- Sezioni della mappa
- Form
- Tabelle dei prezzi
Ci sono anche più di 18 modelli tra cui scegliere. Questi sono stati progettati specificamente per alcuni tipi di attività, tra cui agenzie, ristoranti, saloni e altro.
È disponibile una versione gratuita. Tuttavia, per sfruttare l’intera suite di funzioni utili, vi consigliamo di acquistare una licenza premium per 39 dollari all’anno.
Altri Suggerimenti e Trucchi per Creare Form di Elementor
Se volete creare form di contatto Elementor per il vostro sito WordPress senza pagare una licenza premium, ci sono diversi modi per farlo. Ciò richiederà di accoppiare il page builder con un altro plugin per form WordPress, come WPForms o Formidable Forms.
Diciamo che optate per Formidable Forms. Una volta installato e attivato il plugin sul vostro sito, potete navigare su Formidable > Forms > Add New:
Successivamente, selezionate Contact Form dall’elenco delle opzioni, e scegliete tra i modelli predefiniti. Quando avete finito di costruire il vostro modulo, andate alla pagina in cui volete inserirlo e lanciate l’interfaccia dell’editor di Elementor.
Dal pannello di sinistra, cercate e selezionate il widget Formidable Forms. Potete regolare il formato, i colori, i pulsanti, il testo, ecc:
Quando avete finito, potete salvare e pubblicare le vostre modifiche. Questo metodo richiede un po’ più di tempo e sforzo di quanto sarebbe necessario con il plugin Elementor Pro. Tuttavia, può aiutarvi a risparmiare un po’ di soldi se non volete acquistare un piano premium.
Risoluzione dei Problemi con i Form Elementor
I form di contatto di Elementor sono abbastanza semplici e facili da usare. Tuttavia, potreste incorrere in problemi quando lo usate. Uno dei problemi più comuni che le persone riportano sono le email non consegnate.
Elementor usa la funzione wp_mail per distribuire le sue email. Questo significa che il vostro hosting provider prende l’email inviata e la distribuisce.
Tuttavia, alcuni host disabilitano la funzione PHP che è tipicamente utilizzata per l’invio di email, motivo per cui questo problema può verificarsi. Per risolvere questo errore, vi consigliamo di mettervi in contatto con il vostro fornitore di hosting e chiedere di abilitare la funzione send_mail.
In alternativa, potete usare un server SMTP (Simple Mail Transfer Protocol). Questo è un server di posta elettronica che instrada le vostre email in form alla casella di posta dei vostri clienti, usando una fonte esterna come Gmail. Questo può ridurre le possibilità che le vostre email finiscano nelle cartelle di spam. Per impostare SMTP, potete usare un plugin come WP MAIL SMTP.
Riepilogo
I form giocano un ruolo fondamentale nei siti web. Permettono ai clienti di mettersi in contatto con voi, registrare un account, inviare informazioni di pagamento e molto altro. Tuttavia, capire come progettare form esteticamente piacevoli per il vostro sito può essere impegnativo. Per fortuna Elementor semplifica le cose.
Una volta aggiunto il widget del modulo di Elementor alla vostra pagina, potete impostare i vostri campi e configurare le impostazioni del modulo. Potete anche personalizzare il design del vostro modulo in modo che si allinei con il vostro brand.
Avete qualche domanda sulla creazione di form Elementor in WordPress? Fatecelo sapere nella sezione commenti qui sotto!
Salman Ravoof é uno sviluppatore web autodidatta, uno scrittore, un creatore e un grande ammiratore del Free and Open Source Software (FOSS). Oltre alla tecnologia, è appassionato di scienza, filosofia, fotografia, arte, gatti e cibo. Per saperne di più su di lui, visitate il suo sito web o contattate Salman su X.
Lascia un commento