Come aggiungere moduli di contatto utilizzando il plug-in - P1: utilizzare il modulo di contatto 7

Il modulo di contatto è uno degli elementi più importanti se vuoi avere un sito web professionale. Non è nemmeno difficile creare e configurare un modulo di contatto se utilizzi plug-in dedicati. Per aiutarti a creare moduli di contatto con plug-in in modo facile e veloce, abbiamo compilato e scritto istruzioni su come utilizzare i plug-in per moduli di contatto più popolari.

Nella prima parte della serie “Modulo di contatto”, scopriamo:

• Cos'è il modulo di contatto?
• Vantaggi del modulo di contatto
• Come utilizzare il plug-in Contact Form 7 per creare un modulo?

Che cos'è il modulo di contatto e i suoi vantaggi?

Che cos'è il modulo di contatto?

Modulo di contatto è un termine familiare ai professionisti del marketing. Utilizzando il modulo di contatto, gli utenti possono inviare e-mail e contattarti direttamente sul sito Web senza conoscere il tuo indirizzo e-mail.

Un modulo di contatto di solito ha molti campi per consentire agli utenti di compilare le informazioni richieste come e-mail, numero di telefono, nome, contenuto dell'e-mail, ... Inoltre, di solito viene inserito in una pagina di contatto o nell'area in cui è necessario ottenere le informazioni di contatto dei clienti . Ecco un esempio:

Vantaggi del modulo di contatto

Poiché gli utenti possono utilizzare il modulo di contatto per inviare informazioni al proprietario del sito (per lasciare le proprie informazioni di contatto, per inviare richieste di supporto o altre richieste, …) proprio su quel sito Web, rende il contatto molto più comodo e veloce.

Inoltre, l'utilizzo di un modulo di contatto può mantenere la tua e-mail privata e ridurre lo spam e le minacce alla sicurezza. Pertanto, non dovrai affrontare la casella di posta piena di spam e spazzatura ogni giorno.

Inoltre, i moduli di contatto ti aiutano a raccogliere le informazioni degli utenti più facilmente perché devono compilare le informazioni richieste nel modulo. Questa è una delle strategie per ottenere più contatti.

In generale, per creare un sito Web professionale e ottenere maggiori vantaggi per la tua attività, dovresti utilizzare i moduli di contatto.

Come creare un modulo di contatto

Puoi codificare per creare campi e moduli come preferisci. Tuttavia, se non sei un programmatore, questo non è possibile. Oppure devi pagare una somma di denaro assumendo un programmatore per farlo.

Quindi, la soluzione più utile per creare moduli di contatto per utenti non tecnologici o anche sviluppatori (per risparmiare tempo e fatica) è utilizzare un plug-in. Ora ci sono molti plugin per moduli di contatto che sono semplici, facili, veloci e gratuiti. Quindi, non c'è motivo per non usarli per creare un modulo di contatto, giusto?

In tutti gli articoli di questa serie, ti mostrerò come creare un modulo di iscrizione all'università come segue:

Crea un modulo utilizzando il modulo di contatto 7

In questo primo articolo della serie "Crea modulo di contatto utilizzando i plug-in", utilizzo Contact Form 7, uno dei plug-in per moduli di contatto gratuiti più popolari disponibili oggi.

Prima di tutto, scarica e installa questo plugin dal repository dei plugin su wordpress.org, oppure vai su Dashboard > Plugin > Aggiungi nuovo per installarlo e attivarlo.

Modulo di contatto 7

Autore/i: Takayuki Miyoshi

Versione corrente: 5.5.3

Ultimo aggiornamento: 28 novembre 2021

contact-form-7.5.5.3.zip

82% Valutazioni 5.000.000+ Installa WP 5.7+ Richiede

Ecco le istruzioni specifiche per creare il modulo di registrazione all'università sopra con questo plugin.

Interfaccia

Vai a Dashboard > Contatto > Aggiungi nuovo per creare un nuovo modulo di contatto. Ecco l'interfaccia con cui lavorerai:

(1): Inserisci il nome del modulo di contatto
(2): Schede per creare e impostare un modulo di contatto, tra cui:

• Scheda Modulo : crea i campi per il modulo di contatto
• Scheda Posta : imposta le email che ricevi dal modulo di contatto
• Scheda Messaggio : include le notifiche che gli utenti ricevono quando si verifica un errore di imputazione dei dati, il modulo non può essere inviato, l'invio del modulo è riuscito, ...
• Scheda Impostazioni aggiuntive : aggiungi altri elementi al modulo di contatto.

Crea campi per il modulo di contatto

Come ho accennato, un modulo di contatto contiene campi che consentono agli utenti di inserire informazioni o interagire con esso. Ecco la scheda Modulo che viene utilizzata per creare questi campi:

(1) è costituito da campi da aggiungere al modulo come nome, email, numero, pulsante di invio, … Per aggiungere qualsiasi campo, è sufficiente fare clic sul nome del campo corrispondente.

(2) è l'area per la visualizzazione della struttura del modulo in formato HTML. Quando crei un nuovo modulo di contatto, avrai la struttura predefinita per un modulo di base con campi semplici come email, nome, oggetto e pulsante di invio. Puoi utilizzare questo modulo immediatamente o creare un nuovo modulo basato su di esso.

Istruzioni generali per i campi

Dopo aver scelto il campo desiderato, verrà visualizzato un popup in cui inserire le informazioni necessarie nel campo. Ogni campo richiede informazioni diverse, ma in generale hanno tutti le seguenti sezioni:

Nome : attributo del nome
Valore predefinito : il valore predefinito del campo
Attributo ID: ID del campo
Attributo di classe : la classe del campo

Nota : l' attributo ID e l' attributo Classe sono facoltativi e puoi inserire le tue informazioni personalizzate lì. Se desideri semplificare i seguenti passaggi per lo styling del modulo di contatto, devi compilare queste 2 sezioni.

Dopo aver compilato queste informazioni, vedrai il Tag del campo che hai creato nella parte inferiore di questa casella. Fare clic su Inserisci tag per inserire questo campo nell'HTML del modulo.

Normalmente, il tag di ogni campo in un modulo di contatto creato con Contact Form 7 avrà la seguente struttura:

 [field* name_attribute id:field_id class:field_class "il valore predefinito del campo"]

Spiegazioni:

• field * è il tipo di campo che scegli. Questa è la parte più importante e indispensabile di un campo.
• * significa che questo campo è obbligatorio. Se non vuoi obbligare gli utenti a inserirlo, rimuovi il * .

Per ulteriori informazioni sulla struttura di un tag di campo in Contact Form 7, fare riferimento a questa documentazione. Comprendere il significato e la struttura HTML di un modulo di contatto renderà più semplice modificare, creare e aggiungere nuovi campi utilizzando il codice. Soprattutto con i programmatori, possono scrivere codice HTML per creare il modulo secondo la sintassi sopra. Tuttavia, con il non codificatore, potrebbe essere difficile, quindi consiglio di seguire questi passaggi di seguito.

Con i moduli di contatto di questa serie, devo scegliere i seguenti campi:

Tutti i campi hanno le informazioni comuni che ho detto sopra. Pertanto, ora guido solo le parti specifiche di ciascun campo.

Di seguito sono riportate le istruzioni dettagliate per ogni campo.

Crea un campo per inserire il nome

Seleziona il campo di testo e inserisci le informazioni di base per il campo nella casella:

Nella sezione Tipo di campo , puoi scegliere di richiedere in modo che questo campo sia obbligatorio da compilare (è facoltativo).

Nota : nella sezione Valore predefinito , scegli Usa questo testo come segnaposto del campo per visualizzare questo contenuto nel campo prima che gli utenti inseriscano i dati. Dovresti usare questa modalità per spiegare agli utenti cosa devono compilare il campo.

La sezione Akismet è correlata al plugin Akismet, un plugin anti-spam. Se non hai questo plugin, non preoccuparti di questa sezione.

Crea un campo per inserire il numero di telefono

Seleziona il campo del numero e inserisci le informazioni di base per il campo.

Nella sezione Tipo di campo , scegli un tipo per questo campo. Ci sono due tipi di campi: Spinbox e Slider .

Lo Slider mostrerà una scala per la scelta del numero come segue:

Questo stile è adatto per segnare o scegliere numeri in base a una scala specifica.

Nel frattempo, Spinbox ti consente di inserire qualsiasi numero, la sequenza di numeri nel campo come numero di telefono, numero di carta, numero di carta d'identità, ... Quindi in questo esempio scelgo Spinbox.

La sezione Intervallo consente di scegliere un limite per il numero. In questo esempio, non ho bisogno di questa sezione, quindi non ho compilato nulla.

Crea un campo per la selezione di major e sedi di studio

Con questo campo, seleziona il menu a tendina .

Ora, inserisci le opzioni per le major e le posizioni nella sezione Opzioni , tieni presente che ogni opzione è una linea.

Se desideri consentire agli utenti di selezionare più opzioni contemporaneamente, fai clic su Consenti selezioni multiple .

Crea un campo per la scelta dello scopo della registrazione

Seleziona il campo della casella di controllo .

La sezione Opzioni è simile a quella nel campo del menu a discesa sopra. Inoltre, ci sono più opzioni per le caselle di controllo come segue

• Metti prima un'etichetta, poi una casella di controllo
• Avvolgi ogni elemento con l'elemento etichetta
• Rendi esclusive le caselle di controllo (puoi scegliere solo 1 opzione).

Crea il pulsante di invio

Infine, seleziona il campo di invio e compila le informazioni come il seguente requisito (nota che Etichetta è la parola che apparirà su questo pulsante, ad esempio "Invia", "Registrati", "Conferma").

In particolare, durante la creazione di un nuovo modulo, questo plugin ha già creato automaticamente un campo inviato. Pertanto, puoi utilizzare questo campo senza crearne uno nuovo.

Aggiungi etichette per i campi

Ora hai finito di creare i campi per il modulo di contatto. Tuttavia, i tuoi campi non hanno avuto un nome da visualizzare nel modulo di contatto come segue:

Pertanto, è necessario aggiungere etichette ai campi inserendo la seguente struttura di codice nella parte HTML del modulo:

 <etichetta> Etichetta campo
[Etichetta del campo] </label>

Quindi, scrivi l'etichetta del campo nella sezione Etichetta campo . Quindi inserisci tutte le informazioni di cui sopra, fai clic su Salva .

Dopo aver creato i campi, il mio modulo di contatto ha la seguente struttura di codice, nota che ho disposto i campi per visualizzarli nella posizione desiderata sul front-end:

 <etichetta> Il tuo nome (richiesto)
[testo* tuo-nome "inserisci il tuo nome"] </label> 

<etichetta> Il tuo numero di telefono
[numero telefono segnaposto "inserisci il tuo numero di telefono"] </label> <label> La tua email (richiesto)
[email* la tua email "inserisci la tua email"] </label>

<etichetta> Maggiore
[select* major "Informatica" "Linguistica" "Agricoltura" "Ingegneria" "eCommerce"] </label>
<label> Luogo in cui studiare 
[seleziona* Località per studiare "New York" "Chicago" "Los Angeles" "Washington DC" "Houston" "Philadelphia"] </label>

</label> Registrati a
[checkbox* registrati label_first "Studia" "Fai un giro" "Consulta"] </label>

[invia "Invia"]

Questa volta, il tuo modulo di contatto non viene ancora visualizzato sul sito web. È necessario eseguire alcuni passaggi aggiuntivi per visualizzarlo sul front-end.

Impostazioni modulo di contatto

Imposta e-mail

La scheda Posta ti consente di personalizzare il contenuto dell'e-mail che riceverai quando i moduli di contatto vengono inviati dagli utenti. Per impostare questa sezione, è necessario inserire i tag di posta dei campi nel modulo di contatto che hai appena creato. Ecco un esempio:

Spiegazioni:

• A : inserire l'e-mail della persona che si occupa di controllare il modulo di contatto.
• Da e Oggetto : è necessario impostare un nome qui per determinare chi invia questo modulo di contatto.
• Corpo del messaggio : aggiungi qui i tag di posta per assicurarti che quando ricevi e-mail dal modulo di contatto, verranno visualizzate tutte le informazioni richieste dagli utenti.

Altre impostazioni

Scheda messaggio

Inserisci i messaggi che vengono utilizzati nelle situazioni come puoi vedere nella descrizione della scheda. Ad esempio, dopo che gli utenti hanno inviato il modulo correttamente o non lo hanno inviato, è necessario aggiungere un messaggio per informarli. O quando gli utenti dimenticano un campo obbligatorio, dovresti anche aggiungere un messaggio in modo che gli utenti possano tornare a compilare quel campo. Sebbene questi siano piccoli dettagli, dovresti prestare attenzione a migliorare l'esperienza dell'utente.

Scheda Impostazioni aggiuntive

Questa scheda ti aiuta ad aggiungere frammenti di codice per installare quanto segue:

• Modalità solo abbonati
• Modalità demo
• Saltare la posta
• Accettazione come convalida
• Impostazioni fenicottero
• Soppressione della memorizzazione dei messaggi
• codice JavaScript

Ci sono alcune parti piuttosto utili che dovresti usare come:

• Modalità solo abbonati : questa modalità consente solo agli utenti che hanno effettuato l'accesso al tuo sito Web di inviare il modulo di contatto. Questo elimina i messaggi di spam ed è solo per coloro che vogliono davvero contattarti.
• Accettazione come convalida : aggiungi una funzionalità per visualizzare le notifiche per la casella di controllo Accettazione quando gli utenti non selezionano questa casella ma si spostano in un altro campo. Perché per impostazione predefinita, se gli utenti non selezionano la casella di controllo Accettazione, il messaggio di errore verrà visualizzato solo dopo aver inviato il modulo. Questa casella di controllo di accettazione viene spesso utilizzata per creare campi come "Sono d'accordo con i termini del sito Web", ma nel caso in cui crei altri tipi di contenuto, potrebbe essere necessario aggiungere l' accettazione come convalida .

Per saperne di più sulle altre funzionalità nella scheda Impostazioni aggiuntive , puoi leggere di più qui.

Visualizza il modulo di contatto sul sito web

Il passaggio finale è visualizzare il modulo di contatto che hai appena creato sul sito web.

Sempre nell'interfaccia per creare un nuovo modulo, copia lo shortcode e incollalo nella pagina o nel post desiderato.

Ecco i miei risultati finali:

Tuttavia, il mio modulo di contatto non ha un bell'aspetto, quindi ho bisogno di modificarlo un po'.

Se vuoi modificare lo stile del modulo di contatto come il modello che ho fornito all'inizio di questo articolo, dovrai modificare l'HTML del modulo come segue per renderlo più facile da modellare:

 <div class="form__field form__full-width">
<label>Il tuo nome (richiesto)
[testo* segnaposto tuo-nome "inserisci il tuo nome"]
</label>
</div>
<div class="form__field">
<label>Il tuo numero di telefono
[numero telefono segnaposto "inserisci il tuo numero di telefono"]
</label>
</div>
<div class="form__field">
<label>La tua email (richiesto)
[email* segnaposto della tua email "inserisci la tua email"]
</label>
</div>
<div class="form__field">
<label>Maggiore
[seleziona* major "Informatica" "Linguistica" "Agricoltura" "Ingegneria" "eCommerce"]
</label>
</div>
<div class="form__field">
<label>Luogo in cui studiare
[seleziona* Località per studiare "New York" "Chicago" "Los Angeles" "Washington DC" "Houston" "Filadelfia"]
</label>
</div>
<div class="form__field form__full-width">
<label>Registrati a
[checkbox* registrati use_label_element "Study" "Fai un giro" "Consulta"]
</label>
</div>
<div class="form__field form__full-width">
[invia "Invia"]</div>

Quindi vai su Personalizzatore del tuo tema> CSS aggiuntivo e incolla il seguente codice:

 #wpcf7-f330-p104-o1 .wpcf7-form { display: flex; flex-wrap: wrap; margin: 0 -15px; padding: 20px; background: #eeeeee; } .form__field { width: 50%; padding: 0 15px; margin-bottom: 20px; } .form__field.form__full-width { width: 100%; } .form__field input:focus::placeholder { opacity: 0; } .form__field input, .form__field select { width: 100%; color: #77818e; font-style: italic; } .form__field input::placeholder, .form__field select::placeholder { color: #77818e; } .form__field input[type="submit"] { color: #4299e1; width: auto; background: #fff; border: 1px solid #4299e1; } .form__field span.wpcf7-list-item { margin: 10px 20px 0 0; display: block; } .form__field span.wpcf7-list-item input { width: auto; } .wpcf7-checkbox { display: flex; justify-content: space-between; }

Infine, fai clic su Pubblica per salvare.

Ultime parole

Quando utilizzi per la prima volta Contact Form 7, potresti non avere familiarità con l'HTML se non sei un programmatore. Tuttavia, dopo aver letto questo tutorial, penso che tutto sia diventato più semplice, giusto?

Se vuoi provare a creare un modulo di contatto con altri strumenti, attendi con ansia il mio prossimo articolo di questa serie. Quale plugin vuoi suggerire? Lascia un commento sotto questo articolo!