Mini guida al modulo di contatto 7

Di solito un sito web ha bisogno di un modulo di contatto per comunicare con il proprietario del sito. Uno dei nostri preferiti è il modulo di contatto 7. Vediamo cosa può fare!

Contact Form 7 è un servizio gratuito, semplice e flessibile (in WordPress questo di solito significa che c'è un semplice set-up per chi ama la semplicità e un sacco di profondità e complessità per chi ama il giochino) plugin per moduli di contatto di Takayuki Miyoshi. Alcuni dicono che Contact Form 7 è uno dei migliori plugin per il nostro sistema di gestione dei contenuti preferito. Il plugin è stato aggiornato l'ultima volta a febbraio ed è stato scaricato 6.457.967 volte in totale (al momento della stesura di questo articolo).

Il plug-in può gestire anche più moduli di contatto e supporta l'invio AJAX, CAPTCHA, il filtro antispam di Akismet e il caricamento di file. L'ultima versione alla scrittura di questo articolo è 3.1.1. Il sito Web ufficiale è ContactForm7.com. Il download può essere effettuato dalla directory dei plugin di WordPress. La documentazione dettagliata può essere raggiunta nei documenti ufficiali.

Dopo l'installazione e l'attivazione troverai una voce di menu dedicata chiamata "Contatto" nell'interfaccia di amministrazione.


Codice del modulo

Ecco una semplice forma in cui è possibile ordinare un telefono cellulare. Puoi specificare anche la marca, il colore e il metodo di pagamento.

 

Prodotto *
[selezionare * prodotto "iPhone" "Samsung Galaxy S2" "htc Desire"]

Colore *
[selezionare * colore "nero" "bianco" "grigio"]

Nome *
[testo * tuo nome]

E-mail *
[email * tua-email]

Pagamento preferito
[radio paymethod "VISA" "MASTERCARD" "AMEX"]

[checkbox quickdelivery] Consegna rapida (1 giorno)

[invia "Ordina"]


Inserisci il codice del modulo

Utilizza questo snippet per importare il modulo completo specificato sopra in un articolo o una pagina di WordPress arbitrari.

 [contact-form-7 title = "cell-phone-ordering-form"]

Sintassi di base

La sintassi del tag è composta da campi tipo, nome e valore. Con l'asterisco diventerà un elemento obbligatorio.

 [tipo nome valori] ad esempio: [radio paymethod "VISA" "MASTERCARD" "AMEX"]

Tipi di tag

Ecco una lista con tutti i tag che puoi usare nei tuoi moduli:

  • campi di testo (testo, testo *, email, email *, textarea e textarea *),
  • caselle di controllo, pulsanti di opzione e menu (casella di controllo, casella di controllo *, radio, selezionare e selezionare *),
  • caricamento file e allegato (file e file *),
  • captcha (captchac e captchar),
  • quiz (quiz),
  • casella di controllo accettazione (accettazione),
  • pulsante di invio (invio).

Creazione di una forma a due colonne

Possiamo creare rapidamente un modulo con lo stile a due colonne, basta usare HTML e CSS. Il piccolo segreto è che possiamo combinare l'HTML con il codice del tag.

  
Nome [nome del testo]
Email [email * tua-email]
Cognome [nome del testo]
Telefono [testo telefono]
Oggetto [testo * tuo-soggetto]
Messaggio [textarea * tuo-messaggio]
[invia "Invia"]

Ecco il codice CSS. Niente di speciale solo uno stile molto semplice.

 #left width: 300px; fluttuare: a sinistra;  #right width: 250px; fluttuare: a sinistra;  .clearfix: after content: "\ 0020"; blocco di visualizzazione; altezza: 0; clear: both; visibility: hidden; overflow: hidden;  .clearfix display: block; 

Sintassi avanzata

La sintassi dei tag può essere anche più dettagliata. La parte opzioni specifica il comportamento e l'aspetto. La dichiarazione delle opzioni non è necessaria ma ecco come puoi farlo. Nota che nel seguente esempio usiamo il id e classe proprietà. È possibile utilizzare CSS e JavaScript per estendere il modulo.

 [digitare i valori delle opzioni del nome] ad esempio: [ID paymethod radio: classe paynow: pagamento "VISA" "MASTERCARD" "AMEX"]

Impostazione di un modello di posta

In Contact Form 7 è possibile modificare facilmente i modelli di posta. Testo, codice HTML e dati del modulo possono essere combinati in modi arbitrari. Nota i dati del modulo con le parentesi. Di seguito è riportato un esempio per il corpo del messaggio.

 Gentile [tuonome], hai appena ordinato un prodotto [prodotto] a colori [colore]! Presto riceverai un'email con il link a dove puoi pagare il tuo ordine. --- Grazie per l'acquisto! OurCompany LLC, www.ourcompany.com

Ecco un elenco di cos'altro è possibile impostare tramite il pannello di amministrazione:

  • campi di intestazione di base (a, da e soggetto)
  • corpo del messaggio
  • intestazioni aggiuntive
  • file allegati
  • Modalità HTML

Aggiungere CAPTCHA

Il plug-in del modulo consente di inserire un CAPTCHA nei moduli di contatto per impedire messaggi indesiderati. Modulo di contatto 7 utilizza CAPTCHA Really Simple come modulo CAPTCHA. Prima di iniziare dovrai installare il plugin CAPTCHA Really Simple. Assicurati che la tua cartella temporanea per i file CAPTCHA esista e sia scrivibile. In caso contrario, non è possibile creare CAPTCHA.

Per utilizzare CAPTCHA nei moduli, è necessario utilizzare il captchac e captchar tag di forma. captchac significa CAPTCHA-Challenge e rappresenta un elemento per un'immagine CAPTCHA. captchar significa CAPTCHA-Response e rappresenta un elemento per un campo di input di risposta. UN captchac il tag deve sempre essere abbinato a a captchar tag con lo stesso nome. Ad esempio, i tag mostrati di seguito sono validi:

  [captchac captcha-1] [captchar captcha-1]

Si noti che i nomi devono corrispondere l'un l'altro per funzionare correttamente. Qui captcha-1 viene data.


Correggere gli errori di invio

Impossibile inviare il tuo messaggio. Si prega di riprovare più tardi o contattare l'amministratore in altro modo.

Se il server non consente di inviare posta via inviare una mail(), puoi usare un plugin per inviare la posta via SMTP. Entrambe le estensioni sono compatibili con WordPress 3.2.1. Questi plugin possono risolvere i tuoi problemi:

  • WP Mail SMTP
  • e Configura SMTP

Scarica e installa il tuo plugin scelto in WordPress. Inserisci le impostazioni per il tuo server SMTP nella pagina Impostazioni.


Messaggi di eventi personalizzati

Possiamo modificare liberamente i messaggi mostrati sugli eventi.

Ancora più bello, puoi usare il codice HTML nelle caselle di input! Prova questo (in realtà è un one-liner HTML, ma suddiviso per chiarezza qui):

 Il tuo messaggio è stato inviato correttamente. Grazie! 

Supporto multilingua

Modulo di contatto 7 visualizza i moduli in inglese per impostazione predefinita, ma raggruppa oltre 40 traduzioni di lingua e puoi persino creare un modulo di contatto in qualsiasi lingua. Per utilizzare l'interfaccia di amministrazione di Contact Form 7 nella propria lingua, impostare l'opzione WPLANG costante nel tuo wp-config.php file.

 // Cambia questa linea: define ('WPLANG', 'ja');

Utilizzare i dati del modulo pubblicato sul lato server anziché sul mailing

Se si desidera qualcos'altro rispetto alla pubblicazione predefinita (invio di e-mail), è possibile utilizzare il seguente codice.

 add_action ("wpcf7_before_send_mail", "wpcf7_do_something_else"); function wpcf7_do_something_else (& $ wpcf7_data) // Ecco la variabile in cui sono memorizzati i dati! var_dump ($ wpcf7_data); // Se vuoi saltare la spedizione dei dati, puoi farlo ... $ wpcf7_data-> skip_mail = true; 

Imposta i diritti in modo che solo gli amministratori possono modificare i moduli

Per proteggere le opzioni di modifica, utilizzare questo codice.

 define ('WPCF7_ADMIN_READ_CAPABILITY', 'manage_options'); define ('WPCF7_ADMIN_READ_WRITE_CAPABILITY', 'manage_options');

Compilazione dinamica dei campi

Il fatto è che i valori predefiniti in Contact Form 7 sono statici. Ad esempio, si dispone di un parametro GET che si desidera utilizzare per compilare il modulo di contatto. Quindi la soluzione è Contact Form 7 Dynamic Text Extension di Sevenspark. Questo plugin fornisce un nuovo tipo di tag e consente la generazione dinamica di contenuti. Dopo aver installato e attivato il plug-in, Contact Form 7 avrà due nuovi tipi: Dynamic Text Field e Dynamic Hidden Field.


Sommario

Come puoi vedere, questo plugin per moduli ha un grande potenziale e abbiamo coperto solo una piccola percentuale di tutte le funzionalità. Se non hai trovato qualcosa qui, tuffati nei documenti sul sito ufficiale. Non aver paura di usarlo adesso! Divertiti!

Utilizzi già il Modulo di contatto 7 e hai un consiglio da condividere con noi? O c'è un altro modulo di contatto per WordPress che consiglieresti? Fateci sapere nei commenti!