Vai al contenuto principale

Come personalizzare il modulo modulo di contatto 7

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Modulo di contatto 7 è un plugin WordPress incredibilmente popolare per la creazione di moduli di contatto. Ti consente di creare moduli senza codifica HTML. queste forme può offrire funzionalità come CAPTCHA, download di file, campi di indagine ecc ...

Sebbene lo stile 7 del modulo di contatto predefinito sia sufficiente per la maggior parte dei moduli di contatto di base, spesso è necessario modificarlo.

Ciò modifica la struttura del modulo predefinito per renderlo più accessibile. Aggiunge anche il shortcode [responsive] sopra il modulo in modo che se si verifica un errore durante l'invio del modulo, viene indicato sul modulo.

Se non hai mai creato un sito Web WordPress, scoprilo Come installare un blog WordPress con un client FTP

Per il modulo standard, il codice generato dal plugin è:

[risposta] Il tuo nome (richiesto) [testo * id-tuo-nome: tuo-nome] La tua email (richiesto) [email * id-tuo-email: tua-email] Il tuo oggetto [testo id-tuo-oggetto: tuo-oggetto] Il tuo messaggio [textarea your-message id: your-message] [submit "Send"]

Alcuni plugin per personalizzare il modulo Modulo di contatto 7

1. Modulo di contatto Stile 7

Le plug-in Modulo di contatto Stile 7 ha un numero di stili tra cui scegliere.

Elenco stili di contatto di 6Per gli utenti del tema Twenty Fifteen, esiste anche uno stile compatibile.

Per applicare uno stile, vai a " Stili di contatto> Modifica rapida Seleziona il modulo in cui desideri applicare lo stile, quindi fai clic su " Aggiornamento '.

Esempio di un modulo di contatto wordpress2. Modulo di contatto 7 Skins

Per utilizzare Skins Contattare 7 Modulo, crea un nuovo modulo di contatto e scorri verso il basso fino alla sezione Skin. Puoi scegliere un modello e uno stile per il tuo modulo.

Troverai modelli dedicati alle forme dieventi, registrazione e avviso.

Modulo di contatto modello wordpress pagina

Ecco come appare il modulo di indagine con lo stile Topazio usando il tema Twenty Fifteen.

Esempio di modulo di contatto 7 modulo di richiesta

3. Design materiale per modulo di contatto

Questi stili sono basate sullo stile Material design.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Questo plugin suggerisce di eliminare il modulo predefinito e di utilizzare i suoi codici brevi.

Ecco un esempio con il tema Hestia. Notare l'etichetta mobile quando il puntatore viene spostato in un campo del modulo.

Modulo di contatto esempio di material design 7Test del modulo di contatto 7 su alcuni temi di WordPress

Modulo di contatto con il tema ColorMag WordPress

Il più delle volte, Contact Form 7 erediterà lo stile del tuo tema WordPress. Questo è il caso del tema Coral scuro.

Modulo di contatto corallo scuro

Modulo di contatto con il tema WordPress ColorMag

Ecco il modulo senza stile personalizzato. Eredita il colore del pulsante blu Tema ColorMag WordPress.

Modulo di contatto con tema colormagHo iniziato caricando una foto da utilizzare come immagine di sfondo per il modulo e cambiando il codice delle etichette del modulo da grigio a bianco con un'ombra blu sul testo.

Le seguenti modifiche consistevano nell'aumentare i margini tra le etichette del modulo e tra i campi del modulo, modificare il pulsante di sottrazione e aggiungere un bordo quando il puntatore entra nei campi del modulo.

Anche la visualizzazione dei messaggi di errore / esito positivo quando il modulo viene inviato deve essere modificata in modo che vengano visualizzati correttamente.

La GIF che ruota quando il modulo viene inviato non è stata visualizzata correttamente, ho trovato un'alternativa a Loading.io e l'ho referenziata con CSS.

Ecco la forma risultante:

Risultato della personalizzazione di un modulo di contatto 7Ecco il codice:

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

div.wpcf7 {margin: 0; imbottitura: 1.5em; background: url ('your_background_image_url_here'); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .wpcf7 label, .wpcf7-submit {color: white; text-shadow: 1px 1px 0px rgba (40, 157, 204, 1); } .wpcf7 .wpcf7-form-control {10px 0 20px 0; } .wpcf7 .wpcf7-submit: hover {background: #186d8e; } .wpcf7-form-control: focus {border: 2px solid #289dcc; } div.wpcf7-response-output {background: #F8F8F8; allineamento del testo: centro; larghezza: 92.5%; margine: 1em 0em 1em 0em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } span.wpcf7-not-valid-tip {background: #F8F8F8; display: blocco in linea; larghezza: auto; imbottitura: 1%; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } div.wpcf7 .ajax-loader {background-image: url ('your_loading_image_url_here'); larghezza: 50px; altezza: 50px; }

Se non hai bisogno di scrivere il codice, ti suggeriamo di dare un'occhiata al nostro Plugin 10 WordPress per creare un modulo di contatto sul tuo blog

Scopri anche le alternative premium di 3 che ti aiuteranno a creare i tuoi moduli di contatto. 

1. Modulo di contatto W8

W8 Contact Form è uno dei plugin per moduli di contatto più popolari su WordPress. Offre molte funzionalità come l'invio a più destinatari, supporto per animazioni, creazione illimitata di moduli, stili diversi e un'ampia varietà di opzioni di personalizzazione aggiuntive.

Modulo di contatto W8 plugin per moduli di contatto wordpress

Inoltre, offre al tuo sito web o blog un sistema professionale per rendere più facile entrare in contatto con i tuoi clienti. Potrai personalizzare tutte le tue forme in base alle tue esigenze e ai tuoi gusti.

Download | Demo | Web hosting

2. Modulo di contatto

Contact Us Form è un plug-in reattivo per WordPress e uno strumento semplice ma ricco di opzioni di personalizzazione che ti permette di visualizzare un form chiaro e incoraggiante, sul quale i tuoi visitatori possono contattarti lasciando il loro messaggio.

Contattaci modulo modulo di contatto wordpress plugin

Sarai in grado di definire i campi necessari, scegliere il layout migliore dei campi e personalizzarlo completamente per incoraggiare i tuoi clienti o visitatori a lasciare i loro suggerimenti o messaggi.

Basta impostare l'indirizzo e-mail in cui si desidera ricevere i messaggi e utilizzarlo per far crescere la propria attività nella direzione più redditizia.

Download | Demo | Web hosting

3. Slick Popup Pro

Slick Popup Pro è un plug-in WordPress abbastanza semplice e leggero che converte qualsiasi modulo creato dal plug-in Contattare 7 Modulo in un popup. Usa il modulo e lo converte in un popup bello e perfettamente reattivo.Plug-in popup Wordpress slick popup pro

Il modulo popup può avere diversi usi, tra cui: un modulo di raccolta di informazioni, un modulo di contatto, un modulo di registrazione, un modulo di preventivo, un modulo di suggerimento / reclamo e altri.

Download | Demo | Web hosting

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Risorse raccomandate

Consulta altre risorse consigliate che ti aiuteranno a creare e gestire meglio i moduli di contatto sul tuo sito web o blog. 

Conclusione

Ecco ! Questo è tutto per questo tutorial, spero che tu abbia altre idee per personalizzare il tuo modulo di contatto. Non esitare a condividi con i tuoi amici sui tuoi social network preferiti

Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress.

Ma, nel frattempo, parlaci del tuo commentaires e suggerimenti nella sezione dedicata.

...  

Questo articolo contiene i commenti 2

  1. Per creare un sito web professionale devi essere preciso e conciso per convincere rapidamente l'utente. Ti offriamo l'opportunità di creare un sito web professionale, sia esso oggetto della produzione di un sito vetrina o di un portfolio. La produzione di un sito online o di un sito Web professionale è ora alla portata di tutti. Ecco perché il tuo sito Web di Orson aggiunge tutte queste funzionalità per natura.

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
106 azioni
quota4
Tweet
Enregistrer102