Modificare il Contact Form 7 è un’esigenza tipica di chi lavora con il proprio sito web – ma anche per chi ha un blog e lo vuole personalizzare. Forse preferisce avere dei campi personalizzati per il proprio modulo contatti. Questo è uno dei plugin decisivi per chi lavora online e vuole inserire un modulo contatti su WordPress.
Contact Form 7 è così importante, utilizzato e scaricato dai blogger e dai webmaster che abbiamo deciso di inserirlo anche tra i plugin base del nostro hosting con WordPress preinstallato. Quindi, è la base di partenza per ogni blog o e-commerce e sito web. Vuoi scoprire come personalizzare e modificare Contact Form 7?
Ti capisco. Anche se è un ottimo plugin per inserire un form contatti su WordPress resta decisamente standard per chi ha voglia di osare. E magari cerca qualche dettaglio in più sia dal punto di vista estetico che delle funzionalità. Non c’è bisogno di cambiare plugin, puoi modificare lo stile di contact form 7 facilmente.
Argomenti
Il primo passo è quello che ti consente di installare Contact Form 7 sul tuo sito web. Esistono anche altri plugin per avere un modulo di contatti sul sito web ma di sicuro questo è uno dei più comuni.
Molti preferiscono utilizzare Contact Form 7 in primo luogo perché è facile da utilizzare, poi ha una community sviluppata intorno che risolve qualsiasi problema e, inoltre, è facile da modificare e personalizzare. Come procedere per avviare questi punti?
Una volta caricato il plugin devi creare un modulo contatto. Questo è caratterizzato da uno shortcode che devi copiare e incollare in un punto qualsiasi della pagina web se vuoi far apparire il modulo. Ricorda che per gli hosting WordPress gestiti da Serverplan il plugin in questione è già installato e pronto per essere usato.
Hosting WordPress preinstallato e gestito
Il primo passo da muovere se si vuole modificare il contact form di base: puoi cambiare i testi che appaiono nel modulo di base. Una volta installato il plugin, infatti, puoi avere un modello predefinito da inserire nelle tue pagine web con una serie di campi standard. Basta andare nell’etichetta Form per accedere all’editor.
Come puoi ben vedere dall’immagine, il modulo è composto da una serie di paragrafi con relativo campo. Questa sezione ti consente di modificare il testo cambiando il contenuto all’interno del tag HTML <p> (non toccare quello inserito nelle parentesi quadre, è il tag che serve a far funzionare il modulo).
Intervenendo sul codice puoi anche eliminare un campo o aggiungerlo. Non devi essere un esperto webmaster per farlo: le varie sezioni che puoi inserire di default su Contact Form 7 si trovano in alto, sono i bottoni che vedi nell’editor del singolo modulo. Basta cliccare per aggiungere in automatico la stringa che ti serve.
Questa permette di far apparire la sezione nell’area visibile al pubblico. Ad esempio, se vuoi che il modulo contatto abbia il campo in cui inserire il numero di telefono devi cliccare sul bottone tel per averlo in automatico. Puoi impostare il campo in questione come obbligatorio e aggiungere opzioni avanzate.
Una delle necessità impellenti per modificare il Contact Form 7: inserire un Captcha. Ovvero una sezione che consente di mostrare un codice alfanumerico per evitare lo spam. Questo passaggio di sicurezza consente di eliminare la posta indesiderata: per ottenere il risultato devi utilizzare un plugin specifico. Ovvero?
reCAPTCHA ti protegge dallo spam e da altri tipi di minacce. Con il modulo di integrazione incluso in Contact Form 7 puoi bloccare gli invii da parte di bot che potrebbero intasare la tua casella di posta elettronica. Poi, se utilizzi servizi avanzati come Powermail di Serverplan hai una protezione extra da sfruttare.
Spesso non c’è bisogno di modificare l’aspetto di Contact Form 7 perché di base questo plugin sfrutta il CSS – quindi lo stile grafico – del tuo template. Questo significa che si adegua perfettamente allo stile e alle linee estetiche. Però può esserci sempre bisogno di qualche attenzione in più. Quindi, come modificare il form?
Puoi utilizzare la funzione CSS aggiuntivo del tuo tema andando sul link Personalizza una volta fatto login. Questa finestra ti consente di aggiungere regole e salvarle senza alcuna complicazione. Per intervenire sul form basta utilizzare la classe di riferimento: .wpcf7. Ecco un esempio per modificare il CSS del form:
.wpcf7 {
background-color: #DCDCDC;
font: 16px verdana, sans-serif;
}In questo modo stai suggerendo di caricare i moduli di contatto con uno sfondo grigio chiaro (#DCDCDC) e di utilizzare un font Verdana con dimensione 16 pixel. Poi, per qualsiasi altra evoluzione del CSS puoi utilizzare un plugin molto comodo: Simple Custom CSS and JS, per modificare i fogli di stile senza stress.
Da leggere: perché il Contact Form 7 non funziona?
Sai qual è una delle soluzioni utili per personalizzare Contact Form 7 in base alle tue esigenze senza intervenire con il codice o il CSS? Installare un plugin aggiuntivo. Proprio così, puoi montare delle estensioni extra che consentono di ampliare le possibilità del plugin base e aggiungere funzionalità, stili, caratteristiche.
CF7 Skins for Contact Form 7, ad esempio, è uno dei nomi da ricordare. Permette di aggiungere, modificare e implementare moduli Contact Form 7 anche se non hai competenze tecniche: tutto si basa su un sistema di drag & drop, così puoi realizzare il tuo modulo contatti e personalizzare il modulo come preferisci.
Per intenderci, è una sorta di page builder per Contact Form 7: così come crei landing page con Elementor, allo stesso modo puoi realizzare un form personalizzato con questo plugin. Vuoi qualcosa di avanzato per modificare Contact Form 7 in modo da utilizzarlo per la tua attività specifica? Puoi inserire campi basati su logiche e condizioni ben precise. Ad esempio, se definisci un determinato valore puoi far apparire altre sezioni.
Questo avviene grazie a un plugin molto utile che si chiama Conditional Fields for Contact Form 7. Una volta installato su WordPress, puoi utilizzare questo componente aggiuntivo per inserire dei campi nel tuo modulo di contatto che fanno da condizione logica per altri passaggi. In modo da filtrare e smistare i contatti.
1 commento presente
Enrico ha commentato il 2022-12-07 17:00:24
buongiorno,
come mai tutti i giorni devo creare le chiavi, fare l’integrazione sul sito nel plugin contact 7 “integrazioni”?
appena fatto, il modulo di contatto funziona.
il giorno successivo no, dà errore bordato in rosso “il messaggio non è stato inviato”
genero una nuova chiave, e per la giornata funziona!
grazie infinite se mi potrà dare un consiglio