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.
Per 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 '.
2. 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.
Ecco come appare il modulo di indagine con lo stile Topazio usando il tema Twenty Fifteen.
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.
Contact 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 con il tema WordPress ColorMag
Ecco il modulo senza stile personalizzato. Eredita il colore del pulsante blu Tema ColorMag WordPress.
Ho 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:
Ecco 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.
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.
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.
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.
- Plugin 6 WordPress per la verifica tramite CAPTCHA sui tuoi moduli
- Come aggiungere un modulo di contatto con WordPress Modulo di contatto 7
- Come creare moduli compatibili con GDPR su WordPress
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.
...
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.
Nessuna pubblicità per favore!