Consigli, hack, segreti. Consigli, hack, segreti Css pronto per il modulo di contatto 7

Dopo aver installato il plugin Contact Form 7 e aver visualizzato il modulo sulla pagina, apparirà qualcosa del genere.

D'accordo, non molto espressivo. Ma il suo aspetto può essere facilmente corretto.

Se ti senti a tuo agio nel modificare/aggiungere stili CSS, probabilmente vorrai iniziare con stile sul campo.

Input Wpcf7, input .wpcf7, textarea .wpcf7 ( /* stili qui: colore, sfondo, carattere, dimensione, bordi, ecc. */ )

Puoi quindi modificare gli stili per migliorare ulteriormente l'adattamento al tuo tema. per l'intero modulo.

Wpcf7 ( /* stili qui: colore, sfondo, carattere, dimensione, bordi, ecc. */ )

Come impostare uno stile solo per un campo specifico? Supponiamo che tu voglia modificare gli stili per un campo opzionale ' Soggetto‘, che è presente nel modulo per impostazione predefinita dopo aver attivato il plugin.

Devi solo aggiungere l'ID per il campo desiderato nel modello di modulo.

Oggetto [scrivi il tuo ID oggetto:oggetto-fb]

Quindi puoi aggiungere i tuoi stili CSS.

#fb-subject ( /* stili qui: colore, sfondo, carattere, dimensione, bordi, ecc. */ )

Non è necessario essere un programmatore web o un fanatico del computer per creare un design del modulo di feedback semplice ma gradevole. Puoi trovare facilmente tutte le informazioni necessarie su Internet, insieme ad esempi e spiegazioni.

Ecco un altro plugin Stili di modulo per il modulo di contatto 7 con stili preimpostati semplici ma carini.

Modulo di contatto semplice e pulito - Modulo di contatto pulito e semplice- con markup Bootstrap, captcha di Google e filtri antispam. A proposito, tieni presente che questo è un plugin piuttosto popolare.

Se effettui tu stesso una ricerca online, sono sicuro che troverai numerosi modelli e stili per Contact Form 7.

Ma se dedichi un po' di tempo allo styling, puoi creare un look unico per il tuo modulo di contatto di cui non solo sarai orgoglioso, ma riceverai anche molti messaggi dal tuo pubblico perché si divertiranno a scriverci e a inviarti email. . 🙂

Il popolare plugin Contact Form 7 non è particolarmente bello nella sua forma standard, quindi per molti utenti sorge la domanda su come modificare l'aspetto. Questo è esattamente ciò che faremo ora, cercherò di darti un'opzione universale adatta a qualsiasi sito.

Ne ho già parlato prima, ma non ne parliamo ora, ma passiamo direttamente alle modifiche progettuali necessarie.

Per prima cosa abbiamo bisogno di un file style.css, che può essere trovato nella scheda “Aspetto”/”Editor”. Per impostazione predefinita, si aprirà il file necessario. Ti consiglio di aprire diverse schede nel tuo browser:

1. Scheda Modulo di contatto 7 per modificare il modulo.
2. Una pagina sul sito web con un modulo di feedback.
3. Un editor con un file CSS aperto.

Le schede sono aperte, iniziamo ad apportare modifiche, prima modifichiamo leggermente il nostro modulo.

Aggiunta di classi al modulo di contatto 7.

Quando apriamo il modulo per la modifica, vedremo qualcosa di simile alla seguente immagine:

Questo modulo di feedback sarà simile a questo:

È noioso, sproporzionato e, francamente, non bello.

Per modificare l'aspetto del modulo dobbiamo fare un piccolo lavoro di stile, ma prima aggiungeremo alcune classi al modello del modulo. Per fare ciò, apri il modulo per la modifica (come nell'immagine sopra) e aggiungi le seguenti classi:

C'è poco da scrivere, quindi è difficile sbagliare. Probabilmente hai trovato consigli online senza utilizzare o aggiungere classi. Il fatto è che senza aggiungere classi potrebbero sorgere diversi problemi. Ad esempio, se vuoi aggiungere più moduli al sito contemporaneamente, assumeranno tutti un modulo identico e questo non è sempre conveniente, quindi dovresti utilizzare l'opzione che ho proposto.

Le classi sono state aggiunte, non è cambiato ancora nulla, il passo successivo è determinare l'id del modulo.

Determinare l'ID del modulo nella pagina.

Per prima cosa devi capire che lo stesso modulo avrà ID diversi su diverse pagine del sito, ecco come è progettato il plugin, aggiunge un parametro aggiuntivo ogni volta che viene richiamato il modulo. Ora diamo uno sguardo più da vicino.

Per modificare il modulo, è necessario aggiungerlo alla pagina o pubblicarlo nel posto richiesto, ovvero inserire lo shortcode. Successivamente, vai a questa pagina e fai clic con il pulsante destro del mouse sul modulo e seleziona "Visualizza codice", questo è per il browser Chrome, se ne hai uno diverso, quindi c'è approssimativamente lo stesso testo.

Nel codice che si apre, cerchiamo l'inizio del nostro modulo, assomiglia a questo:

Questo sarà l'ID del modulo. Tornando indietro, ti mostrerò cosa ha lo stesso modulo in un'altra pagina.

Come puoi vedere, l'identificatore differisce solo per poche cifre. Pertanto, prima devi decidere su quale pagina si troverà il modulo e solo dopo iniziare a modificare gli stili.

Bene, il passo successivo è stato fatto, abbiamo definito l'id, registrato le nostre classi, ora procediamo direttamente alla modifica dell'aspetto.

Styling Contact Form 7, lavorando con il file style.css

Guardando al futuro, dirò che difficilmente l'opzione che ho proposto ti sembrerà l'ideale. Il fatto è che tutti coloro che leggono queste righe vogliono vedere la propria forma esattamente come la immaginano. Non sono un telepate, e non riuscirò ad accontentare tutti, ma cercherò di darti un consiglio su dove e dove cercare informazioni e cosa modificare. Quindi perdonami subito per la possibile delusione, non esiste una panacea, dovrai lavorare un po'.

Modifica il colore di sfondo, i rientri e il carattere del modulo.

Una volta terminato il lavoro, passiamo agli stili. Per prima cosa, cambiamo (se necessario) il colore di sfondo del modulo, regoliamo i nostri rientri, selezioniamo il carattere richiesto e il colore del testo. Effettueremo tutte queste impostazioni conoscendo anticipatamente l'ID. Abbiamo discusso come riconoscerlo sopra.

Per prima cosa andiamo al file style.css, aggiungiamo le prime regole per l'ID del modulo (devi aggiungerlo in fondo al file), nel mio caso è wpcf7-f172-p34-o1, devi sostituisci il tuo ID:

#wpcf7-f172-p34-o1 (
margine: 5px;
imbottitura: 10px;
sfondo: #B3AFAF;
famiglia di caratteri: Georgia, “Times New Roman”, Times, serif;
colore: #000;
}

Ora vediamo il tutto più nel dettaglio:

1. Affrontiamo prima i rientri. Imbottitura esterna (dal bordo all'inizio del modulo) - margine: 5px, imbottitura interna (dall'inizio del modulo agli elementi interni) - imbottitura: 10px.
2. Il riempimento del modulo o il suo sfondo è determinato dalla proprietà background: #B3AFAF, puoi selezionare qualsiasi colore desideri semplicemente sostituendo il valore.
3. Decidiamo la famiglia di caratteri; se non vuoi cambiarla, puoi saltare questa regola (famiglia di caratteri: Georgia, “Times New Roman”, Times, serif).
4. Il colore del testo è determinato dalla proprietà color, che attualmente è impostata su nero (colore: #000).

Puoi sperimentare tu stesso questi parametri, selezionare rientri, colori e caratteri. Per fare ciò, devi solo modificare il valore, salvare la nuova opzione, aggiornare la pagina e vedere le modifiche. Non aver paura di sperimentare, qui non potrai rompere nulla, in casi estremi gli stili semplicemente non funzioneranno e potrai facilmente sistemare tutto com'era.

Determiniamo i rientri tra i campi e cambiamo la cornice.

Passiamo ai nostri campi, aggiungiamo i rientri:

#wpcf7-f172-p34-o1 p(
margine:5px;
}

Si tratta di rientranze lungo i bordi dei campi in modo che il testo e i blocchi non si fondano in un tutt'uno.

La fase successiva saranno le cornici, darò la mia versione e online puoi trovare molte opzioni che ti piacciono e sostituirle.

#wpcf7-f172-p34-o1 input,area di testo (
bordo: 3px doppio #000;
}

Qualcosa in più sul quadro. Un valore di 3px è la larghezza della cornice, double viene utilizzato due volte (se non serve, puoi rimuovere questa parola), #000 il colore della cornice, puoi anche sceglierne uno tuo.

Modificare la larghezza dei campi e la loro posizione.

Nome-cf (
galleggiante:sinistra;
imbottitura: 2px;
}
.nome-cf input (
larghezza: 270px;
}
input .thems-cf (
larghezza: 100%;
}
.clear-cf (
chiaro: entrambi;
}
.text-cf area di testo (
larghezza: 100%;
}

Ora vediamo il tutto più nel dettaglio:

1. La prima classe a cui ci rivolgeremo nome-cfr appartiene ai campi con nome ed email. Per loro impostiamo un margine di 2px ( imbottitura: 2px) e flusso ( galleggiante: sinistra) per allineare due campi in una riga.
2. Successivamente, regoleremo la larghezza dei campi impostandoli sulla dimensione ottimale (per il mio modello) di 270 px ( Ingresso .name-cf (larghezza: 270px;)). Se i tuoi margini sono ancora una riga o la dimensione è troppo piccola, scegli la tua opzione.
3. Faremo in modo che il campo con il nome del tema riempia l'intera larghezza del modulo, poiché potrebbe esserci più testo lì (input .thems-cf (larghezza: 100%;)). Se vuoi il tuo, indica il valore esatto in pixel.
4. Il blocco successivo che abbiamo aggiunto al modulo è progettato per annullare il flusso ( Ingresso .thems-cf (larghezza: 100%; )).
5. Proprio come nel caso precedente, rendi il campo con il testo del messaggio a larghezza intera ( text-cf textarea (larghezza: 100%;)).

Puoi aggiornare il file di stile e vedere le modifiche, se necessario, regolare le dimensioni in base alle tue esigenze.

Allinea il pulsante "Invia" al centro, modifica lo sfondo e la larghezza.

Andiamo sul nostro pulsante, allineiamolo al centro e aggiungiamo uno sfondo:

Invia-cf (
larghezza: 200px; /*larghezza del blocco*/
altezza: 25px; /*altezza*/
margine: 0 automatico; /* Imbottitura sinistra e destra */
}
.submit-cf input (
larghezza: 200px;
sfondo:#96B195;
}

Tradizionalmente, spiego cosa è cosa:

1. La prima regola è determinare la larghezza e l'altezza del blocco in cui verrà posizionato il pulsante e posizionarlo al centro del modulo.
2. La seconda regola è impostare il colore di sfondo del pulsante ( sfondo:#96B195, se non lo specifichi sarà dello stesso colore di tutti gli altri campi), imposta la larghezza del pulsante ( larghezza: 200px, è auspicabile che abbia le stesse dimensioni della larghezza del blocco, in modo che il pulsante non si sposti lateralmente).

Salviamo le nostre impostazioni e vediamo cosa abbiamo ottenuto:

Sono d'accordo che sia tutt'altro che chic, ma nel complesso sembra adeguato, sotto c'è la forma predefinita, penso che l'effetto sia evidente. Comunque abbiamo imparato modificare l'aspetto del modulo di contatto 7.

Spero che l'articolo ti sia stato utile, ma se qualcosa non va o hai problemi, lascia un commento e cercherò di rispondere (correggere).

Questo materiale descriverà in dettaglio la configurazione di Contact Form 7, un plug-in per una piattaforma così popolare per la creazione e la promozione di siti sul World Wide Web come WordPress. Questo strumento software consente di creare e configurare moduli di feedback.

Un po' di WordPress

Uno degli strumenti più popolari e diffusi per lo sviluppo e il riempimento delle risorse informative è WordPress. Inizialmente, questo prodotto software era focalizzato sulla creazione di blog semplici. Ma poi specialisti specializzati hanno integrato le sue funzionalità, il che ha permesso di creare altre risorse Internet utilizzando questo sistema di gestione dei contenuti.

Punti di forza e di debolezza di questa piattaforma per la creazione e la promozione di siti Web

I vantaggi di questa piattaforma software sono:

Semplicità e codice open source.

Una quantità impressionante di informazioni di riferimento.

La capacità di sviluppare qualsiasi risorsa tematica su Internet nel più breve tempo possibile.

Prestazioni elevate senza componenti aggiuntivi software aggiuntivi (plugin).

Ma gli svantaggi in questo caso sono i seguenti:

I siti web realizzati su WordPress non saranno in grado di gestire carichi pesanti.

Si verifica una diminuzione della velocità della risorsa Internet durante l'installazione di mini-programmi aggiuntivi o, come vengono anche chiamati, plug-in.

e perché i siti basati sulla piattaforma WordPress ne hanno bisogno?

La funzionalità di base di un sistema di gestione dei contenuti come WordPress è molto modesta. È sufficiente sviluppare i blog e i siti Web più semplici. Per migliorare in qualche modo la situazione con la funzionalità della piattaforma software e aggiungerle flessibilità, gli sviluppatori devono installare mini-programmi speciali, che in gergo professionale sono chiamati plugin. Uno di questi è il modulo di contatto 7. L'impostazione del plug-in consente di creare un modulo di feedback con un livello ampliato di funzionalità su una pagina specifica del sistema di gestione dei contenuti.

Specializzazione "Moduli di contatto 7"

Come notato in precedenza, creare feedback tra il visitatore e l'amministratore di una risorsa Internet basata sulla piattaforma WordPress è il compito principale di Contact Form 7. L'impostazione della posta, la modifica di un modello, l'invio di vari file non è un elenco completo delle funzionalità che questo fornisce un mini-programma. In questo caso, il carico sulle risorse hardware del sito sarà relativamente ridotto e la sua presenza non comporterà una diminuzione significativa delle prestazioni del sito o del blog.

Procedura di installazione del plugin

Esistono tre modi per installare i plugin sulla piattaforma WordPress:

Scaricando un archivio ZIP dal World Wide Web e “caricandolo” nella directory appropriata della risorsa Internet.

Utilizzo di vari tipi di client FTP.

Delle tre opzioni per l’installazione dei plugin, la più sicura è l’ultima. In questo caso, il codice del programma viene scaricato dal sito ufficiale e sicuramente non contiene vari tipi di frammenti dannosi e pericolosi. La procedura per installare il plugin in questo caso è la seguente:

Vai al pannello di amministrazione di WordPress.

Quindi è necessario passare alla sezione "Plugin".

Nella finestra che si apre seleziona “Aggiungi nuovo”.

Nella barra di ricerca, inserisci il nome del plugin - Modulo di contatto 7 - quindi sposta il puntatore del mouse sul pulsante "Cerca" e fai clic una volta. Successivamente inizierà l'operazione di ricerca del software richiesto.

Al termine, verrà visualizzato un elenco dei plugin trovati. In questo elenco troviamo quello di cui abbiamo bisogno e facciamo clic sul pulsante con l'etichetta "Installa", che si trova di fronte ad esso.

Successivamente, il sistema di gestione dei contenuti scaricherà e installerà automaticamente questo plug-in.

Il passaggio successivo è attivare il software installato. Per fare ciò, vai alla scheda "Plugin" e trova Contact Form7 nell'elenco. Accanto c'è la scritta: "Attiva", cliccaci sopra una volta con il mouse.

Aggiorniamo il pannello amministrativo del sistema di gestione dei contenuti e tra le sue voci troviamo Contact Form7. Questa è la condizione per un'installazione riuscita di questo plugin popolare e funzionale.



Algoritmo di configurazione per “Moduli di Contatto 7”

La configurazione del modulo di contatto 7 è composta dai seguenti elementi:

Creare un nuovo modulo o modificarne uno vecchio creato durante l'installazione del plugin. L'esperienza dimostra che nella maggior parte dei casi è meglio utilizzare l'opzione per creare un nuovo modulo.

Nella fase successiva, seleziona la lingua del modulo e impostane il nome.

Quindi è necessario riconfigurarne il modello, se necessario.

Salva le modifiche apportate.

Creiamo una nuova pagina con il codice ricevuto in precedenza.

Nella fase finale, è necessario visitare il sito Web e verificare il corretto funzionamento dell'elemento dell'interfaccia della risorsa Internet creata.

Crea un nuovo modulo

Immediatamente dopo l'attivazione, questo plugin crea un modulo predefinito per porre domande ai visitatori del sito o del blog. Naturalmente può essere modificato e personalizzato secondo necessità. Ma sarà molto più semplice eliminarlo e crearne uno nuovo con un set completo di tutte le funzionalità necessarie. Per fare ciò è necessario fare quanto segue:

Vai al menu di questo plugin e seleziona “Moduli”.

Nella finestra che si apre successivamente, è necessario spuntare la casella accanto alla voce “Contact Form1”.

Quindi, sopra di esso, nell'elenco a discesa "Azioni", seleziona "Elimina".

In risposta, apparirà una domanda per confermare le azioni eseguite. È necessario confermare l'eliminazione del modulo e fare clic sul pulsante "Sì".

Successivamente, seleziona la voce di menu: “Crea nuovo” nel pannello amministrativo “Wordpress” “Contact Form7”.

Nella finestra che si apre, nell'elenco a discesa, seleziona la lingua dell'interfaccia del modulo futuro: "Russo". Quindi fare clic sul pulsante "Crea".

Successivamente, per impostazione predefinita verrà generato il codice iniziale per il nuovo modulo di feedback per WordPress. Successivamente, dovrai eseguire operazioni come la configurazione del Modulo di contatto 7.

Imposta il nome del modulo

Dopo aver completato tutti i passaggi precedenti, apparirà una finestra per inserire il nome del nuovo modulo in Contact Form 7 Style. La configurazione inizia con questa semplice operazione da un lato. Ma è meglio dare il nome al modulo in base all'ottimizzazione dei motori di ricerca. Pertanto, l'opzione più ottimale in questo caso sarebbe, ad esempio, "Modulo di feedback" o "Poni una domanda all'amministratore del sito". Una volta deciso il nome di questo elemento dell'interfaccia, inserirlo nel campo corrispondente della finestra di richiesta.



Modifica del modello "Moduli di contatto 7".

Nella stessa finestra con il nome del modulo creato ci sono 4 schede. Il primo è “Modello”. Per impostazione predefinita, qui vengono formati solo 5 elementi:

Luogo in cui digitare il nome del visitatore della risorsa Internet.

Campo in cui inserire l'indirizzo email del visitatore che ha posto la domanda.

Un altro campo permette di inserire l'oggetto della domanda.

Per impostazione predefinita, l'ultimo elemento del modulo è un pulsante denominato "Invia".

Se necessario, è possibile modificare il testo in questo campo e aggiungere altri elementi dell'interfaccia. Per fare ciò, basta selezionare il codice di qualsiasi elemento di testo (ad esempio, quella parte del codice in cui è indicato l'oggetto del messaggio e copiarlo utilizzando il menu contestuale nello stesso campo in un altro posto. A destra ci sono i parametri (ne parleremo in dettaglio nel paragrafo successivo) in cui selezioniamo l'elemento che ci interessa, dopodiché accanto all'elenco a discesa apparirà il codice necessario, quindi copia questo codice e incollalo al posto del messaggio codice soggetto Scegli il nome dell'elemento a tua discrezione.

Impostazione della lunghezza dei campi e altro ancora

Nello stesso posto puoi modificare l'input nel modulo di contatto 7. La regolazione della larghezza di qualsiasi campo di testo viene eseguita come segue:

Ad esempio, è necessario aumentare a 55 il numero di caratteri nel nome di un visitatore di una risorsa Internet. Di default ce ne sono 40.

Per fare ciò, aggiungi i numeri 60/55 alla fine del codice. Il risultato sarà il codice. Dopo aver salvato le modifiche, la lunghezza di questo campo sarà 60 e il numero massimo di caratteri che è possibile inserirvi sarà 55.

Puoi ridimensionare il campo di testo del messaggio allo stesso modo. Solo in questo caso è necessario modificare il codice di questo elemento come segue. In questo caso, 40 è il numero di lettere in una riga e 30 è il numero totale di termini in questo elemento dell'interfaccia nel modulo di contatto 7. L'impostazione dell'aspetto del modulo stesso viene effettuata con precisione selezionando i valori dei parametri di ciascuno elemento individuale. Pertanto, si consiglia di specificare valori specifici per ciascun parametro indicato in questa sezione nel codice di ciascun elemento.



Altre schede del modulo

Come notato, la prima scheda si chiama "Modello modulo". Il prossimo in questa finestra è "Lettera". Specifica i parametri della posizione a cui verrà inviata la posta da questa risorsa Internet. Nella scheda "Notifica" viene generato il testo del messaggio, che verrà visualizzato se la lettera viene inviata con successo. C'è anche la possibilità di preparare un messaggio nel caso in cui non sia possibile contattare l'amministratore del sito utilizzando i mezzi. L'ultima scheda nel modulo di contatto 7 è "Impostazioni avanzate". Contiene quei parametri che vengono utilizzati molto, molto raramente nella pratica. Ad esempio, puoi utilizzarlo per impostare il monitoraggio del testo inserito dall'utente utilizzando le metriche Yandex.

Campi che possono essere aggiunti utilizzando questo plugin a questo modulo

L'impostazione del modulo di contatto 7 per Wordpress consente di aggiungere i seguenti elementi dell'interfaccia al modulo di feedback:

• Un campo di test è un elemento dell'interfaccia universale in cui è possibile immettere qualsiasi set di caratteri.

  E-Mail - luogo in cui inserire il nome della casella di posta elettronica.

  URL - campo per inserire l'indirizzo di una pagina Internet.

  Numero di telefono: consente di inserire un numero di telefono in formato internazionale.

  L'elemento “Numero (casella numerica)” consente di creare un campo di input per qualsiasi valore intero (ad esempio, l'età del visitatore).

  L'elemento "Numero (Slider)" aggiunge uno slider al modulo che consente di selezionare un valore numerico da un intervallo specificato.

  La voce “Data” crea uno speciale campo di input in cui è possibile specificare la data richiesta. Quando attivi questo elemento dell'interfaccia, in basso appare un calendario in cui puoi selezionare immediatamente la data desiderata.

  A sua volta, la voce del menu a discesa "Campo di testo" è destinata alla digitazione della parte di testo dell'e-mail.

  La voce successiva - “Menù a tendina” - consente di selezionare il parametro richiesto da un elenco fisso.

  Ma "CheckBoxes" è destinato a selezionare uno o più valori da un determinato elenco.

  L'elemento dell'interfaccia “Radio Buttons” è quasi identico al precedente. L'unica differenza è che in questo caso puoi selezionare solo un'opzione corretta, mentre “CheckBoxes” può avere diversi valori corretti.

  La voce “Accettazione” permette di aggiungere una sola casella di controllo al modulo creato. Di norma, viene utilizzato per familiarizzare con eventuali condizioni e senza accettarle non sarà possibile inviare un'e-mail in futuro.

  La voce “Menu” ti consente di creare una sezione speciale nell'interfaccia che proteggerà la tua casella di posta dallo spam. In questo caso sarà necessario fornire la risposta corretta alla domanda prima dell'invio.

  La seconda opzione di sicurezza è CAPTCHA. Quando lo selezioni, al modulo verrà aggiunta una sezione separata, in cui verrà visualizzata un'immagine con simboli e un campo aggiuntivo per inserirli.

  L'elemento successivo è "Invio di un file". Permette di aggiungere al testo della lettera un file con varie spiegazioni e commenti per l'amministratore della risorsa.

  L'ultimo elemento - "Pulsante Invia" - consente di aggiungere un elemento dell'interfaccia corrispondente.

Salva le modifiche apportate

Una volta impostati i valori richiesti e configurato correttamente il modulo, è necessario salvare il tutto. Per fare ciò, nella finestra di modifica del plugin, vai nella sua parte superiore. Dovrebbe esserci un pulsante "Salva" qui. Puntare il puntatore su di esso e fare clic su di esso una volta. In risposta, verrà visualizzato il codice del modulo, che selezioniamo utilizzando lo stesso puntatore del mouse e copiamo. Successivamente, spostati sulla voce “Pagine” nel pannello amministrativo del sistema di gestione dei contenuti. Quindi creiamo una nuova pagina con il nome richiesto (ad esempio "feedback", "Contatti" o "Fai una domanda all'amministratore della risorsa"). Quindi spostiamo il cursore di composizione nel campo di immissione del suo codice. In questo caso, è necessario cambiare la modalità di digitazione del codice su "Testo" nel pannello dei parametri. Successivamente, inserisci il codice del modulo ricevuto in precedenza. Successivamente, sul lato destro dell'interfaccia, trova il pulsante "Pubblica" e posiziona il mouse su di esso. Nella fase successiva, fare clic una volta con il pulsante sinistro del mouse su questo elemento dell'interfaccia del sistema di gestione dei contenuti.



Controllo del risultato

Dopo aver eseguito le manipolazioni precedentemente indicate, è necessario aggiungere una nuova pagina all'interfaccia della risorsa Internet, sulla quale verranno visualizzati gli elementi specificati nel modulo di contatto 7. La configurazione dell'interfaccia è, in linea di principio, completata. Devi solo verificare che il software sia configurato correttamente. Per fare ciò, devi andare alla pagina principale del sito, blog o portale. Quindi nell'elenco delle pagine troviamo quella su cui è stato inserito il modulo di feedback. Andiamo ad esso, inseriamo i parametri corretti in tutti i campi contemporaneamente e inviamo una lettera di prova a noi stessi. In risposta, dovrebbe apparire un messaggio informativo che indica il completamento con successo di questa operazione. Quindi proviamo a inviare un'altra lettera con i campi vuoti. Successivamente, dovrebbe apparire un messaggio che informa che è necessario impostare tutti i parametri del modulo selezionato. Se in entrambi i casi si sono ottenuti i risultati sopra indicati, allora il modulo di feedback creato funziona correttamente.

Pro e contro del plugin. Opzioni alternative

Un'ottima soluzione per uno sviluppatore alle prime armi per creare un modulo di feedback è il miniprogramma Contact Form 7. L'impostazione dell'invio di posta, la creazione di elementi dell'interfaccia e altri importanti elementi dell'interfaccia in questo caso è per lo più automatizzata e richiede una conoscenza minima dell'utente. Pertanto, per una semplice risorsa Internet entry-level con un amministratore inesperto, questa è un'ottima soluzione. Ma qualsiasi plug-in rappresenta un carico aggiuntivo sulle risorse del sito Web, che riduce le prestazioni. Di conseguenza, gli utenti più avanzati consigliano di abbandonare un modo così semplice di creare un modulo di feedback. Puoi anche crearlo tu stesso utilizzando HTML, CSS e JS, anche se con un livello di funzionalità inferiore. Ciò ridurrà la necessità di risorse informatiche sul sito e aumenterà significativamente il livello di prestazioni.



Risultati

Questo articolo descrive passo dopo passo come configurare Contact Form 7. Questo plugin ha davvero un alto livello di funzionalità; puoi usarlo per creare qualsiasi modulo di feedback. D'altra parte, l'utilizzo di un plug-in aggiuntivo come parte di un sistema di gestione dei contenuti aumenta il carico sull'hardware del sito. Pertanto, si consiglia agli amministratori di siti inesperti che utilizzano questo sistema di gestione dei contenuti di utilizzare questo plug-in per tali scopi. Ebbene, gli utenti più avanzati possono fare a meno di Contact Form 7. In questo caso, la configurazione del plugin non è assolutamente necessaria.

Avevo bisogno di ottenere un bel modulo per un plugin, i moduli necessari ieri, ma è piuttosto difficile sedersi e scrivere manualmente gli stili e per molti progetti semplicemente non rientra nel budget. Pertanto sono andato alla ricerca di plugin interessanti per impostare rapidamente moduli di contatto CSS.

Tutti all’unanimità (questo vale per i motori di ricerca) consigliavano – dicevano i saggi – modificate il css e non prendete in giro nessuno, prendete Blocco note e andate avanti. Guardando al futuro, i saggi avevano ragione.

Tuttavia la curiosità ha prevalso e si è deciso di testare più nel dettaglio il plugin, che avevo già provato in precedenza, ma mi sembrava estremamente noioso e scomodo. Il plugin non viene aggiornato da 11 mesi, il che è triste. Poco più di 6K webmaster hanno rischiato di affidargli i loro moduli, anche questo non è un gran numero (di cui l'ho scaricato quattro o cinque volte).

Dopo l'installazione, crea una sezione "Stile contatto" nella radice del menu di amministrazione. In questa sezione sono presenti due voci contenenti i modelli per San Valentino e Natale e “Stile personalizzato” dove è possibile personalizzare completamente l'output del modulo. In realtà, la sezione “Stile personalizzato” è quella che ti interessa di più; maggiori dettagli sulle impostazioni disponibili:

"IMPOSTAZIONI GENERALI": puoi definire il colore dello sfondo, la larghezza della forma (impostata in px, % non ho provato), lo spessore del bordo, la forma (punteggiata, continua, ecc.), il colore, l'arrotondamento.

“IMPOSTAZIONI INGRESSI ED ETICHETTE” - lo sfondo dei campi di input, il colore del carattere di input, il carattere (l'elenco non è grande e non c'è quasi nulla in cirillico) e la sua dimensione. Colore del bordo del campo, stile (linea tratteggiata continua, ecc.), spessore, arrotondamento. Inserisci il carattere e la sua dimensione. Parametri margine in px - altezza/larghezza, riempimento. Carattere, stile, dimensione, colore dell'etichetta.

“IMPOSTAZIONI PULSANTE INVIA” – impostazioni per il pulsante di invio del modulo. Le impostazioni disponibili sono dimensione del pulsante, arrotondamento, colore, tipo di bordo e colore del bordo.

Problemi nell'uso.

Dopo aver esaminato le impostazioni, puoi giungere alla conclusione che tutto va molto bene: la pratica ha dimostrato il contrario. Ci sono davvero molte impostazioni, ma non sono sufficienti: non ci sono impostazioni di rientro all'interno del modulo, quindi tutti i blocchi sono raccolti sul bordo sinistro vicino al bordo del modulo. Strane impostazioni "predefinite": dove il campo di input è 100*100 px. Se imposti correttamente le dimensioni del campo, ciò non influenzerà l'elenco a discesa e assumerà lo stile del tema principale. Non è stato possibile ripristinare le impostazioni originali prima di disinstallare il plugin...

Finora, a parte la modifica manuale degli stili, non ha funzionato più o meno bene... Non è avvenuto un miracolo.

Nota importante! Il plugin è stato aggiornato di recente e qualcosa è cambiato nelle impostazioni in modo abbastanza significativo, quindi devi controllare e testare.

Il plugin Contact Form 7 ti aiuterà a organizzare il feedback sul tuo sito web.

Puoi scaricare il plug-in Contact Form 7 sul sito Web ufficiale di WordPress

Puoi scaricare il plug-in Really Simple CAPTCHA sul sito Web ufficiale di WordPress

Abbiamo discusso come installare e collegare questo plugin nella lezione "", ora esamineremo le funzioni aggiuntive del plugin Contact Form 7. Il modulo funziona correttamente su monitor, tablet, telefoni e laptop. A proposito, se il tuo laptop è rotto, esiste un servizio che ripara i laptop HP.

Dopo aver scaricato e attivato il plugin, vai alle impostazioni del plugin recandoti nella nuova sezione del pannello di controllo “Contatti”.

Passa il mouse sul nome del modulo e seleziona "Modifica"

Si aprirà una finestra per modificare i parametri del modulo.

Poiché il sito può utilizzare non uno, ma diversi moduli (un modulo per inviare un messaggio, un modulo per ordinare una chiamata, un modulo con dati personali), in modo che non vi sia confusione su quale modulo è responsabile di cosa, è necessario cambiare il nome del modulo. Per fare ciò, fare clic sul nome del modulo 1.

Il blocco n. 2 mostra ciò che verrà visualizzato nella pagina nel modulo. Prima viene il testo, il nome del campo, poi il codice di questo campo. Puoi modificare il testo in base a ciò di cui hai bisogno.

Per aggiungere nuovi campi al modulo, fare clic sull'elenco a discesa n. 3 - "Genera tag" e selezionare l'elemento richiesto dall'elenco a discesa.

• Campo di testo
• E-mail
• Numero di telefono
• Numero (casella numerica)
• Numero (cursore)
• Campo di testo
• Menu a discesa
• Caselle di controllo
• Tasti della radio
• Accettazione
• Domanda
• CAPTCHA
• Invio di un file
• Pulsante Invia

Per impostazione predefinita, le descrizioni comandi e i campi del modulo sono disposti come segue: descrizione comando in alto, elemento in basso. Se vuoi posizionare la descrizione e l'elemento su una riga, rimuovi il tag dopo il testo

. L'intero blocco con descrizioni ed elementi deve essere su una riga e trovarsi all'interno del tag

Campo di testo