Come aggiungere moduli di contatto utilizzando il plug-in - P2: utilizzare WPForms

Nel precedente articolo della serie "Modulo di contatto", abbiamo appreso cos'è un modulo di contatto e come utilizzare il plug-in Contact Form 7. Come promesso, ho scritto un altro tutorial con WPForms e te lo mostrerò in questo articolo.

WPForms è un plug-in per moduli di contatto drag-and-drop freemium con un'anteprima in tempo reale. Nella mia esperienza, è facile e conveniente lavorare con questo plugin.

Ricordi questo esempio di modulo di registrazione all'università che abbiamo creato nella parte 1 di questa serie? Ora creeremo lo stesso con WPForms.

Passaggio 1: installa e attiva il plug-in WPForms

Questo plugin ha una versione gratuita su wordpress.org, quindi devi solo installare e attivare il plugin direttamente nella dashboard di amministrazione .

Modulo di contatto di WPForms – Drag & Drop Form Builder per WordPress

Autore/i: WPForms

Versione corrente: 1.7.1.2

Ultimo aggiornamento: 18 novembre 2021

wpforms-lite.1.7.1.2.zip

98% Valutazioni 5.000.000+ Installa WP 4.9+ Richiede

Passaggio 2: crea un nuovo modulo di contatto e scegli un modello

Nella dashboard di amministrazione , vai su WPForms > Aggiungi nuovo .

Ecco l'interfaccia con cui devi lavorare:

Nella barra laterale sinistra, puoi vedere 5 sezioni:

1. Configurazione : Assegna un nome al modulo di contatto e scegli il suo modello.
2. Campi : aggiungi e personalizza i campi per il modulo di contatto.
3. Impostazioni : Configura le notifiche, le conferme e le impostazioni generali.
4. Marketing : collegamento con strumenti di email marketing come Constant Contact, Campaign Monitor, Mailchimp, ...
5. Pagamenti : aggiungi il pagamento da PayPal Standard, Stripe e Authorize.Net.

Nota : non eseguo alcuna campagna di email marketing e il mio modulo non richiede informazioni di pagamento. Pertanto, non ho bisogno delle sezioni Marketing e Pagamenti .

Nella sezione Configurazione , inserisci il nome del modulo e seleziona il modello desiderato.

Sono disponibili quattro modelli predefiniti:

• Modulo di contatto semplice
• Modulo di iscrizione alla newsletter
• Suggerimento per
• Modulo vuoto

Escludendo il modulo vuoto , altri modelli hanno i propri campi predefiniti che puoi utilizzare per creare moduli di contatto più velocemente. Inoltre, puoi installare i componenti aggiuntivi di WPForms (disponibili solo nelle versioni a pagamento) per ottenere più modelli.

In questo articolo, scelgo il modello Modulo vuoto per costruire un modulo di contatto passo dopo passo dall'inizio. Questo ti aiuterà a capire tutto più facilmente e profondamente.

Passaggio 3: aggiungi i campi per il modulo di contatto

Aggiungi campi

Dopo aver scelto il modello Modulo vuoto nel passaggio 2, verrai spostato nella sezione Campi .

Per aggiungere campi per il modulo di contatto, trascina i campi desiderati dalla scheda Aggiungi campi e rilasciali nel modulo di contatto.

Quindi, per personalizzare un campo, fai clic su di esso, quindi modifica i suoi parametri nella scheda Opzioni campi .

Inoltre, puoi eliminare o duplicare un campo passandoci sopra con il mouse e facendo clic sui pulsanti desiderati.

In questo articolo devo aggiungere i seguenti campi:

Dopo aver aggiunto tutti questi campi, è necessario personalizzare ciascun campo nei passaggi successivi.

Personalizza le opzioni generali per ogni campo

In generale, ci sono due tipi di opzioni per personalizzare ogni campo:

Opzioni di base : tutti i campi contengono queste opzioni e dovresti assolutamente lavorare con loro per rendere il tuo modulo di contatto chiaro e comprensibile.

• Etichetta : inserisci il nome del campo che desideri visualizzare.
• Descrizione : questo è il testo visualizzato sotto il campo per dire agli utenti cosa fare.
• Obbligatorio : è facoltativo! Spuntalo per rendere obbligatorio il riempimento di questo campo.

Nei passaggi successivi, quando menziono "informazioni di base", significa che devi occuparti di queste opzioni di base.

Opzioni avanzate : ci sono alcune funzionalità avanzate per ogni campo. È facoltativo per te occuparti di loro, ma ci sono alcune cose importanti che dovresti considerare:

• Testo segnaposto : visualizza un testo all'interno dei campi prima che gli utenti inseriscano i dati. Questo testo può essere usato come guida o esempio per aiutare gli utenti a capire facilmente cosa devono compilare. Ad esempio, puoi impostare il testo segnaposto del campo email come "Inserisci la tua email".
• Valore predefinito : se ci sono molte persone che hanno la stessa risposta, puoi impostare una risposta predefinita per risparmiare tempo e fatica degli utenti. Ad esempio, crei un modulo di contatto per le persone che vivono a New York, in modo da poter inserire un valore predefinito di "New York" nel campo "Località".
• Classi CSS : inserisci le classi CSS in questa casella per definire lo stile del campo. Nel passaggio successivo, includerò il codice in questa sezione per definire lo stile del modulo di contatto.

Nota :

• In Contact Form 7, puoi utilizzare il valore predefinito come testo segnaposto. Ma è più conveniente in WPForms perché hai la sezione Testo segnaposto separata. Inoltre, WPForms ha la sezione Descrizione che visualizza il testo sotto il campo. Uso questo modo perché migliora l'aspetto del mio modulo di contatto.

• Puoi fare clic sul pulsante del punto interrogativo accanto alle opzioni / campi per leggere le istruzioni di WPForms per loro.

Inoltre, ci sono alcune opzioni diverse a seconda di ciascun campo. Scopriamo quali sono!

Personalizza il campo "Il tuo nome"

Seleziona il campo Testo semplice e inserisci le informazioni di base:

In questo campo, ci sono altre 2 opzioni nella sezione Opzioni avanzate :

• Lunghezza limite : selezionalo per scegliere un limite per il massimo di caratteri che possono essere inseriti nel campo.
• Maschera di input : inserisci le maschere di input per richiedere formati specifici per il campo. Leggi maggiori dettagli qui.

Personalizza il campo "Il tuo numero di telefono"

Questo campo non ha niente di speciale. Basta selezionare il campo Numeri e compilare le informazioni di base:

Personalizza il campo "La tua email"

Seleziona il campo Email e inserisci le informazioni di base per il campo:

Questo campo ha un'altra opzione di base: Abilita conferma email . Puoi selezionarlo per chiedere agli utenti di fornire il loro indirizzo email due volte. Questo assicura che la loro email sia corretta.

Personalizza i campi "Luogo di studio" e "Principale"

Innanzitutto, scegli il campo a discesa . Nella sezione Scelte, inserisci le opzioni per il campo. È possibile fare clic su (+) (-) per aggiungere/rimuovere scelte.

Inoltre, puoi anche fare clic sul pulsante Aggiungi in blocco per aggiungere più scelte contemporaneamente. Nella casella Aggiungi scelte , compila le scelte nell'ordine desiderato (ogni scelta è una riga) e quindi fai clic su Aggiungi nuove scelte .

Inoltre, in questo campo, ci sono 2 opzioni avanzate di cui dovresti preoccuparti:

• Stile : puoi dare uno stile al tuo menu a discesa con due opzioni: classico e moderno. Lo stile moderno permette di effettuare ricerche per parole chiave. Pertanto, funziona bene su menu con molte opzioni (più di 10 opzioni).
• Scelte dinamiche : consente agli utenti di selezionare scelte da tipi di post o tassonomie. Ad esempio, se scegli Origine tipo di post dinamico come Post , ogni scelta nel menu a discesa è un post sul tuo sito web.

Personalizza il campo "Registrati a"

Seleziona i campi Caselle di controllo e inserisci scelte come i campi a discesa .

In questo campo, ci sono 2 opzioni avanzate di cui dovresti preoccuparti:

• Usa scelte di immagine : puoi usarlo per illustrare le tue scelte e rendere il tuo modulo di contatto più attraente e visualizzato.
• Scelte casuali : questo può evitare che le persone scelgano una scelta solo perché è la prima.

Passaggio 4: configurare il modulo di contatto

Dopo aver creato un modulo di contatto, dobbiamo configurarlo. Nella versione gratuita di WPForms, puoi configurare le tre sezioni seguenti:

Configura le impostazioni generali

Il plugin WPForms ha istruzioni specifiche per ogni opzione in questa parte. Dovresti fare clic sul pulsante del punto interrogativo, leggerlo attentamente e prestare attenzione a questi campi:

• Testo del pulsante di invio : nel modulo di contatto 7, devi creare il campo di invio . Ma in WPForms, il pulsante di invio è integrato. Puoi modificare il testo di questo pulsante in questa sezione con quello che desideri, ad esempio Registrati a, Invia e-mail, ...
• Abilita la protezione anti-spam : a volte gli spammer possono infastidirti con tonnellate di "modulo spazzatura". In tal caso, dovresti attivare questa funzione di anti-spam.

Configura le notifiche

Se desideri ricevere un'email di notifica ogni volta che un utente invia un modulo di contatto, vai su Impostazioni > Notifiche .

Puoi aggiungere "tag intelligenti" o testo ai campi di questa sezione per gestire più facilmente l'e-mail che ricevi quando un utente invia un modulo di contatto.

Nota : gli smart tag possono aggiungere automaticamente informazioni alle notifiche del modulo di contatto.

Questo è un esempio delle mie impostazioni:

Configura le Conferme

Nella sezione Conferma , puoi configurare i messaggi che gli utenti ricevono dopo aver inviato i moduli di contatto.

Al termine di tutta la configurazione, fai clic su Salva .

Passaggio 5: visualizzare il modulo su pagine/post

Per visualizzare i tuoi moduli su pagine/post, ci sono 2 modi.

Il primo modo è fare clic su Incorpora per visualizzare il modulo su una pagina:

Successivamente, incorpora il modulo di contatto in una nuova pagina o in una pagina esistente del tuo sito.

Il secondo modo è inserire lo shortcode del modulo di contatto in pagine/post. Ti consiglio di scegliere il secondo modo perché può visualizzare il modulo di contatto sia sui post che sulle pagine . Per farlo, nella Dashboard di amministrazione , vai su WPForms > All Forms , trova il tuo modulo di contatto e copia il suo shortcode.

Quindi, incolla questo shortcode nei post/pagine desiderati.

E questo è il risultato:

Non sembra ancora l'esempio del modulo di contatto, quindi devo modificarlo un po'.

Passaggio 6: modellare il modulo

Nella dashboard di amministrazione , vai su WPForms > Tutti i moduli , trova il modulo di contatto e fai clic su Modifica .

Ora, fai clic su ciascun campo, vai su Opzioni avanzate > Classi CSS e aggiungi i seguenti valori:

• Il tuo nome e registrati a : ip-100
• Il tuo numero di telefono , e -mail , luogo di studio , maggiore : ip-50

Quindi, vai su Customizer > Addition CSS , aggiungi questo codice:

 .wpforms-field-contenitore {
    display: flessibile;
    flex-wrap: avvolgere;
		giustificare-contenuto: spazio-tra
}

.ip-50 {
    larghezza: 48%! importante;
}

.ip-100{
		larghezza: 100%! importante;
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
div.wpforms-container-full .wpforms-form select.wpforms-field-medium {
	larghezza massima: 100%;
}

.ip-100 ul {
	display: flessibile;
	giustificare-contenuto: spazio-tra;
}

div.wpforms-container-full {
    margine inferiore: 24px;
    sfondo: #eeeeee;
    imbottitura: 20px;
}

Infine, fai clic su Pubblica .

Ed ecco il risultato finale:

Il modulo di contatto ora sembra migliore, vero? Bene, abbiamo appena terminato gli ultimi passaggi per avere una forma del tutto simile al mio campione.

Ultime parole

Nella mia esperienza, l'utilizzo dell'interfaccia drag-and-drop come in WPForms è più semplice e veloce rispetto all'utilizzo del modulo di contatto 7. Inoltre, ha il pulsante di invio predefinito e altre 2 sezioni utili come testo e descrizione segnaposto . Anche l'anteprima dal vivo è molto comoda. Mi aiuta a rilevare più facilmente gli errori durante la creazione e la personalizzazione del modulo.

Per sapere come utilizzare più plug-in per i moduli di contatto, segui il nostro prossimo articolo di questa serie! Se hai domande su WPForms o suggerisci qualsiasi plug-in per moduli di contatto, non esitare a lasciarlo nella sezione commenti.