Nelle lezioni precedenti abbiamo visto la creazione di un template generale per le pagine. Successivamente abbiamo parlato di come impostare la pagina Chi siamo e la pagina Servizi.
In questa lezione parleremo di un’altra immancabile sezione per qualsiasi sito web. Nello specifico vedremo come creare la pagina Contatti con Elementor, il popolare page builder del CMS WordPress.
In questa pagina andremo a includere anche il classico form o modulo di contatto; per questo, se non l’hai ancora fatto, ti consiglio di acquistare subito la versione Pro di Elementor.
Tabella dei Contenuti
Perché la pagina Contatti è importante
La pagina dei Contatti è una di quelle pagine che spesso viene trascurata in un sito web. La realtà è che rappresenta una delle pagine più importanti.
È lì che i visitatori possono trovare tutte le informazioni necessarie per entrare in contatto con il proprietario del sito o con il team di supporto.
La pagina dei Contatti dovrebbe includere almeno un numero di telefono, l’indirizzo email, l’indirizzo fisico (con eventuale mappa), i canali social e, preferibilmente, un modulo di contatto che i visitatori possono compilare direttamente dal sito.
Una buona pagina dei Contatti può aiutare a creare un senso di fiducia e di professionalità. Un sito web che non include alcuna informazione di contatto al suo interno, ispira davvero poca fiducia agli utenti, soprattutto se offre la vendita di prodotti o servizi online.
Inoltre, la pagina Contatti rappresenta un’opportunità per i visitatori di fare domande o di fornire feedback sul sito. Questo potrebbe essere di grande aiuto per migliorare l’esperienza dell’utente.
In poche parole, possiamo dire che…
La pagina dei Contatti è indispensabile perché fornisce un modo per entrare in contatto con i visitatori del sito e per creare una relazione di fiducia con loro.
Come creare la pagina Contatti
Le opzioni di impaginazione della sezione Contatti, come del resto di qualsiasi altra pagina, possono essere molteplici. È sempre bene non trascurare la progettazione del layout, in modo da arrivare alla fase di realizzazione con le idee ben chiare.
In questo tutorial, vediamo come impostare una semplicissima pagina Contatti che contenga almeno le informazioni di contatto essenziali.
Inserire le informazioni di contatto
Quindi, iniziamo a inserire una nuova sezione divisa in due colonne all’interno della pagina. Poi, aggiungiamo alcuni widget nella colonna di sinsitra:
- Logo sito (o immagine)
- Intestazione
- Lista icone
- Icone social
A questo punto, inseriamo i nostri contenuti e personalizziamo gli stili. Nell’intestazione, ad esempio, ho inserito il nome del sito web e modificato il tag HTML da H2 a div. Nella lista icone, ho abbinato le icone con le relative info di contatto, quindi indirizzo, telefono e indirizzo email. Ho aggiustato dimensioni di icone e font e aumentato la spaziatura delle righe. Infine ho personalizzato i collegamenti ai social media.
Inserire mappa Google in pagina Contatti
Nella colonna di destra, invece, andremo a inserire il widget Google Maps, per inserire la mappa con il nostro indirizzo.
L’utilizzo è molto semplice. Dopo aver inserito il widget, è sufficiente inserire l’indirizzo nel campo “Posizione” (nel pannello di modifica del widget, sotto Contenuto).
Per finire, ho personalizzato il design, aggiungendo un effetto ombra alla mappa e 50px di rientro a ciascuna colonna.
Creare modulo di contatto con Elementor
Abbiamo visto come inserire le informazioni base di contatto e la mappa di Google. Ora vediamo come completare la pagina con un bel form di contatto.
Per prima cosa, ho inserito un divisore per separare la sezione realizzata precedentemente.
Poi, in una nuova sezione ho inserito i seguenti widget:
- Intestazione
- Editor di testo
- Modulo
Il pannello di modifica del Modulo si compone, come per gli altri widget di Elementor, di tre sezioni o tab:
- Contenuto
- Stile
- Avanzato
Il contenuto del modulo contatto
Campi modulo e pulsanti
Alla voce Campi modulo (sotto Contenuto) si possono gestire i campi da prevedere nel form. È possibile inserire praticamente ogni tipologia di campo: dal semplice testo all’area di testo, dal checkbox all’accettazione, dalla data all’orario, dal caricamento di file al reCAPTCHA, ecc. È persino possibile suddividere la compilazione del modulo in più step.
Ciascun campo del modulo è personalizzabile con un nome “etichetta” e un nome “segnaposto”. L’Etichetta, che si può decidere anche di nascondere, è il nome che compare sopra il campo. Il Segnaposto, invece, è il nome o suggerimento che compare all’interno del campo stesso.
Inoltre, per ogni campo è possibile specificare se deve essere obbligatorio o meno (spunta “Richiesto”) e la larghezza del campo. Ad esempio, se volessi far apparire i campi “Nome” e “Cognome” sulla stessa riga, dovresti assegnare a ciascuno la larghezza del 50%.
Ricordati di utilizzare sempre il giusto tipo di campo. Ad esempio, per l’email dovresti usare il campo Email (non il campo Testo) e per il numero di telefono, il campo Tel.
Dopo la voce Campi modulo, troviamo la voce Pulsanti. Qui puoi stabilire la dimensione del pulsante (molto piccolo, piccolo, medio, grande, molto grande), la larghezza e l’allineamento (a sinistra, centrato, a destra o giustificato). Inoltre, puoi scegliere il nome del pulsante (di default è Invia) e aggiungergli un’icona.
Gestione dell’invio di email
Alla voce Azioni dopo l’invio, abbiamo la possibilità di aggiungere degli eventi da attivare una volta che l’utente ha inviato il modulo.
A meno che tu non abbia esigenze particolari, puoi anche non considerare queste impostazioni. Infatti, il modulo è già impostato automaticamente per la raccolta e l’invio di email. Ulteriori azioni possono essere, ad esempio, un reindirizzamento, l’apertura di un popup o il collegamento a una piattaforma DEM come Mailchimp.
Procedendo, troviamo il campo Email. Qui è possibile configurare l’indirizzo email in cui ricevere il messaggio inviato dal sito e tutte le impostazioni relative all’invio:
- Oggetto – l’oggetto dell’email
- Messaggio – i campi che formano il corpo dell’email (lasciare [all-fields] per includere tutti i campi)
- Da email – l’indirizzo che deve comparire come mittente
- Da nome – il nome del mittente
- Rispondi a – l’email a cui rispondere (solitamente qui si associa il campo email, così da rispondere direttamente a chi ha inviato il messaggio)
- Cc e Bcc – eventuali indirizzi email in copia conoscenza o in copia conoscenza nascosta
- Metadati – le informazioni aggiuntive da aggiungere in fondo all’email (ad esempio, data e ora dell’invio, URL della pagina, User Agent, ecc.)
Lo stile del modulo di contatto
Elementor Pro mette a disposizione numerose opzioni per stilizzare il modulo di contatto.
Infatti, possiamo decidere la distanza di righe e colonne, personalizzare le etichette e i campi HTML del nostro modulo.
Ciascun campo, poi, può essere personalizzato nella font, nel colore del testo, nello sfondo e nei bordi. Stessa cosa vale per i pulsanti, per i quali puoi anche definire l’effetto Hover (ovvero quando passi il cursore sopra il pulsante).
Infine, puoi scegliere font e colori dei messaggi di invio riuscito o di errore.
Il tab “Avanzato” contiene le opzioni di modifica comuni a tutti i widget (opzioni di layout, effetti movimento e trasformazione, sfondo, bordo, ecc.).
Proseguendo con il nostro tutorial, ecco il risultato finale dopo aver personalizzato contenuti e stili del modulo contatti.
Un modulo molto semplice ma pulito e, soprattutto funzionante!
Conclusioni
In questo tutorial abbiamo visto come creare la pagina Contatti con il CMS WordPress e il plugin Elementor Pro. L’abbiamo fatto in modo estremamente minimal, sia a livello di contenuti che di grafica. Ovviamente, questi strumenti ti permettono di creare pagine molto più complesse ed elaborate di quella vista nell’esempio.
Ma ora lascio a te lo spazio per sperimentare e creare una pagina Contatti tutta nuova per il tuo sito web!
Nel prossimo articolo, vedremo come realizzare un’altra importante pagina del sito: la pagina non trovata.
