Vuoi sapere come creare un file modulo di contatto in Elementor?

La pagina dei contatti è una delle pagine cruciali di un sito web. Viene spesso utilizzato come parametro per l'approvazione o meno di un sito Web. Elementor viene fornito con un widget nativo, il widget Modulo, che consente di aggiungere un modulo a una pagina. Questo articolo ti mostrerà come.

Il widget Modulo stesso è disponibile solo su Elementor Pro. Ciò significa che devi eseguire l'upgrade alla versione pro se stai ancora utilizzando la versione gratuita. Non solo puoi utilizzare il widget Modulo per creare un file modulo di contatto, ma puoi anche usarlo per creare altri tipi di moduli tra cui modulo di registrazione e-mail, modulo di registrazione utente, il modulo di caricamento del fileEcc. ...

Come creare un modulo di contatto in Elementor

Quando crei un modulo di contatto Utilizzando il widget Modulo di Elementor, puoi impostare la posizione in cui verranno inviati i dati del modulo. Sia nel tuo account e-mail che nel gestore di invio moduli predefinito di Elementor.

In questo articolo, passeremo direttamente all'aggiunta del widget Modulo alla casella di modifica di Elementor. Basta aggiungere il widget Modulo dal pannello del widget alla casella di modifica come segue:

Come puoi vedere, il widget Modulo crea automaticamente un modulo composto da tre campi.

Leggi anche: Come aggiungere una griglia dei prezzi in Elementor

Per modificare un campo esistente, puoi semplicemente aprirlo. Puoi modificare il tipo di campo, sovrascrivere l'etichetta e il segnaposto predefiniti e impostarlo come campo obbligatorio, se lo desideri.

Per eliminare un campo esistente, puoi semplicemente fare clic su X del campo che si desidera eliminare.

Per aggiungere un nuovo campo, puoi semplicemente fare clic sul pulsante AGGIUNGI UN ELEMENTO. Il widget Modulo stesso supporta venti tipi di campi.

Definizione dell'azione del modulo

Come accennato in precedenza, puoi inviare i dati del modulo (invii) al tuo account di posta elettronica o all'invio del modulo integrato di Elementor. Per impostare la destinazione, puoi aprire il blocco Dopo l'invio delle azioni sotto la scheda Contenuto dal pannello delle impostazioni.

Vedi anche: Come creare un'immagine arrotondata in Elementor

Seleziona un'azione che desideri definire nel campo disponibile (puoi aggiungere più azioni). In questo esempio, selezioniamo E-mail.

Se imposti anche l'azione del modulo in posta elettronica, puoi aprire il blocco E-mail per definire l'indirizzo e-mail per la ricezione dei dati del modulo. Come puoi vedere, puoi anche impostare il soggetto se lo desideri.

Per impostazione predefinita, Elementor include il contenuto di tutti i campi del modulo. Se desideri includere solo il contenuto di campi specifici, puoi incollare gli shortcode dei tuoi campi preferiti nel campo. Messaggio.

Ad esempio, l'impostazione di seguito invierà solo il contenuto del campo del messaggio.

Per ottenere lo shortcode di un campo, puoi fare clic sulla scheda AVANZATE nel campo associato del blocco Campi modulo.

Definizione di messaggi

Quando i dati del modulo vengono inviati correttamente, i tuoi visitatori vedranno un messaggio di successo sotto il modulo. Allo stesso modo, vedranno anche un messaggio di errore quando i dati del modulo non vengono inviati.

Vedi anche: Come creare una sezione per i membri del team con Elementor

Puoi sovrascrivere questi messaggi predefiniti, così come altri due messaggi, dal blocco Opzioni aggiuntive sotto la scheda Contenuto dal pannello delle impostazioni. Attiva il Messaggi personalizzati per sovrascrivere i messaggi predefiniti.

Come creare un modulo di contatto in Elementor

Personalizzazione del modulo

Una volta terminate le impostazioni di base in la scheda Contenuto dal pannello delle impostazioni, puoi passare al Style per personalizzare il modulo. Ci sono cinque blocchi che puoi aprire qui.

  • Modulo

Puoi aprire questo blocco per definire lo spazio tra le colonne e le righe del modulo, la spaziatura dell'etichetta, la tipografia (famiglia del carattere, dimensione del carattere, stile del carattere, ecc.) dell'etichetta del modulo e il colore del testo di quest'ultimo.

  • Settore

Puoi aprire questo blocco per definire la tipografia del testo del campo, nonché il colore, il colore di sfondo dei campi del modulo, la dimensione, il colore del bordo e il raggio del bordo dei campi del modulo.

  • Bottoni

Puoi aprire questo blocco per personalizzare il pulsante di invio. Puoi impostare cose come la tipografia del testo del pulsante, nonché il colore, il colore di sfondo, il raggio del bordo, la dimensione del bordo, il colore del bordo e il riempimento del testo. Per impostare la dimensione del pulsante, puoi farlo dal blocco pulsanti sous la scheda Contenuto.

  • Messaggi

Puoi aprire questo blocco per definire la tipografia e il colore del testo dei messaggi.

  • Passi

Puoi aprire questo blocco solo se desideri creare un modulo a più passaggi.

Una volta che hai finito di personalizzare il modulo, così come la pagina, puoi pubblicare la tua pagina.

Potenziale errore

Uno degli errori più comuni quando si imposta l'azione del modulo su E-mail è che il modulo non viene inviato. Invece, vedrai il seguente messaggio.

Come creare un modulo di contatto in Elementor

Elementor e la maggior parte dei plug-in per i moduli di contatto, incluso Contact Form 7, utilizzano la funzione di consegna della posta predefinita di WordPress chiamata wp_mail. Questa funzione dipende dalla funzione inviare una mail che dipende da PHP per funzionare.

Leggi anche: Come aggiungere uno slider di testimonianze in Elementor

Sfortunatamente, tutti i fornitori diweb hosting non attivare la funzione inviare una mail di PHP. In caso affermativo, il modulo non verrà inviato. Invece, riceverai un messaggio di errore come quello sopra.

Per risolvere il problema, puoi installare e configurare un servizio di consegna della posta personalizzato sul tuo WordPress. In alternativa, se possibile, puoi chiedere al tuo provider di hosting di abilitare la funzione inviare una mail di PHP.

Alla fine

Elementor è uno dei plugin per la creazione di pagine più completi. Viene fornito con una serie di elementi di design (chiamati widget) per aggiungere facilmente elementi alla pagina, incluso un modulo di contatto.

Sebbene tu possa utilizzare il widget Modulo per creare un modulo di contatto da zero con il tuo design, Elementor offre anche modelli di modulo che puoi utilizzare. Puoi persino creare una pagina di contatto (completo di modulo di contatto, ovviamente) da un modello.

Ottieni Elementor Pro ora!

Conclusione

Ecco ! Questo è tutto per questo articolo che mostra come creare un modulo di contatto in Elementor. Se hai dubbi su come arrivarci ffacci sapere in commentaires.

Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.

...