Come modificare e personalizzare il layout di Contact Form 7
Nella guida di oggi approfondiamo un argomento di interesse per molti utenti: come modificare e personalizzare il layout di Contact Form 7.
In passato, abbiamo già pubblicato un paio di guide su questo plugin. Contact Form 7 è uno degli strumenti WordPress in assoluto più utilizzati (se non lo conosci, serve a creare form di contatto personalizzati).
Di recente, la schermata di configurazione dei form di contatto è stata del tutto rivoluzionata. Ho quindi pensato che fosse il momento migliore per creare una guida aggiornata e, nello specifico, approfondire come personalizzare i form anche da un punto di vista grafico.
Non ci resta che iniziare.
Come modificare e personalizzare il layout di Contact Form 7
Inizia creando il tuo form
Per prima cosa, diamo un’occhiata alla schermata di creazione dei moduli di contatto. Come ho già anticipato, il plugin è stato aggiornato di recente, e questa schermata è molto diversa da come si presentava fino a qualche settimana fa.
Come vedi, il contenuto del form è configurato mediante codici HTML che racchiudono i tag per i vari campi.
Per aggiungere un nuovo campo, ti basta cliccare sulla tipologia di informazione che vuoi richiedere all’utente e compilare il box che appare in sovra-impressione.
Ti faccio un esempio: per aggiungere un campo dove l’utente può inserire il suo indirizzo email, clicca su email. Quindi, spunta la voce Required Field per renderlo un campo obbligatorio e lavora sulle altre opzioni avanzate.
Quando clicchi Insert Tag, il tag appare nei codici HTML. Ovviamente, devi ora formattarlo.
Come vedi nell’esempio, tutti i tag già presenti sono racchiusi tra i codici <p> e </p>, all’interno dei quali si trova anche un’etichetta di testo ed il codice <br />.
I codici <p></p> servono a creare un paragrafo. Nel concreto, servono a visualizzare le etichette ed i rispettivi campi in “blocchi”.
La cosiddetta etichetta è il testo che appare sopra il campo che l’utente andrà a compilare, mentre il tag <br /> serve a far sì che – dopo l’etichetta – il campo sia posizionato su una nuova riga.
Personalizzare il formato del tuo modulo di contatto su questa schermata richiede conoscenze base di HTML.
Ovviamente, più sei bravo con l’HTML, maggiori saranno le personalizzazioni che potrai fare al layout del tuo form.
Per riposizionare i campi all’interno del modulo, devi semplicemente spostare i tag. Sulla pagina, i campi avranno lo stesso ordine che hanno all’interno del codice HTML.
Se vuoi approfondire le tue conoscenze di HTML, ti consiglio di dare un’occhiata al corso HTML e CSS Webipedia, che ha ben 37 video lezioni (più avanti scoprirai anche perché il CSS è veramente molto utile).
Prima di andare avanti voglio ricordarti inoltre che se hai bisogno di assistenza di qualsiasi tipo sul tuo sito WordPress, puoi contattarci alla pagina Servizi.
Ti risponderemo tempestivamente, aiutandoti a risolvere ogni tuo problema.
Configura le email ed i messaggi
Nella schermata chiamata Email, puoi configurare le email di notifica che riceverai quando un utente invia il form.
In questa sezione, è importante che tu inserisca i tag relativi alle informazioni che vuoi ricevere dagli utenti.
Mi spiego meglio: se ti interessa che nel corpo del messaggio sia incluso l’indirizzo email fornito dall’utente, dovrai inserire il tag [your-email].
Nella schermata Messaggi, puoi invece inserire i messaggi che appariranno nei vari casi di utilizzo del form. Per esempio, se un utente non inserisce tutte le informazioni, se ci sono problemi tecnici di invio del modulo, eccetera.
Impostazioni aggiuntive
Infine, in Impostazioni aggiuntive puoi aggiungere degli snippet di codici per personalizzare il tuo form. Ecco alcuni snippet che puoi usare:
demo_mode: on
Questo codice serve ad attivare la modalità “Demo” per il tuo form. Questo significa che il form sarà visibile e formattato come l’hai configurato, ma sarà solo una demo – cioè, non invierà i messaggi.
on_sent_ok: "alert('sent ok');"on_submit: "alert('submit');"Tra le virgolette, aggiungi i tuoi codici Javascript per far sì che venga compiuta una specifica azione quando il form è inviato con successo (nel primo caso), o quando il form è semplicemente inviato, indipendentemente dall’esito (nel secondo caso).
Come creare una casella di accettazione
Una delle domande che mi viene fatta più spesso dagli utenti è “Come posso aggiungere la casella per l’accettazione del trattamento dei dati personali?”. Essere in regola con le normative sulla privacy è importante. Ecco quindi la soluzione offerta da Contact Form 7:
Semplicemente, quando ti trovi all’interno della schermata “Modulo” clicca il tag “Acceptance”. Contact Form 7 è già configurato in modo che l’utente non possa inviare il form senza spuntare la casella di accettazione.
Ci sono poi altre opzioni interessanti:
- per far sì che la casella sia spuntata per default, clicca “Make this checkbox checked by default“
- se invece vuoi che questa funzionalità lavori in modo inverso – cioè, che gli utenti possano inviare il form solo se la casella NON è spuntata – seleziona l’opzione “Make this work inversely”.
Personalizzare il look del tuo form di contatto
Veniamo ora al sodo e parliamo di come personalizzare il look del tuo form di contatto.
In questo senso, Contact form 7 è un plugin abbastanza “intelligente”, in quando sfrutta il più possibile i codici CSS del tuo sito al fine di dare ai moduli un look che sia coerente con le tue pagine.
Se però vuoi personalizzare il form, dovrai creare delle tue regole CSS.
Dove inserire i codici CSS? Hai diverse possibilità:
- Puoi inserirli direttamente nel file style.css del tuo tema. In questo caso, ricorda però che se aggiorni il tema le modifiche fatte al file style.css andranno perse e dovrai andare a re-inserirle.
- Puoi inserirli nel campo “Custom CSS”, se il tuo tema offre questa funzionalità. Sempre più temi premium hanno una sezione dove l’utente può inserire i propri codici CSS personalizzati. Non tanti temi gratuiti ce l’hanno, però sta diventando sempre più frequente.
- Puoi inserirli nel file style.css del tuo tema child. Se vuoi personalizzare il tuo sito attraverso i codici CSS, è un’ottima idea creare un tema child, che permette di aggiungere CSS al file style.css, senza però perdere le modifiche con gli aggiornamenti. Se ti interessano i temi child, ti consiglio di leggere questa guida.
- Se tutte le altre opzioni ti sembrano un po’ troppo complesse, prova il plugin Simple Custom CSS. Usando questo strumento puoi inserire i tuoi codici all’interno di un editore di testo, senza dover andare a lavorare direttamente sui file del template.
Come avrai capito, personalizzare il look dei moduli Contact Form 7 richiede alcune conoscenze di CSS. Se non hai mai utilizzato questo linguaggio di programmazione, per prima cosa ti consiglio di leggere questa guida. Quindi, di dare un’occhiata al corso di Webipedia che ho già menzionato nei paragrafi precedenti.
Personalizzare l’intero form
La classe dei moduli creati con Contact Form 7 è .wpcf7
Per personalizzare l’intero form (per esempio, cambiando lo sfondo o il font), ti basterà creare delle regole .css che includono questa classe. Ecco un esempio:
.wpcf7 {
background-color: #fff;
font: 15px arial, sans-serif;
}In questo caso, tutto il modulo avrebbe uno sfondo grigio e scritte in font Arial di dimensione 15 pixel.
Personalizzare tipologie di campi
Poi puoi personalizzare specifiche tipologie di campi. In generale, i campi Contact Form 7 hanno un selettore chiamato input. Ogni tipologia di campo si distingue nel seguente modo:
- il selettore input[type=”text”] si riferisce al campo di testo
- il selettore input[type=”email”] si riferisce invece al campo email
- e così via.
Ti faccio un altro esempio: se volessi rendere arrotondati i bordi del campo per l’inserimento dell’email, dovresti usare questi codici:
input[type=”email”] {
border-radius: 7px;
}Personalizzare campi specifici
La nuova versione di Contact Form 7 ha introdotto una funzionalità molto interessante per la personalizzazione di singoli campi all’interno del form.
Quando aggiungi un tag al modulo, puoi specificare al suo interno un ID a tua scelta, in questo modo:
[email* your-email id:campo-email]
Specificato l’ID, puoi scrivere le tue regole CSS come sempre. In questo caso, se volessi rendere verde lo sfondo del campo email, dovresti usare questo codice:
#campo-email {
background-color: #FF0000
}Come vedi, le regole CSS sono specifiche da caso a caso. Se vuoi apportare una modifica specifica al tuo modulo creato con Contact Form 7, ti consiglio di lasciare un commento qui sotto. Faremo il possibile per integrare il codice nella guida.
Conclusione
Siamo arrivati alla fine di questo post su come modificare e personalizzare il layout di Contact Form 7. Se usi questo plugin da qualche tempo, sicuramente avrai notato come sono cambiate le pagine per la costruzione dei form.
L’unico modo per personalizzare l’aspetto dei moduli creati con Contact Form 7 è attraverso il CSS. Questa caratteristica offre massima flessibilità, però potrebbe anche porre delle limitazioni a chi non ha conoscenze di programmazione. In ogni caso, ti consiglio di imparare almeno le basi di HTML e CSS, in quanto sicuramente ti saranno utili per personalizzare tutto il tuo sito WordPress – non solo i form di contatto!
Come al solito, se hai qualunque domanda o commento, non esitare a lasciare un messaggio qui sotto. Ti risponderò il prima possibile.
Andrea Di Rocco
Latest posts by Andrea Di Rocco (see all)
- Penalizzazioni di Google: come identificarle (Primi Passi) - 18 ottobre 2017
- Come guadagnare vendendo un e-book sul tuo sito - 17 ottobre 2017
- Come trasformare i tuoi visitatori in clienti con queste 4 tecniche - 16 ottobre 2017
SOS WP raccomanda SiteGround come migliore hosting in Italia
Acquista SiteGround tramite il nostro link e ricevi gratuitamente la nostra Assistenza Prioritaria
Saluti.. Molto interessanti i vostri argomenti.
Io utilizzo WordPress in Altervista.
Se possibile gradirei avere dei suggerimenti in riferimento ai sottoelencati argomenti:
* Come far partire un video lincato quando si apre la pagina, per lincato intendo inserito con il proprio link
* Come far si che dopo che si è premuto invio su un modulo lo stesso porti ad una pagina web, o ad un altro link (esempio inserimento di mail e nome per poi scaricare un ebook) o ad un’altra pagina informativa. In riferimento a questo ho già provato dei codici html che ho trovato in rete ma non funzionano.
Ringraziando porgo sinceri saluti
Ciao Pietro, intendi un video linkato da youtube?
Buongiorno. Si un video presente in Youtube.
Grazie per l’assistenza
Ciao Pietro, va aggiunto un codice ?rel=0&autoplay=1 al posto di ?rel=0” in questo modo il video partirà in automatico.
Ciao Andrea, scusa il disturbo. Ho una domanda da porti, ho creato un form con campi obbligatori, ma quando provo a inviare un messaggio senza riempire i campi obbligatori, non mi esce nessuna scritta di richiesta di compilare i campi. C’è un modo per inserirla?
Grazie mille
Certo Elena. L’elemento * richiede un campo obbligatorio: https://contactform7.com/text-fields/
Ciao, grazie per la risposta, ma non ho risolto.
Mi spiego, spero in modo chiaro.
Se non compilo alcuni degli elementi obbligatori, non appare la scritta “Campo richiesto” oppure “Devi accettare i Termini e le Condizioni”, ma appare solo una grossa “X” rossa di fianco alle caselle di testo.
Chiedevo, visto che tra le opzioni di messaggio, le stringhe “Campo richiesto” o similari, si possono modificare, se era possibile farle apparire.
Grazie mille e scusa se sono stata prolissa.
Ciao Elena, prova a integrare questo plugin https://it.wordpress.org/plugins/jquery-validation-for-contact-form-7/
Perfetto!! Grazie infinite! Ultima cosa, posso modificare la scritta “This field is required.” in un’altra lingua? Grazie grazie grazie!
Ciao Elena, il tuo sito è già con WordPress in italiano?
Il sito è in italiano come lingua predefinita, poi c’è in inglese, tedesco e russo (sto utilizzando Wpml).
Ciao Elena, WPML si occupa anche di tradurre i plugin (se hai la versione intermedia): https://wpml.org/documentation/plugins-compatibility/using-contact-form-7-with-wpml/
Grazie mille per la disponibilità, purtroppo non ho risolto. Per ora lo lascio così.
Grazie ancora, siete sempre geniilissimi ed affidabili.
Se hai ulteriore necessità, contattaci!
Ciao a tutti, io ho un problema con la pagina contatti del mio sito http://www.marilubeb.com/contatti/ come potete notare le dimensioni dei campi non sono uguali come accade invece per l’altra pagina http://www.marilubeb.com/controllo-disponibilita/. Non riesco a stabilire lo stesso ordine. Potete aiutarmi?
Ciao, hai creato la pagina con il Visual Composer?
Ciao Andrea, si proprio cosi.
Senza vedere impostazioni del Visual Builder e controllare le classi del form, non posso esserti di aiuto. Dovresti contattare il nostro reparto servizi, da qui: https://sos-wp.it/servizi/. Un saluto!
Ciao.
Ho creato un form in HTML e CSS e poi ho sostituito le label temporanee con quelle di CF7.
Ma il form non carica il css.
Allego una imamgine di come lo vedo e di come dovrebbe essere.
Grazie
http://i1305.photobucket.com/albums/s545/maui73/form_zpsdixoks3r.jpg
Ciao Maurizio, come hai inserito il CSS? Hai creato delle classi?
Ciao Andrea.
Si, sono tutte classi. Ho messo poi il css nella sezione del tema in cui mi permette di scrivere il css personalizzato.
Dovremmo controllare direttamente cosa hai fatto, da qui non posso dirti molto. Contatta il nostro reparto servizi https://sos-wp.it/servizi/ per un check più approfondito.
Ciao Andrea,
Vorrei sapere se è possibile impostare un modulo di contatto in modo che quando viene compilato mi arrivi un’email di notifica.
Grazie,
Francesca
Ciao Francesca, certo è possibile. Segui questa guida.
Ciao e grazie per i preziosi suggerimenti! Ho installato contact form 7 e, inizialmente, gli spazi che andavano compilati con nome, email ecc. erano delimitati da un box. Adesso il box è sparito, nel senso che l’utente deve posizionarsi un po’ a intuito con il cursore per scrivere i suoi dati. C’è un modo per recuperare i bordi? Grazie mille!
Ciao Serena, hai fatto qualche modifica/aggiornamento di recente? Un saluto!
Nulla di particolare, i soliti aggiornamenti di routine! Solo che i box sono spariti…e dal mio pc (e solo dal mio, perchè su altri no) sono cambiati i caratteri di tutto il sito. Non capisco proprio.
Anzi adesso che ci faccio caso sono scomparsi anche i box di “cerca nel sito” e “archivi”. Chissà cos’ho fatto…C’è un modo vero?
Grazie
Ciao Serena, verifica che succede se disattivi i plugin
Va bene disattivo e riattivo contact form allora, vedo che cosa succede! Grazie per ora
Caro Andrea, buonasera!
Ho scaricato il plugin Contact Form Maker come da te consigliato e ho fatto e installato sul sito il mio contact form. Ora però leggo in rete che bisogna inserire il campo di Accettazione del trattamento dati, ma dalla mia versione non riesco a trovare da dove questa azione si può fare :(. mi puoi aiutare? io ho installato Contact Form Maker di WebDorado
Ciao Francesca, usi la versione free o premium del plugin?
Carissimo, grazie della velocissima risposta. il vostro sito mi sta dando tantissimo, le vostre guide chiare e pratiche mi stanno aiutando passo passo nella mia nuova attività di neofita blogger :D
Ho risolto, poichè ho notato che il plugin da te consigliato è Contact Form 7 e non Contact Form Maker, e quindi disinstallando CFM e installando CF7 e seguendo le tue istruzioni è andato tutto OK!
Grazie ancora!
Ciao Francesca, bene!
Ciao Andrea, è possibile creare una classe CSS che modifichi solo il colore dei testi che compaiono in automatico di risposta nelle diverse situazioni dopo che l’utente prova ad inviare un messaggio?
Ciao Daniele, certo, è possibile. Puoi farlo creando una nuova classe CSS (se non vi è ancora) da applicare agli elementi da modificare. Un saluto!
Ciao Andrea,
è possibile aggiungere al plugin un pulsante tipo “Reset” che chiuda il Popup?
Grazie,
Enrico
Ciao Enrico, a quale popup ti riferisci in particolare?
Hai ragione , ho tralasciato di dire che ho integrato il plugin “Contact Form 7” al plugin “Popups – WordPress Popup”, leggendo una delle tue guide. Siccome il plugin Contact Form 7 da la possibilità di aggiungere un pulsante “Invia” col quale, dopo aver inviato il form, il popup nel quale il form è inserito si chiude automaticamente, mi chiedevo se fosse possibile inserire un pulsante “Chiudi” che chiudesse il Form senza dover inviare nulla. E’ possibile farlo, o bisogna andare a modificare il codice del plugin?
Ciao Enrico, il form si chiude se clicchi al di fuori di esso? Un saluto!
Buongiorno Andrea,
ho inserito il checkbox con la descrizione per l’accettazione della privacy, ma quando clicco sopra il segno di spunta non viene visualizzato, perchè?
Grazie per l’aituo
Ciao Manuela, hai pulito la cache del browser?
Si ho pulito la cache del browser
Hai anche provato a disattivare gli altri plugin?
Ciao Andrea, non riesco a modificare il font. Ho inserito nel css il seguente codice, provando sia con font-style che con font
.wpcf7 {
font-style: crimson text;
}
Come potrei risolvere? Grazie
Come non detto, risolto. Scusa il disturbo!
Ciao Andrea, come posso fare per far sì che all’interno del Checkbox con risposta multipla, le scelte siano messe una sotto l’altra? Per ora ho questa stringa
Servizi di intrattenimento extra richiesti
[checkbox* servizi-intrattenimento “Sassofonista per aperitivo”
“Sassofonista per intero evento”
“Pianista in sala”
“Caricaturista”
“Mago”
“Animazione bimbi”]
Grazie!
Ciao Sonia, devi seguire queste indicazioni, che andranno a modificare lo stile del plugin, mettendo le voci selezionabili una sotto l’altra.
Ciao, come faccio ad affiancare due o più moduli sullo stesso rigo? Mi vengono fuori sempre in verticale, ma ho la necessità di averne qualcuno anche affiancato. Grazie
Ciao Roberto, che tema stai usando?
Ciao Andrea, sto usando Avada. In pratica devo creare un form, all’interno di una pagina protetta con password nota sola ad alcuni utenti, con una serie di moduli da compilare e, dopo aver cliccato su INVIA, arriveranno via mail a una persona che ha il compito di leggerli ed elaborarli.
Ciao Roberto, leggi questa guida: https://theme-fusion.com/knowledgebase/using-contact-form-7-fields-columns/. Un saluto!
Ciao grazie per le tue guide davvero molto utili e precise. Avrei da chiedere una cosa, inserendo il check box con la spunta per accettare i termini del servizio vorrei aggiungere del testo linkato nella descrizione, ad esempio nella mia descrizione “spunta la casella per accettare termini e condizioni del servizio” vorrei linkare “termini e condizioni” così che si possa arrivare alla pagina privacy policy. Come posso fare per compiere questa operazione, ho già provato a inserire il codice html di ancoraggio link ma non mi evidenzia niente nel form resta come se fosse semplice testo.
Grazie per il tuo tempo :)
Luca
Ciao Luca, scrivici a supporto@sos-wordpress.it. Un saluto!
acceptance? non si capisce bene, dove va messo il tag, poi se l’utente vuole vedere la privacy dal modulo prima di inviarlo, non si capisce come fare, è quello il problea
Ciao Dario, puoi mettere il link che rimanda al testo della privacy, per conoscenza dell’utente.
Ciao Andrea,
che codici dovrei scrivere nel CSS del template, se volessi aumentare la larghezza e l’altezza del form?
Grazie mille
Ciao Attilio,
dovresti lavorare su questa stringa di css, esempio: .wpcf7-textarea {height: 60px; weight: 180px;}.
Un saluto!
Grazie Andrea.
Ciao Andrea,
non ho ben capito la formula esatta da scrivere nel CSS per allargare (ingrandire) il campo del messaggio e per allungare il campo delle altre voci (nome, email e oggetto). In pratica, vorrei estendere il form su tutta la pagina, perchè di default rimane allineato a sinistra, in un’area ridotta rispetto all’intera pagina. Grazie mille!
Ciao Primo, scrivici a supporto@sos-wordpress.it, indicandoci il link del tuo sito. Un saluto!
Salve! La form di contatto è perfettamente funzionante se compilo tutto tramite pc, ma se provo a compilare ed inviare il messaggio da qualsiasi tipo di cellulare, non mi permette di inviare il messaggio. Provo a cliccare su invia e non funziona il tasto. Come posso risolvere?
Ciao Valeria, verifica se il problema c’è anche con i plugin disattivati. Un saluto!
No, succede solo con Contact form 7 :/
Ho provato con Contact form builder e con la versione mobile funziona
Verifica di avere tutti i plugin aggiornati, anche.
Già fatto, ma niente da fare. Risolvo in altro modo. Grazie lo stesso!
Ok, ricordati anche del nostro team di assistenza!
Ok grazie, volevo evitare il jQuery ma mi vedo costretto,
ho un altra domanda, ho due date una di inizio e una di fine, vorrei che selezionando la data di inizio, quella di fine disponibile sia la medesima senza possibilità di cambiarla.
Esempio: data inizio 09-08-2016 – data fine 09-08-2016, in quanto devo gestire dei turni ad ora e non a giorni.Il plug-in ha questa funzione?
Grazie per il lavoro che fate.
Ciao Andrea, jQuery non lo eviti, in effetti ;-)
Dai una occhiata a questa estensione per Contact Form 7: https://it.wordpress.org/plugins/contact-form-7-datepicker/.
Salve,avrei bisogno di creare una casella di testo disabilitata di default,
attivabile solo dopo aver scelto una sola voce da un menù a tendina, mentre selezionando le altre rimane disabilitata.E’ possibile?Grazie
Ciao Andrea, dovresti rivolgerti alla nostra area servizi. Ti rispondiamo tempestivamente, un saluto!
Ciao, sto cercando di impostare il Contact Form 7 in modo da avere più caselle nella stessa riga – per esempio Indirizzo [area per inserire l’indirizzo] Cap [area per inserire il cap] nella stessa riga senza avere una sola casella per riga. Riesci ad aiutarmi? Sono principiante e non so da che parte prendere :/
Ciao Jessica, dai una occhiata a questo topic.
Ciao Andrea,
vorrei sapere se è possibile inserire il logo aziendale nella mail automatica che spediamo in copia a chi richiede informazioni tramite il form.
Grazie.
Si Roberto, puoi farlo.
Vi basterà inserire questo tag: img src=”{URL del logo della compagnia}” chiuso nel tag nel corpo del body message. Un saluto!
Sei davvero un grande. A presto. Roberto.
Ciao Andrea, ho un problema inserisco img src=”{http://www…………} ma quando arriva la mail automatica a chi ci richiede informazioni non compare il logo ma la stringa che inserisco con l’indirizzo. In cosa sbaglio. Help.
Saluti Roberto
Ciao Roberto, probabilmente il codice non è corretto. Scrivici a supporto@sos-wordpress.it, indicando la stringa incriminata. Un saluto!
Buon pomeriggio Andrea,
come faccio a centrare il bottone d’invio rispetto al CF?
Grazie mille.
Stefano
Ciao Stefano,
prova questo codice:
e inserisci questo nel CSS: contact-form-wrapper input[type=”submit”] {
float: none;
}
Ciao Andrea, scusa ma non capisco. Inserisco nel CSS
contact-form-wrapper input[type=”submit”] {
float: none;
}
ma non accade nulla.
Hai pulito la cache del browser?
oltre ad inserire quella stringa nel css c’è da fare altro?
ho provato anche con altri broswer
devi inserire anche questo codice:
. Se non lo visualizza il tuo browser, scrivici a supporto@sos-wordpress.it
Ciao Andrea, ho inviato una mail il 3 novembre ma non ho ricevuto risposta. Riesci a dirmi se è stata ricevuta? Grazie mille!
Ciao Gianluca, ho controllato ma non ci è arrivata nessuna email in tale data corrispondente al tuo mittente. Puoi reinviarcela? a supporto@sos-wordpress.it, grazie.
Fatto. Grazie!
grazie mille per aiuti che ci date, la mia richiesta è questa:
uso il tema Baskerville
inserito il Contact form 7 nella Side bar la larghezza di tutto il modulo è più grande della colonna della barra, nel senso che non si vedono finire le caselle di inserimento, è normale?
ho inserito altri moduli e le dimensioni sono ok
grazie mille
Ciao Dimitri,
inviaci una immagine del form in sidebar, scrivendo a supporto@sos-wordpress.it.
Un saluto!
Ciao Andrea,
bell’articolo, compimenti e grazie! :)
Vorrei modificare dimensione e colore delle scritte “il tuo nome”, “la tua mail” “il tuo messaggio”, mi sai dire come fare?
Il tema che sto usando è bridge, grazie!
Sara
Ciao Sara,
dai una occhiata a questa guida: http://www.wpbeginner.com/wp-tutorials/how-to-style-contact-form-7-in-wordpress/.
Un saluto!
Ciao Andrea, mi sapresti indicare come cambiare il colore del font quando si edita in un campo?
Hai qualche soluzione?
Grazie in anticipo
Ciao Roberto, dovresti inserire del codice nel tuo file CSS: esempio se tu volessi il colore rosso, inserire .wpcf7-form input {
color:#ff0000;
}
Salve, nel mio blog ho creato un form con CF7 inserendo anche il numero di telefono ed un menù a tendina da cui scegliere l’argomento oltre ad altre cose. Quando la gente mi scrive però dal form mi arriva tutto tranne che il numero di tel e la scelta del menù a tendina. Dove sbaglio? Riporto il codice HTML di seguito: Grazie.
Nome e Cognome (Richiesto)
[text* your-name]
La tua e-mail (Richiesto)
[email* your-email]
Cell. (Richiesto)
[text text-846]
Oggetto
[text your-subject]
Argomento della richiesta
[select menu-363 include_blank “Pratiche ISMEA” “PSR” “Agricoltura Biologica” “Certificazione Global Gap” “Domanda Unica”]
Scrivi qui la tua richiesta
[textarea your-message]
Seleziona la casella sottostante
[recaptcha]
Acconsenti al trattamento dei dati personali in ottemperanza al D.lgs 196/03
[acceptance acceptance-882 default:on]
[submit “Invia”]
Ciao Antonio,
scrivici a supporto@sos-wordpress.it,
un saluto!
Ciao e grazie per i tuoi articoli sempre utili. Come faccio ad inserire un testo con un link?
Es. vorrei inserire il checkbox da spuntare con la seguente scritta: Confermo di aver letto e accettato la
politica sulla privacy (il link lo metterei sulla parola privacy).
Ciao Riccardo,
ecco le istruzioni: https://wordpress.org/support/topic/plugin-contact-form-7-how-to-add-hyperlink-in-the-message-body-of-email.
Un saluto!
Ciao, come è possibile, se è possibile, collegare CF7 a un crm?
grazie
Ciao Antonio,
dai una occhiata a questo plugin: https://wordpress.org/plugins/contact-form-7-salesking-crm-addon/.
Un saluto!
Ciao Andrea, complimenti per i tuoi articoli…sono la mia salvezza!
CF7 è impostato con il pulsante giustificato a sinistra e invece dovrei metterlo centrale sotto il FORM. Cosa devo fare?
Ti ringrazio!
Ciao Tiziana!
Prova ad inserire
Grazie Andrea,
ieri cercavo di capire dove devo andare ad inserire i CSS di CF7.
In Editor?
Il tema che sto usando mi permette di inserire i CSS nella sezione di impostazioni generali del tema.
Posso inserire il codice qui? Però immagino che dovrò specificare che le indicazioni sono per CF7 con del codice ben preciso.
Scusa le domande probabilmente banali, ma di codice conosco poco e mi rendo invece conto che anche per wp serve impararlo.
Grazie per il tuo aiuto!
Tiziana
Ciao Tiziana,
esatto.
Quindi, oltre a quanto ti ho detto, aggiungi il codice CSS nella sezione Custom CSS del tema
.contact-form-wrapper input[type=”submit”] {
float: none;
}
Ciao Andrea, complimenti per la guida, a tal proposito però vorrei chiederti una cosa, sto realizzando un sito di B&B per un cliente e nella home devo inserire un form con data di arrivo partenza e il tasto invio tutto in linea solo che quando lo creo mi compare uno sotto l’altro e non sto capendo cosa dovrei fare per farle uscire come io desidero. grazie in anticipo
Ciao Andrea, che tema stai utilizzando?
Hai dato una occhiata a questo post?
Un saluto!
Che codici devo inserire per creare una casella di ringraziamento dopo la compilazione del form?
Ciao Davide,
intendi un redirect su una pagina di ringraziamento per avere compilato il form di contatto?
Dai una occhiata a questo topic: http://contactform7.com/redirecting-to-another-url-after-submissions/.
Un saluto!
Mi riferisco a come devo fare per far si che dopo l’invio della richiesta si apra una casella nella stessa pagina con il ringraziamento e il pulsante per chiuderla.
Ciao Davide,
Contact Form7 ti da la possibilità che ti linkato nel precedente messaggio, ovvero impostare una thank you page.
Per creare invece un box, contatta direttamente il supporto del plugin, perché si tratta di una impostazione non prevista di default.
Un saluto!
Ciao Andrea, complimnti per le tue conoscenze che ci metti a disposizione.
In merito al form avrei bisogno di sapere se è possibile creare una casella di verifica… (mi spiego meglio)
e-mail: info@info.xxx
conferma casella e-mail info@info.xxx
C’è una regola che possa verificare l’esatto inserimento?
Grazie in anticipo.
Ciao Roberto,
la risposta in questo topic, spero ti sia chiaro: http://contactform7.com/2015/03/28/custom-validation/.
Un saluto, continua a seguirci!
Ciao Andrea, ho inserito il tag confirm,
ho copiato il codice ed inserito nel css,
ma il controllo non fnziona, cosa sbaglio?
Grazie.
Ciao Roberto,
hai pulito la cache del browser?
Un saluto!
Grazie. Funziona:-)
Bene, sono contento!
Ciao Andrea,
ho un problema con “acceptance” per la privacy….
scrivendo:
[acceptance acceptance-720]Accetto dopo aver letto il trattamento dei miei dati personali e l’informativa sulla privacy.
mi trovo la casella dell’acceptance centrale con a capo il testo inserito non riuscendo a metterla di fianco.
Come posso risolvere? è veramente fastidioso =(
Ciao Riccardo,
puoi scriverci a supporto@sos-wordpress.it, inviandoci anche una screenshot per capire meglio la modifica da effettuare?
Un saluto, e grazie del tuo commento!
Salve, vorrei sapere come posso affiancare le caselle es. ” nome, email, luogo, telefono” e sotto il messaggio. Uso avada e come temeplate originale e vorrei riformulare un aspetto simile a quello per i contatti. Ho provato a guardare i codici ma non riesco proprio a trovare la parte che mi interessa.
Ciao Sofia,
hai ispezionato il CSS? Con quale strumento?
Un saluto!
Salve io ho bisogno di modificare l’altezza del campo ‘messaggio’. È troppo alta. Come posso fare?
Inoltre volevo chiedere, è possibile inserire i testi ‘nome, oggetto, meszaggio, etc’ all’interno della casella stessa? E quando si preme per compilare questi testi vanno via.
Ciao Daniele,
devi inserire del codice CSS in fondo al voglio di stile per modificare le dimensioni del campo messaggio, ad esempio:
wpcf7-form textarea { height: 200px; max-width: 280px; }
Non ho capito invece il resto della tua domanda, mi spiace :-(
Vorrei sottoporvi un nuovo add-on per Contact Form 7, é un campo di upload con preload, multiupload e anteprima (e tante altre cose): http://codecanyon.net/item/rcwd-upload-for-contact-form-7/13961382
Ciao Robbo,
grazie della tua segnalazione,
un saluto!
Ciao Andrea.
Ho dei problemi con dei formulari.
Questo per esempio:
http://www.vouparaitalia.com/viagens/formulario-de-passagens-aereas/
Vorrei fare in modo che si potesse inserire il campo della data con GIORNO, MESE, ANNO. Vorrei che comparissero automaticamente le barre oblique ma non funziona.
Ho inserito i codici:
Data de ida:
[datadeida]
[datadeida “D, d M y”]
Data de volta:
[datadevolta]
[datadevolta “D, d M y”]
ma non funziona.
Perchè il modulo possa essere inviato devo inserire la data così: aaaa-mm-gg
Potresti aiutarmi?
Non sono esperto.
Grazie.
Saluti
Ciao Dario,
hai già dato una occhiata a questo topic?
Un saluto, e grazie del tuo commento!
Ciao Andrea, sono alle prime armi con wordpress e sto diventando matto per cercare un plagin di contatto che mi permetta di mettere i campi su due colonne, hai qualche suggerimento?
Grazie Massimo
Ciao Massimo,
in questo link dovresti trovare un buon modo per permettere a Contact Form 7 di visualizzarsi su due colonne: http://www.wpsnippet.com/creating-responsive-two-column-form-using-contact-form-7/.
Se non riesci, scrivi a supporto@sos-wordpress.it.
Un saluto!
Preziosi consigli. Grazie e complimenti sinceri.
Enrico
Enrico, grazie a te per questo bellissimo commento.
Continua a seguirci, noi cercheremo sempre di fare del nostro meglio per rendere il sito sempre più fruibile e ricco di informazioni utili.
Grazie ancora!