La pagina Prenota del Ristorante

In questo tutorial proseguiamo con la realizzazione della pagina Prenota in cui inseriremo un modulo di contatto per consentire la prenotazione. Il tema Astra, in fase d’importazione del template, installa automaticamente il plugin WPForms che permette di creare e gestire i moduli. Questo plugin è gratuito ma possiede anche una versione a pagamento con funzionalità avanzate.

Dalla bacheca di WordPress portati sulla voce WPForms e clicca Aggiungi nuovo. Nel campo Nome del modulo inserisci un nome a tua scelta. In basso seleziona un template Modulo vuoto.

Creare pagina prenotazione Ristorante

Questo plugin è molto semplice da usare. Sulla sinistra hai una serie di campi da utilizzare per creare il modulo. Come vedi, sono divisi in Campi Standard e Campi Avanzati. La versione gratuita ci permette di utilizzare solo quelli standard.

Creare pagina prenotazione Ristorante

Per farti un esempio pratico, aggiungiamo prima di tutto un campo Nome. Con il mouse ti basta trascinarlo sulla destra. Dal suo menu sulla sinistra puoi personalizzarlo. Ad esempio alla voce Formato scegli Formato semplice e nel campo Etichetta scrivi “Nome e Cognome”. L’opzione Obbligatorio indica che il campo deve essere necessariamente compilato dall’utente.

Nella sezione Opzioni avanzate puoi impostare le dimensioni del campo. Noi, in questo esempio, abbiamo scelto Grande in modo da far occupare l’intera riga. Nel campo Nome hai i valori Segnaposto e Valore predefinito. Attraverso il Segnaposto puoi sostituire l’etichetta e farla comparire all’interno del campo.

Clicca questo pulsante se decidi di acquistare un pacchetto SiteGround.

Grazie mille

La voce Valore Predefinito la vedremo più avanti quando inseriremo il campo per il numero di telefono. Infine le Classi CSS definiscono il layout del campo ma essendo una funzionalità avanzata le lasciamo vuote.

Adesso inserisci un secondo campo cliccando in alto Aggiungi un campo e trascina il campo Email. Lascia invariato il nome dell’etichetta e attiva Abilita Conferma Email. Questa funzionalità fa si che l’utente inserisca due volte l’email per convalidarla.

Creare pagina prenotazione Ristorante

Come hai fatto nel campo Nome e Cognome anche in questo caso, nelle Opzioni avanzate, seleziona Grande alla voce Dimensione campo. Clicca nuovamente Aggiungi Campo e inserisci Riga di testo e alla voce Etichetta scrivi “Numero di telefono”. Questo campo puoi anche renderlo non obbligatorio e pensare di scrivere una frase tipo “Per essere ricontattato indica il tuo numero di telefono”.

Creare pagina prenotazione Ristorante

In Opzioni avanzate seleziona Grande in Dimensioni campo e in Valore predefinito scrivi il prefisso italiano +39. Ora Aggiungi un Campo > Number Slider che ti permetterà di indicare il numero di posti da prenotare.

Creare pagina prenotazione Ristorante

Alla voce Etichetta scrivi “Posti da prenotare” e come valore minimo imposti 1 mentre come massimo quello che vuoi. In Opzioni avanzate scegli Grande e personalizza il messaggio alla voce Value Dispaly aggiungendo “Posti selezionati”.

Ritorna su Aggiungi un campo > Caselle di spunta. Questo campo permetterà di scegliere le tipologie di menu. Alla voce Etichetta scrivi “Preferenze” e tra le scelte possibili puoi pensare di scrivere “Carne”, “Pesce” e “Vegetariano”.

Poi attiva l’opzione Usa scelte visive che permette di associare un’immagine alle singole opzioni. Cliccando poi su Carica un’immagine vai a caricare/scegliere l’immagine più appropriata facendo attenzione a rispettare le dimensioni di 200x125px.

Creare pagina prenotazione Ristorante

Tra le Opzioni avanzate puoi definire il numero massimo di scelte che un utente può selezionare alla voce Definisci il limite. Lascialo vuoto se non vuoi impostare nessun limite. In Stile di scelte visive seleziona Nessuno per applicare uno stile classico.

Subito dopo inserisci un campo per lasciare la possibilità ai clienti di scrivere un commento o richiesta. Trascina quindi il campo Paragrafo e alla voce Etichetta scrivi “Richieste particolari”.

Creare pagina prenotazione Ristorante

Infine è sempre utile inserire un campo Casella di Spunta per il trattamento dei dati personali. Alla voce Etichetta scrivi “Privacy”. Nella prima opzione scrivi “Accetta le condizioni sul trattamento dei dati personali” e cancella le rimanenti. Ricorda che questo campo deve essere obbligatorio.

Completato il modulo devi personalizzare alcune impostazioni. Salva le modifiche e successivamente portati alla voce Impostazioni. Le impostazioni generali puoi lasciarle cosi come sono.

Creare pagina prenotazione Ristorante

Alla voce Notifiche puoi visualizzare una serie di variabili che permettono l’invio del modulo. Ad esempio alla voce Invio a indirizzo email trovi la variabile {admin_email} che permette l’invio del modulo all’amministratore del sito.

In Oggetto dell’email scrivi “Prenotazione” ma il campo a cui devi prestare attenzione è Rispondi a perché, dopo che il modulo è stato recapitato, ti permetterà di rispondere direttamente all’indirizzo email indicato dall’utente durante la compilazione.

Ti consigliamo di cliccare su Mostra gli Smart Tag e scegliere la variabile email. Alla voce Conferme puoi personalizzare il messaggio di conferma del modulo. Troverai già scritto “Grazie per averci contattato! Ci metteremo in comunicazione con te il prima possibile.”

Creare pagina prenotazione Ristorante

Salva le modifiche, chiudi il plugin WPForms e ora non resta che inserirlo all’interno della pagina Prenota. Portati su Pagine > Tutte le pagine, clicca Modifica sulla pagina Prenota e spunta Disabilita il Titolo, Disabilita immagine in evidenza e in Layout contenuto seleziona Larghezza piena / esteso. Aggiorna la pagina ed entra in modalità Modifica con Elementor.

Creare pagina prenotazione Ristorante

In questa pagina dovrai inserire prima di tutto una testata con un’immagine di sfondo e un blocco Intestazione. Per fare questo clicca sul simbolo “+” e aggiungi una sezione ad una colonna.
Portati nel menu Stile > Tipo di Sfondo classico e dalla libreria di WordPress scegli un’immagine. Alla voce Posizione > Centrato, in Ripetizione > Non ripetere e in Dimensione > Copertina.

Nel sotto menu Layout seleziona Altezza > Altezza minima impostando un valore di 400px. Anche in questo caso per aumentare il contrasto tra il titolo e l’immagine imposta uno Sfondo overlay. Ultima modifica a questa sezione sarà applicare un Separatore sagomato nella parte inferiore.

Fatto questo, dai blocchi di Elementor trascina Intestazione in cui scrivi “Prenota”, allinea il testo al centro e assegna come Tag HTML H1. Ricordati di impostare il colore bianco al testo dal sotto menu Stile.

Subito dopo inserisci una sezione a singola colonna e applica un margine superiore. Vai su Avanzato, disattiva Collega i valori e scrivi 75px al margine superiore. In questa sezione inserisci prima di tutto un blocco Intestazione scrivendo ad esempio “Prenota la tua esperienza”. Allineo il testo al centro e scegli Tag HTML H3.

Creare pagina prenotazione Ristorante

Per separare il titolo dal modulo di contatto abbiamo pensato di inserire un divisore. Ritorna nei blocchi e trascina Divisore. Alla voce Larghezza scrivi 15 con Allineamento al centro. Vai su Stile imposta lo spessore della linea a 5 e scegli un colore.

Per concludere non ti resta che importare il modulo di contatto creato con il plugin WPForms.

Creare pagina prenotazione Ristorante

Dai blocchi di Elementor, sotto la voce WordPress, trovi WPForms. Trascinalo dopo il blocco Divisore e dal menu sulla sinistra, alla voce Modulo, scegli il modulo che hai creato. Quello che vedrai è un’anteprima del modulo che non corrisponde alla realtà. Non preoccuparti! Salva le modifiche cliccando il pulsante Aggiorna, ritorna sul sito, accedi alla pagina Prenota e vedi il risultato.

Creare pagina prenotazione Ristorante

Prova adesso ad inviare il modulo. Se l’invio andasse a buon fine comparirebbe il messaggio di conferma che, come abbiamo visto, puoi personalizzare nelle impostazioni del plugin. Controlla che tutto sia andato a buon fine e assicurati che rispondendo all’email venga inoltrata all’indirizzo indicato dall’utente.

Commenti

Per qualsiasi dubbio o domanda, scrivi un commento qui sotto.

Un commento su “La pagina Prenota del Ristorante”

  1. Buonasera,
    ho fatto tutto come avete indicato ma non mi arriva la mail. Io la mail di amministratore
    la deduco dalle impostazioni generali di WordPress, corretto? In ogni caso ho controllato
    tutte le mie mail, anche quella del mio servizio di hosting, ma nulla. Cosa posso aver sbagliato?

    Grazie
    Andrea

    Rispondi

Lascia un commento

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.