In un precedente post ho parlato di come sia possibile inserire un Contact Form all’interno del proprio blog o sito attraverso l’installazione di un plugin. Il plugin recensito la scorsa volta aveva come caratteristica la semplicità e la velocità d’uso in quanto bastava inserire una semplice riga all’interno della pagina destinata al modulo di contatto per avere tutti i campi già impostati. Quello a cui faremo riferimento oggi più o meno fa la stessa cosa, ma può essere personalizzato come vogliamo noi. Il plugin in questione si chiama Contact Form 7 e giunto alla versione 2.4.6 (nel momento in cui scrivo) ed è disponibile in molte lingue fra cui l’italiano.
Detto questo vediamo come installare il plugin su WordPress.
Accediamo al pannello di amministrazione del nostro sito ed entriamo all’interno della sezione plugin.
Clicchiamo su Aggiungi Nuovo, scriviamo all’interno del box “Ricerca plugin per parole chiave, autore o tag” la parola Contact Form 7 e premiamo su Cerca plugin.
Nella lista che appare, quasi sicuramente visibile in prima posizione, possiamo notare la voce Contact Form 7.
Clicchiamo su Installa ora per integrare il plugin alla nostra installazione di WordPress.
Attendiamo qualche istante e attiviamo il plugin cliccando su Attiva plugin.
Dalla pagina che si apre, contenente la lista dei plugin installati, clicchiamo su Impostazioni sotto la voce Contact Form 7.
Verrà aperta la finestra per creare e personalizzare il nostro modulo di contatto e come possiamo notare abbiamo già un modulo creato, ma come vedremo potremo modificarlo a nostro piacimento.
Cominciamo con l’analizzare le varie sezioni a disposizione.
- In alto a sinistra abbiamo la voce Modulo di contatto1 (1) che rappresenta quello presente di default.
- Accanto a questa voce abbiamo Aggiungi nuovo (2) per inserire i vari campi personalizzati.
- Sotto queste voci abbiamo il box anteprima Modulo (3) e il menu a tendina Genera tag (4).
- In basso è presente la sezione Mail (5) con i vari campi da personalizzare e il box (6) nella quale inserire il testo con i codici dei menu che poi riceveremo via email.
- Nella sezione Mail2 possiamo riempire il campo “Corpo del messaggio” (6) allo stesso modo di come abbiamo fatto sopra, modificando solo la mail di riferimento.
- Nella sezione Messaggi (7) possiamo personalizzare il messaggio che l’utente visualizzerà dopo aver compilato e spedito il modulo.
Vediamo come procedere per creare un modulo personalizzato.
Clicchiamo su Aggiungi nuovo e nella finestra che si apre selezioniamo la lingua preferita.
inseriamo il titolo personalizzato del modulo di contatto all’interno del box Senza titolo e premiamo su salva.
Lasciamo i campi già inseriti in Modulo e dal menu a tendina Genera tag (1) scegliamo cosa vogliamo aggiungere.
Se vogliamo inserire un menu a tendina contenente più opzioni di contatto selezioniamo la voce Menu a cascata. Nella finestra che si apre scriviamo, all’interno del box opzioni, le voci desiderate e premiamo con il mouse su un punto al di fuori del box. Copiamo il codice in marrone all’interno del box Modulo e il codice in verde all’interno del box Corpo del messaggio.
Possiamo inserire allo stesso modo tutti i campi desiderati ricordandoci di premere su Salva in fondo alla pagina, per confermare le modifiche. Per inserire il modulo, all’interno di una pagina o in sidebar tramite widget ( aspetto/Widget/testo), dobbiamo copiare ed incollare il codice in alto.
A fine lavoro il modulo si presenta come l’immagine sotto.
Articoli correlati che ti potrebbero interessare:
- Contact Form, creare un modulo di contatto su WordPress
- Il modulo di controllo dei plug-in installati su Firefox causa crash e rallentamenti? Disabilitiamo la funzione
- Inserire i sottotitoli ai video di Youtube
ciao scusa ma nn ci sono riuscita mi aiuteresti?
@Rita
In quale fase ti blocchi?
Ciao,
ho installato contact form nella pagina dei contatti e funziona perfettamente.
Adesso però voglio spostarlo nella home sulla sidebar,
ho fatto copia e incolla del codice su un nuovo testo widjet
ed è stato tutto molto semplice.
Il problema sta nel fatto che lo spazio del “il tuo messaggio”
fuoriesce dal bordo perchè è largo e dovrei ridurre le dimensioni.
Mi potresti aiutare, te ne sarei grato
Luca
@Luca
Utilizzi un tema gratuito?
si gratuito
grazie
@ Luca
Mi puoi dire il nome del tema?
Online Marketer
ciao
@Luca
In Aspetto/Editor, apri la sezione Style.css e scorri il codice fino ad individuare la parte relativa alla sidebar. In questa porzione di codice dovrebbero essere presenti le voci Margin, Padding, Width seguite dai valori in pixel o in percentuale. Modifica, aumentando o diminuendo, uno di questi valori per allargare o diminuire la sidebar. Fai delle prove ricordandoti di salvare le modifiche. Stai attendo a non cancellare parti di codice.
ho risolto modificando direttamente nel modulo.
prima Il tuo messaggio
[textarea your-message]
dopo
Il tuo messaggio
ciao e grazie
ecco il dopo mi era rimasto in canna
Il tuo messaggio
[textarea your-message]
Il tuo messaggio
@Luca
Meglio così
Ciao Luca, sto usando contact form 7 ma l’area del messaggio [textarea your-message] è troppo alta e avrei bisogno di diminuirne l’altezza, sai come posso fare? uso pagelines.
Grazie!
@Valeria
Credo tu debba farlo dalla sezione editor dei plugin. Quella relativa a Contact form dovrebbe contenere il codice che consente di variare la larghezza del box. Fai un tentativo.
Ciao! Grazie per i tuoi preziosi consigli. Avrei bisogno, per essere in regola con le normative sulla Privacy, di adattare la pagina di registrazione nuovo utente presentando l’ “Informativa in materia di trattamento dei dati personali” e le “Condizioni d’uso”.
Per ottenere questo avrei bisogno di inserire un piccola area di testo con inclusa tutta la policy, magari dando la possibilità di scrollare in giù e prevedendo le due opzioni Sì/No richieste dalla normativa ma solo un box di spunta per concedere il consenso al trattamento dati.
@Valeria
Testo privacy
Se ho capito bene vorresti inserire una sorta di box scrollabile con all’interno le norme per la privacy. In questo caso puoi usare questo codice html:
Il codice lo puoi inserire tramite widget o all’interno di una pagina utilizzando l’editor in modalità html. Il codice può essere personalizzato modificando i valori di larghezza (width), altezza (height) e quelli relativi al bordo (border). Una volta inserito l’utente di turno non dovrà fare altro che scrollare con il mouse per leggere l’intero contenuto.
Grazie Giuseppe!
Solo che non vedo nessun codice html… 
Cmq uso contact form 7 su wordpress, non so se questo può dirti qualcosa in più.
@Valeria
Hai ragione non avevo pensato che inserendo il codice nel commento tu l’avresti visualizzato materializzato. Ti ho inviato una email all’indirizzo che hai utilizzato per i commenti.