{"id":371535,"date":"2023-04-17T18:22:00","date_gmt":"2023-04-17T15:22:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=371535"},"modified":"2023-04-17T18:32:52","modified_gmt":"2023-04-17T15:32:52","slug":"come-personalizzare-il-tuo-modulo-di-contatto-7-style","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/come-personalizzare-il-tuo-modulo-di-contatto-7-style\/","title":{"rendered":"Come personalizzare il tuo modulo di contatto 7 Style"},"content":{"rendered":"\n

Il modulo di contatto \u00e8 un elemento molto importante di ogni sito web. Li usiamo per raccogliere e condividere vari tipi di informazioni e quindi dobbiamo fare in modo che appaiano cos\u00ec come il resto del nostro sito web<\/strong>. Un modulo di contatto troppo semplice, con uno stile che sembra semplicemente non appartenere alla pagina non pu\u00f2 instillare la sensazione di fiducia nei tuoi utenti, e sarebbe un peccato perdere il tuo pubblico proprio quando volevano prendere un passo avanti e lascia alcuni dei loro dati nel modulo di contatto.<\/p>\n

Un modo molto popolare per creare un modulo di contatto \u00e8 con un plug-in Contact Form 7<\/a>, uno strumento pratico e facile da usare che spesso \u00e8 incluso gratuitamente con molti temi WordPress che ti consente di creare facilmente tutti i tipi di moduli di contatto<\/strong>. Questo plugin copre tutti gli aspetti tecnici della creazione di un modulo di contatto: per modellarlo avrai bisogno di competenze aggiuntive o di un altro plugin.<\/p>\n

In questo articolo, ti mostreremo quanto facilmente puoi modellare i tuoi moduli di contatto per abbinare il design del tuo sito web con uno strumento gratuito<\/strong>.<\/p>\n

Resta sintonizzato per saperne di pi\u00f9 su:<\/p>\n

Utilizzo di componenti aggiuntivi Qi per Elementor per stilizzare i moduli di contatto<\/h2>\n

Qi Addons per Elementor<\/a> \u00e8 un plug-in ricco di funzionalit\u00e0 che viene fornito con 60 widget gratuiti e oltre 40 premium e include un widget Contact Form 7<\/a><\/strong> creato appositamente per aiutarti a stilizzare i tuoi moduli ed \u00e8 gratuito. Il plug -in richiede zero conoscenze di codifica<\/strong> e letteralmente chiunque pu\u00f2 usarlo comodamente. Non ti offre la possibilit\u00e0 di creare un modulo di contatto, ma se stai utilizzando il plug-in Contact Form 7, con Qi sarai in grado di personalizzare e riprogettare i tuoi moduli in modo che corrispondano perfettamente allo stile del tuo sito web.<\/p>\n

Qi Addons per Elementor \u00e8 facile da installare<\/a><\/strong> e configurare e la procedura \u00e8 praticamente la stessa di qualsiasi altro plugin.<\/p>\n

Dopo averlo installato, vai alla pagina in cui si trova il modulo di contatto che desideri modificare e scegli di modificarlo in Elementor.<\/p>\n

\"Come<\/a><\/p>\n

Quindi digita Contact Form 7 nel campo di ricerca<\/strong> nel menu a sinistra per trovare il widget Contact Form 7.<\/p>\n

\"Come<\/a><\/p>\n

Ora, quando lo hai ottenuto, fai clic su di esso e passa il mouse sopra il punto in cui desideri che sia il tuo modulo di contatto<\/strong>.<\/p>\n

\"Come<\/a><\/p>\n

Il modulo che stai aggiungendo in questo modo \u00e8 il modulo che hai creato con il plug-in Contact Form 7, questo widget \u00e8 stato creato solo per aiutarti a modellare il modulo, non puoi creare un modulo con esso<\/strong>. Quindi, ora hai il tuo modulo di contatto posizionato dove volevi che fosse e puoi vedere le impostazioni del widget Contact Form 7 nel menu a sinistra.<\/p>\n

\"Come<\/a><\/p>\n

La prima scheda del menu ti offre la possibilit\u00e0 di scegliere il tipo di modulo di contatto che desideri avere nella pagina<\/strong>. Possiamo scegliere tra tre opzioni: Modulo di contatto 1, Newsletter e Contattaci, ovviamente puoi scegliere uno qualsiasi dei moduli che hai creato in precedenza per il tuo sito. Ora ti mostriamo come abbiamo personalizzato il modulo Contattaci sul nostro sito.<\/p>\n

\"Come<\/a><\/p>\n

Impostazione dello stile del modulo di contatto<\/h2>\n

Per aprire le opzioni per lo stile del modulo, fare clic sulla scheda Stile<\/strong>.<\/p>\n

\"Come<\/a><\/p>\n

La prima opzione si riferisce a Tipografia etichetta<\/strong>, dove puoi impostare il carattere, la dimensione del carattere, la spaziatura tra le parole dell’etichetta, lo stile del carattere, la spaziatura tra le lettere nelle parole e la cosa fantastica \u00e8 che puoi vedere tutte le modifiche vivi immediatamente in modo da non fare nulla alla cieca<\/strong>.<\/p>\n

\"Come<\/a><\/p>\n

Nell’immagine qui sotto puoi vedere esattamente come le nostre scelte si sono riflesse sulla tipografia dell’etichetta.<\/p>\n

\"Come<\/a><\/p>\n

L’opzione successiva si riferisce al colore dell’etichetta<\/strong>.<\/p>\n

\"Come<\/a><\/p>\n

Puoi creare la tua tonalit\u00e0, a seconda delle tue esigenze. Scegliamo il blu scuro per la nostra etichetta perch\u00e9 si adatta perfettamente al colore di sfondo della pagina.<\/p>\n

\"Come<\/a><\/p>\n

Ora, quando hai impostato lo stile dell’etichetta, le impostazioni successive si riferiscono allo stile di input<\/strong>.<\/p>\n

\"Come<\/a><\/p>\n

Avrai anche opzioni simili qui: puoi scegliere lo stile, la dimensione e il colore del carattere tipografico di input<\/strong>. Puoi anche impostare il colore di sfondo del campo di input<\/strong> se non vuoi che sia bianco come \u00e8 per impostazione predefinita. Qui troverai anche le impostazioni per regolare lo stile del bordo dei campi di input<\/strong> e puoi scegliere tra solido, tratteggiato, scanalato, punteggiato, doppio o nessuno e per ciascuna delle opzioni puoi apportare ulteriori regolazioni.<\/p>\n

\"Come<\/a><\/p>\n

Puoi anche impostare stili diversi quando i campi di input sono attivi<\/strong>. Tutte le stesse opzioni sono a tua disposizione, ma verranno applicate solo quando i campi di input sono attivi.<\/p>\n

\"Come<\/a><\/p>\n

Le impostazioni successive fanno riferimento allo stile della casella<\/strong> di controllo. Questo minuscolo elemento \u00e8 molto importante in un modulo di contatto e dovrebbe apparire pulito e facilmente accessibile poich\u00e9 questo \u00e8 il passaggio in cui offri una sorta di scelta agli utenti del tuo sito web.<\/p>\n

\"Come<\/a><\/p>\n

Con Qi, renderai facilmente questo elemento perfetto. Puoi impostare la dimensione di input della casella di controllo<\/strong>, puoi lasciare pi\u00f9 o meno spazio tra due caselle di controllo e tra le caselle di controllo e altri campi di input<\/strong>. Puoi vedere chiaramente nella foto qui sotto come le nostre scelte influiscono sul modulo di contatto in questo caso:<\/p>\n

\"Come<\/a><\/p>\n

Le impostazioni successive che \u00e8 importante conoscere sono le impostazioni dello stile dei pulsanti<\/strong>.<\/p>\n

\"Come<\/a><\/p>\n

\u00c8 possibile modificare il colore dello sfondo del pulsante, impostare il bordo attorno al pulsante<\/strong> in modo che sia di colore e stile diversi (unito, tratteggiato o punteggiato). Puoi anche cambiare il colore del testo nel pulsante<\/strong> scegliendo il colore desiderato nell’opzione Colore pulsante. Tutte le modifiche sono immediatamente visibili in modo da poter capire facilmente quale delle impostazioni si riferisce a quale elemento del modulo di contatto.<\/p>\n

Se vuoi che lo stile del pulsante cambi al passaggio del mouse, fai clic sulla scheda Attivo e regola le impostazioni: puoi regolare il colore al passaggio del mouse, il colore di sfondo al passaggio del pulsante, il colore del bordo al passaggio del pulsante, ecc.<\/p>\n

\"Come<\/a><\/p>\n

Quando sei soddisfatto dell’aspetto del modulo di contatto, ora puoi regolare la spaziatura aprendo le impostazioni nella scheda Stile spaziatura<\/strong>. Puoi regolare la spaziatura per ogni elemento del modulo di contatto qui.<\/p>\n

\"Come<\/a><\/p>\n

Le impostazioni di Stile globale si riferiscono allo stile di allineamento del modulo di contatto. Puoi scegliere tra allineamento a sinistra, al centro e a destra.<\/p>\n

\"Come<\/a><\/p>\n

Le impostazioni<\/strong> dello stile di errore consentono di controllare lo stile del messaggio di errore che viene visualizzato quando qualcuno non digita i dati corretti nel modulo. \u00c8 possibile impostare facilmente la posizione del messaggio di errore, la tipografia e il colore.<\/p>\n

\"Come<\/a><\/p>\n

Le impostazioni dello Stile di risposta<\/strong> consentono di ottimizzare i dettagli delle risposte che vengono inserite nel modulo di contatto. Puoi controllare il carattere, il colore del carattere, impostare il riempimento della risposta e il margine di risposta, nonch\u00e9 il tipo di bordo.<\/p>\n

\"Come<\/a><\/p>\n

Ecco come appare il nostro modulo dopo che qualcuno ha inviato il messaggio:<\/p>\n

\"Come<\/a><\/p>\n

E, proprio cos\u00ec, hai un elegante modulo di contatto sulla tua pagina, pronto a lavorare per te.<\/p>\n