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, creane uno nuovo modulo di contatto e scorri verso il basso la pagina 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.

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 7Contact Form 7 test su alcuni Temi 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:

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 di modulo di contatto il più popolare 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 Estensione di WordPress abbastanza semplice e leggero che converte qualsiasi modulo creato dal plugin 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 per la raccolta di informazioni, a modulo di contatto, un modulo di registrazione, un modulo di preventivo, un modulo di suggerimento / reclamo e altri.

Download | Demo | Web hosting

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.

...