Casa / Servizio Online / Come passare l'indirizzo della pagina da cui è stato inviato il messaggio nel modulo di feedback di Wordpress? Suggerimenti, hack, segreti Vasto modulo di contatto

Come passare l'indirizzo della pagina da cui è stato inviato il messaggio nel modulo di feedback di Wordpress? Suggerimenti, hack, segreti Vasto modulo di contatto

04.08.2021 Servizio Online

FormGet è un semplice plug-in drag and drop per WordPress. e lascia cadere, che ti consente di creare vari moduli di contatto per il tuo sito. Devi solo fare clic sui campi che desideri aggiungere al modulo e al tuo modulo feedback sarà pronto in pochi secondi.

Moduli che possono essere creati con questo plugin

Modulo di contatto, modulo di supporto, moduli di prenotazione, servizi di consulenza, modulo di contatto, mailing list, questionari, modulo di domanda di lavoro, procedura guidata del modulo di registrazione, generatore di moduli d'ordine e così via possono essere eseguiti in questo fantastico plug-in.

FormGet Contact Form è uno strumento molto potente che ti consentirà di creare e incorporare un modulo di contatto sul tuo sito Web in pochi semplici passaggi. Seleziona i campi del modulo, personalizza le impostazioni e incorpora facilmente un modulo di contatto sul tuo sito semplicemente inserendo il codice in un widget o utilizzando uno shortcode personalizzato. Non è necessaria alcuna conoscenza di programmazione per creare la forma desiderata: questo è un ulteriore vantaggio nella scelta di tali estensioni.

Se sul sito sono installati più moduli di contatto contemporaneamente, tutti i dati su di essi possono essere tracciati in un unico posto: sulla dashboard. Un vantaggio più significativo di questo plugin è che i moduli che crea sono adattivi, il che consente di visualizzare correttamente i dati necessari su qualsiasi dispositivo senza prescrivere stili e classi aggiuntivi.

Elenco dei campi supportati dal plugin:

nome indirizzo, numero di contatto, Messaggio, Pagamento (integrazione PayPal), Data (supporta il formato gg-mm-aa o gg/mm/aa o aa-mm-gg), Stringa di testo, Testo multilinea, Selezione multipla, Allegati, Casella di controllo, Seleziona (selezionare da suggerito elenco), pulsanti di opzione, caricamenti di file e Captcha.

L'installazione è semplice - attraverso il pannello di amministrazione del sito su WordPress.

Impostazione e creazione di un modulo di contatto

Dopo l'installazione e l'attivazione, vedrai uno speciale modulo di benvenuto:

Fare clic sul pulsante "Fai clic per creare" e procedere alle impostazioni e creare un modulo di feedback. Tutte le impostazioni sono suddivise in 4 schede:

  1. Generatore di moduli di contatto
  2. Codice di incorporamento
  3. Estensioni

Inizialmente, si apre la prima scheda, in cui puoi creare il tuo primo modulo di feedback utilizzando il costruttore.

Diamo un'occhiata più da vicino:


La configurazione e l'utilizzo del plug-in è intuitivo, quindi installalo e utilizzalo con piacere!

Ciao a tutti. In qualche modo, ho troppa energia e oggi ho deciso di scrivere un altro articolo che sarà dedicato a uno dei Plugin WordPress. Un plugin piuttosto interessante e funzionale, fa fronte ai suoi doveri al 100% e non l'ho ancora trovato migliore per rilasciare feedback.

Non voglio tormentarti per molto tempo, penso che tu abbia già capito cosa sarà discusso nell'articolo. E così, oggi capiremo e configureremo Plugin Modulo di contatto 7 per WordPress, ovvero per creare un modulo di feedback.

Mi sono seduto a lungo e ho pensato a quali sono gli svantaggi del plugin e non mi è venuto in mente nulla, ma questa creazione ha molti vantaggi.

Pro del modulo di contatto 7 Plugin.

  1. Chiarezza e facilità di configurazione. Una persona che incontra questo plugin per la prima volta sarà in grado di capirlo senza problemi.
  2. Creazione un largo numero forme diverse e integrandoli nel sito.
  3. Il modulo viene inserito utilizzando uno shortcode nella pagina e in qualsiasi punto del sito. È molto comodo.
  4. Supporto per russo e altre lingue.
  5. Supporto per richieste Ajax.
  6. Protezione dallo spam con una domanda di testo o captcha. Per captcha, dovrai inoltre installare Really Simple CAPTCHA.
  7. Personalizzazione dell'aspetto del modulo utilizzando gli stili CSS.
  8. Integrazione con il servizio Akismet per la protezione dallo spam.

Sul nostro sito puoi vedere e utilizzare tale modulo se fai clic sulla voce di menu "Contattaci", si aprirà una finestra in cui puoi vedere un buon esempio.

Iniziamo!

Per prima cosa dobbiamo scaricare questo plugin. Puoi dal nostro server ecco il link -\u003e o dal sito ufficiale ecco il link -\u003e Scarica dal sito ufficiale .

Dopo il download, è necessario installarlo su . Come installare, non lo descriverò, penso che dovresti conoscere questo processo dalla A alla Z. Scaricato, installato, ora andiamo direttamente a noi stessi per capirlo e configurarlo.

Configurazione del plug-in Contact Form 7 e creazione di un modulo di feedback.

Ora che hai scaricato e installato tutto quanto necessario, vai all'amministrazione Dashboard di WordPress e trova il punto Modulo di contatto 7, fai clic su di esso e arriviamo alla pagina per l'aggiunta di un nuovo modulo.


Creazione modulo.

Per creare un nuovo modulo, devi cliccare su “ Aggiungere nuova”, quindi seleziona la lingua (russo per impostazione predefinita) e fai clic su “Aggiungi nuovo”. Dopo tutti i passaggi effettuati, dovresti avere questa immagine:


Il modulo è stato creato, ora lo personalizzeremo in base alle tue esigenze e, per cominciare, gli daremo un nome. Nel mio caso, chiamo " Modulo di prova”, nominalo come vuoi e quindi fai clic su “Salva”. Ora puoi vedere lo shortcode che dovrà essere inserito nel codice del sito in cui verrà visualizzato questo modulo.


Avremo bisogno del codice un po' più tardi poiché prima dobbiamo impostare il modulo. Vai al modello di modulo e personalizzalo.

Elenco a discesa a destra Genera tag”, se lo apri, puoi vedere molti campi che vengono aggiunti al modulo.


campo Genera tag

Sulla sinistra puoi vedere i campi che sono già stati aggiunti al modulo.

Ad esempio, creiamo un semplice modulo in cui ci sarà un nome, un'e-mail, un telefono, una domanda di testo per la protezione dallo spam, un messaggio e un pulsante di invio.

Inizia.

Creazione di un campo di testo per il nome. Nell'elenco a discesa "Genera tag", seleziona " Campo di testo". Spuntiamo il campo richiesto, gli diamo un nome nel mio caso "NAME" e assegniamo un id in modo che il campo possa essere stilizzato usando gli stili CSS. Ho id="nome". Di seguito puoi vedere il testo " Copia questo codice e incollalo nel modello di modulo a sinistra". Prendiamo questo codice e lo copiamo nel modello di modulo, come nell'immagine:


Per la posta (e-mail), facciamo lo stesso, per il telefono, seleziona "Genera tag" dall'elenco, il campo " Numero di telefono” e anche per analogia lo facciamo.

Per personalizzare il messaggio, seleziona " Campo di testo” e facciamo lo stesso per analogia con tutto quanto sopra descritto.


Ora aggiungi il campo Domanda". Per fare ciò, seleziona " Domanda", Dagli un nome. Nel campo Domanda|Risposta puoi porre diverse domande e risposte, sotto il campo c'è un esempio di domanda logica, puoi impostarne una di testo, ad esempio “3° mese dell'anno?| marzo”, ecc. Incolla il codice come prima.


campo "Domanda"

E l'ultima cosa di cui abbiamo bisogno è il pulsante " Inviare", puoi lasciare quello che si trova nel modello o nell'elenco "Genera tag", selezionare "Pulsante Invia". Il template è pronto, premi il pulsante “ Salva”.

Verifichiamo cosa abbiamo ottenuto, copiamo lo shortcode e incolliamolo sulla pagina o in qualsiasi parte del codice ove necessario. Incollerò in una pagina di prova.

Questo è quello che ho fatto:


Devi avere qualcosa di simile.

Personalizzazione del modulo e della destinazione del messaggio

Scendiamo un po' sotto il modello di modulo e vediamo le impostazioni del destinatario.

  1. Campo di destinazione. Inserisci la mail da cui verranno inviate le lettere ai visitatori che compilano il form.
  2. Campo mittente. Invece di<>, sostituiamo i nostri shortcode (i nomi che sono stati dati ai campi). Puoi vederli sopra. Nel mio caso lo sarà<>.
  3. Campo dell'oggetto. Scrivo sempre un modulo di feedback e indico il sito.
  4. Campo modello lettera. Qui puoi mostrare tutto ciò che il tuo cuore desidera. Per il nostro esempio, creo il campo Da:<>e dettagli Telefono: , Messaggio ..
  5. Il resto dei campi è vuoto.

Non dimenticare di salvare alla fine.

Se vai ancora più in basso, puoi vedere le impostazioni del messaggio. Tutto qui è in russo, quindi puoi modificare in base alle tue esigenze come desideri. Qui penso che capirai

Il modulo è pronto, puoi procedere al test e vedere se il messaggio arriva alla mail che hai specificato.

Tutto funziona bene per me, dopo aver cliccato sul pulsante "Invia", vedo il messaggio " Il messaggio è stato inviato con successo. Grazie. ” Puoi testare e vedere quali errori darà il modulo se non inserisci i dati correttamente.

Per quanto riguarda gli stili CSS, possono essere aggiunti al file CSS style.css principale. Con l'aiuto di firebag, puoi guardare l'id e le classi dei campi e assegnargli gli stili appropriati.

Plugin Modulo di contatto 7 per WordPress molto funzionale, puoi realizzare una forma di qualsiasi complessità, sono sicuro che ne sei convinto. Su questo finirò, se alcuni punti non sono del tutto chiari, scrivi nei commenti e cercherò di aiutarti a capirlo. Grazie.

Flettore 5

Questo è un plug-in per moduli di contatto. È estremamente popolare (in termini di download secondo solo ai plug-in e) tra gli utenti, poiché combina con successo facilità d'uso e potenti funzionalità per la personalizzazione e la progettazione di moduli di contatto. Cercherò di considerare tutte le funzionalità del plugin nel modo più dettagliato possibile.

1 Decomprimere l'archivio.

2 Copiare la cartella modulo-contatto-7 in /wp-content/plugin/.

3 Vai al pannello di amministrazione del blog nella scheda " Plugin e attiva il plugin.

Quando attivato, il plug-in crea un menu separato nell'amministratore del blog chiamato "", crea anche un modulo di contatto predefinito, che puoi vedere in " Modulo di contatto 7\Moduli":

Se utilizzi il "codice di incorporamento" suggerito, il modulo del blog sarà simile al seguente:

Certo, aspetto esteriore questo modulo di contatto dipenderà dagli stili utilizzati nel tuo modello, ma in generale sarà simile a questo.

Ci vogliono solo un paio di minuti per visualizzare questo semplice modulo. Ed è proprio per questa facilità di aggiungere un modulo di contatto che molti utenti adorano questo plugin.

Tuttavia, il plug-in ha molte possibilità per creare moduli di contatto avanzati di qualsiasi complessità. Ma iniziamo con uno semplice, creando il tuo modulo, che differirà solo leggermente dal modulo predefinito integrato nel plugin. Fare clic sul collegamento "Aggiungi nuovo":

Si aprirà la pagina iniziale per l'aggiunta di un modulo:

Il plug-in rileva automaticamente la lingua utilizzata nel blog, quindi non è necessario selezionare una lingua, basta fare clic sul pulsante "". Verrà visualizzata la pagina di progettazione del modulo. La prima cosa che dovresti fare qui è rinominare il titolo del modulo:

Il titolo non ha importanza, è solo lì in modo da non farti confondere dalle tue stesse forme. Imposta il nome del tuo modulo, clicca sul pulsante " Salva", ottenuto come risultato "codice di incorporamento":

Ora puoi incollare il codice proposto in qualsiasi tuo post o pagina (in modalità "Testo", ovviamente) per visualizzare il modulo di contatto al suo interno. Tuttavia, non differirà in alcun modo dal modulo predefinito, quindi continueremo a lavorare con il designer del modulo. Sul lato destro della pagina del designer c'è un pulsante " Genera tag", cliccandoci sopra visualizzerai:

Prendi, ad esempio, un numero di telefono. Si aprirà la seguente finestra:

In realtà, non c'è proprio nulla da cambiare. Dimensioni, classi, ecc. sono opzioni secondarie e nella maggior parte dei casi non è necessario modificarle. Tuttavia, l'opzione "" può essere utile per suggerire ai visitatori come compilare questo campo.

Ad esempio, impostiamo i seguenti valori:

Quando si visualizza il modulo di contatto, il campo sarà simile al seguente:

Quando si fa clic su questo campo, il testo inserito scompare, poiché serve solo come suggerimento per la compilazione. Ma ho perso il punto di aggiungere il tag selezionato al modulo di contatto stesso. Ecco il tag:

Deve essere inserito nella parte sinistra della pagina di progettazione del modulo, dove si trova il codice del modulo di contatto stesso:

Devi creare manualmente il codice del modulo, ovvero posizionare tu stesso i titoli, i tag di paragrafo e le interruzioni di riga, dovresti ottenere qualcosa del tipo:

Salviamo il codice del modulo e finiamo con il seguente modulo di contatto:

In realtà, allo stesso modo, puoi facilmente aggiungere al tuo modulo di contatto in un paio di minuti qualsiasi etichetta Il usato dal plugin. Non ti costringerò a provare manualmente ogni tag, darò immediatamente il loro output:

1 Campo di testo.

Campo di testo normale, utilizzabile per nome, oggetto, ecc.

2 E-mail.

Utilizzato solo per inserire un indirizzo e-mail.

3 URL.

4 Numero di telefono.

Utilizzato solo per inserire un numero di telefono (numeri e trattini).

5 Numero (casella di selezione).

Utilizzato solo per inserire un numero (può essere utilizzato per indicare età, numero di articoli ordinati, ecc.).

6 Numero (cursore).

Funziona in modo errato. Per visualizzare questo dispositivo di scorrimento numerico, viene utilizzato HTML5 e questo, in primo luogo, significa che tale dispositivo di scorrimento ha un aspetto diverso browser diversi, e in secondo luogo, non funziona ancora. Nei forum di supporto dei plug-in, ho visto soluzioni che risolvono il lavoro di questo tag, ma non mi hanno aiutato: non potevo forzare questo dispositivo di scorrimento per visualizzare alcun numero. Consiglio di non utilizzare questo tag.

7 L'appuntamento.

Utilizzato solo per inserire la data.

8 Campo di testo.

Nella traduzione russa, questo tag è anche chiamato "Campo di testo", ma nella terminologia HTML è textarea, che, in effetti, significa solo un campo di testo ingrandito. Utilizzato per inserire il testo del messaggio.

9 Menu a discesa.

Utilizzato per selezionare un elemento (o più elementi) da un menu a discesa. Può essere utilizzato per qualsiasi cosa, dalla richiesta del colore del prodotto ordinato alla scelta del sesso di una persona.

10 caselle di controllo.

Utilizzato per selezionare uno o più elementi dalle opzioni fornite.

11 tasti della radio.

Utilizzato per selezionare un solo elemento tra le opzioni fornite.

12 Accettazione.

Usato per accettare i termini.

13 Domanda.

Utilizzato per rispondere alle domande specificate (la domanda viene scelta a caso tra le opzioni specificate). Fondamentalmente, questo tag viene utilizzato come protezione antispam. E se gli spambot possono facilmente rispondere a una domanda numerica, allora domande come "su quale pianeta viviamo?" non sono in grado di rispondere.

14 CAPTCHA.

Utilizzato per visualizzare un captcha completo. Per utilizzare questo tag, devi installare il plugin CAPTCHA Really Simple. Il captcha è abbastanza leggibile e quindi è facilmente sfondato da bot spam avanzati come Hrumer.

15 Invio di un file.

Utilizzato per inviare un file. È possibile specificare la dimensione massima e i formati dei file consentiti.

16 Pulsante Invia.

Utilizzato per inviare i dati del modulo di contatto. Questo è un tag obbligatorio.

I tag utilizzati direttamente nel modulo di contatto vengono ordinati. Ora diamo un'occhiata a come ottenere questi stessi tag dal modulo di contatto alla tua email. Appena sotto il codice del modulo di contatto nel costruttore c'è il modello della lettera che ti è stata inviata, ed è in esso che devi apportare le modifiche necessarie. Questo è importante perché compilare questo modello in modo errato ti impedirà di sapere esattamente cosa ha scritto il visitatore nel tuo modulo. Prendiamo come esempio il tag del numero di telefono. Diciamo che nel tuo modulo di contatto è inserito tramite un codice come questo:

Quindi, nel modello della lettera inviata, è necessario inserire il seguente codice:

Il significato, credo, è chiaro. Nel codice del modulo di contatto , e nella lettera solo il nome di questo campo . Il plugin genera nomi di tag digitali come , ma nessuno ti impedisce di usare i tuoi nomi. E sul resto dei tag nel modello di email - anche loro sono formati secondo lo stesso principio - invece di Usato eccetera.

I testi che produce il form di contatto possono essere corretti anche nel form designer nella sezione "Messaggi":

Domande frequenti sui plug-in:

1 Visualizza errore " ", come risolvere?

Ciò significa che il modulo specificato è stato eliminato o il titolo del modulo è stato specificato in modo errato (il titolo nel codice chiamante è fondamentale per chiamare il modulo).

2 Nell'e-mail, vedo tag come invece del testo, come risolverlo?

Ciò significa che il visitatore non ha compilato questo campo. In questo caso, il tag non viene sostituito, ma visualizzato così com'è.

3 Ci sono delle restrizioni nella scelta di un nome per un tag?

C'è. Se loop WordPress name è "name", non puoi usarlo come nome per un tag. il modo migliore per evitare problemi è aggiungere dei prefissi per i nomi, come la parola "tuo". Non ci saranno sicuramente problemi con il nome del tag.

4 È possibile informare il visitatore via e-mail che il suo modulo è stato ricevuto?

Può. Usa l'opzione "Destinazione 2" nel generatore di moduli:

Questa opzione può essere utilizzata come risposta automatica.

5 È possibile inviare un modulo compilato a più indirizzi?

Può. Utilizza il campo "" nell'opzione "Destinazione":

Dove [email protetta] la tua email aggiuntiva, alla quale verrà inviata una copia del modulo compilato dal visitatore (il comando "cc" invia una copia nascosta).

6 Posso visualizzare un modulo al di fuori di un post o di una pagina?

Sì. Incolla il codice di chiamata del modulo nel widget di testo.

7 Il modulo può essere reso direttamente dal codice nei file modello?

Sì. Usa il codice di visualizzazione:

"" ) ; ?>

8 Il modulo non viene inviato, viene visualizzato un errore nella cornice rossa, come risolverlo?

Contatta il tuo host, è possibile che PHP non consenta di chiamare la funzione mail().

9 Durante l'invio del modulo, viene visualizzato un errore nella cornice arancione, come risolverlo?

Una cornice arancione indica lo spam. I plug-in di memorizzazione nella cache possono causare falsi positivi alla protezione antispam. Configura il tuo plug-in di memorizzazione nella cache per ripulire periodicamente i file della cache (24 ore sono sufficienti).

10 Il campo di immissione dell'e-mail è diverso dagli altri campi del modulo, come posso risolverlo?

Il plug-in utilizza il codice HTML5 per inserire un indirizzo e-mail ( invece di ), e tale codice spesso non è formattato nei vecchi modelli. Devi apportare modifiche a stili.css il tuo modello, aggiungendo lì il codice necessario per il selettore di input.

11 Come inserire un file allegato dall'utente in un'e-mail?

Per fare ciò, utilizzare il campo speciale "Allegati:"

Merita davvero la tua attenzione. A differenza di molti altri plugin popolari, non ti obbliga ad acquistarne nessuno Pro versione - tutte le sue funzionalità sono immediatamente disponibili. La popolarità del plugin (oltre 19 milioni di download) è meritata: nonostante tutte le sue funzionalità, è estremamente facile da configurare ed è disponibile anche per gli utenti inesperti del motore WordPress.

Ma ricorda ancora: questo è un plug-in per moduli di contatto, non un semplice plug-in per moduli. Con tutte le sue capacità, non ti permetterà di creare un modulo avanzato basato su nessuna condizione. Il suo scopo principale è la creazione di moduli di contatto e nient'altro. Per creare moduli dinamici, pubblicare moduli e simili, usa plugin come Ninja Forms, sono più adatti a questo.

Se hai domande sulla configurazione del plug-in, chiedi nei commenti, cercherò sicuramente di aiutarti.


Autore del plugin: Takayuki Miyoshi
Versione in questione: 3.9.1 del 31.07.2014
Versione attuale: 5.1.4 del 04.08.2019
Compatibile con Versione WordPress: 4.9 e superiore
Installazioni di plugin attive: 5 000 000+
Scarica il plug-in versione 5.1.4(totale scaricato 121 112 956 una volta)

Ti è piaciuto il post? Iscriviti agli aggiornamenti su o

Per coperture a San Pietroburgo.

Ciao a tutti! Oggi ti dico come mettere modulo di feedback perwordinePstirare utilizzando plugin e codice semplice diversi modi. Quindi, iniziamo con il fatto che, sebbene non disponga di un modulo di feedback, molto probabilmente ne avrai bisogno per una serie dei seguenti motivi:

— Comodità ed efficienza. Se stai vendendo o fornendo servizi a pagamento, allora il modulo di feedback è semplicemente vitale per te. Immagina che un cliente abbia trovato un prodotto adatto a lui, ma ha ancora alcune domande che lo perseguitano. In questo caso, probabilmente vorrà contattarti per chiarire alcuni dettagli. Se hai lasciato solo un'e-mail dai tuoi dati di contatto, questo può essere un grosso problema per l'acquirente, perché ai nostri giorni non ci sono così tante persone che usano la posta, ma per lo più siedono sui social network.

Quindi a volte capita che il client possa semplicemente sedersi da un altro computer, che non ha autorizzato la posta, e non ricorda la password. O, ad esempio, mentre stava scrivendo la posta, ha avuto dei dubbi sul fatto che ci si possa fidare affatto e se ha bisogno di questa piccola cosa che gli offri. Come puoi vedere, mentre il cliente striscia verso il suo cassetta postale, molto probabilmente cambierà idea o, per pura pigrizia, andrà alla ricerca di un'offerta più allettante, dove il prezzo sarà più basso e conveniente il feedback degli acquirenti.

- Protezione del tuo indirizzo email. Se hai mai gestito la tua mailing list, probabilmente hai ricevuto lettere con il seguente contenuto: "Venderò indirizzi e-mail a buon mercato", ecc. Queste e-mail vengono raccolte da tutta Internet da appositi bot (robot), a cui verranno successivamente inviate lettere di spam. Se non vuoi essere tra loro, non devi far brillare (mostrare) il tuo indirizzo dall'ufficio postale da nessuna parte. Nel mio caso, questo non ha più senso, dal momento che la mia soap (posta) naviga in Internet da più di 3 anni ed è registrata su più di 1000 siti.

A proposito, per molto tempo, per combattere in qualche modo lo spam, molti proprietari di siti che non conoscevano ancora il modulo di feedback hanno lasciato la sua foto invece della posta. In questo caso, i bot non hanno potuto aggiungere l'e-mail al database di spam, ma ciò ha causato disagi ai visitatori. Chi vuole sillabare la casella di posta di qualcuno per un'ora quando oggi ci sono due fantastici pulsanti "copia" e "incolla".

Plugin per moduli di feedback per WordPress.

Su Internet oggi c'è solo un mare di varie estensioni che creano un modulo di feedback per i visitatori. Molti di voi si incontreranno oggi in questo articolo.

1 ) Quindi, ti presento il plugin Usernoise.

Secondo me, questo è il plug-in di feedback più interessante, ideale per molti negozi online e uomini d'affari. Questa forma appare come una finestra pop-up ed è richiamabile da qualsiasi pagina del sito cliccando sull'apposito pulsante a destra o a sinistra.

Installazione e configurazione del plugin Usernoise.

5 ) Installazione e configurazione del plug-in Contact Form 7.

Come creare un modulo di feedback per WordPress in altri modi?

Potresti essere sorpreso, ma ho descritto solo la parte più piccola di come puoi creare un modulo di feedback per WordPress. Non importa come ho cercato di abbracciare l'immensità, non ci sono riuscito. Pertanto, il modulo di feedback può essere creato tramite una serie dei seguenti plug-in: Fast Secure Contact Form , Contact Form by Contact ME , Visual Form Builder , nForms - WordPress Form Builder , Mapped Contact Form , Ninja Forms . Inoltre, ci sono anche vari servizi, come main-ip.ru e smartoforms.ru.

Questo è tutto, se avete domande sentitevi liberi di chiedere.

Modulo di contatto 7
  • Tutti i campi (tag) del modulo
  • Come creare uno dei campi obbligatori: mail o telefono
  • Campi condizionali per modulo di contatto 7 componente aggiuntivo
  • Modulo di contatto 7 Addon di convalida personalizzato

Nell'articolo precedente, abbiamo conosciuto il plug-in Contact Form 7 e le sue impostazioni. E qui, verranno considerati in dettaglio tutti i tipi di campo supportati (tag del modello di modulo) e i parametri di ciascuno di essi, nonché gli stili (classi CSS) degli elementi del modulo. Questa è la documentazione non ufficiale per tutti i tag del modello di modulo Contact Form 7.

Il tipo di campo determina la vista Elemento HTML moduli: testo, "radio", "seleziona". Il tipo di campo è specificato nel nome del tag del modello di modulo.

Un esempio di un tag campo di testo e dell'HTML che produrrà:

Inoltre, ogni tag (campo) ha le proprie opzioni (attributi del tag). Le opzioni dei tag sono specificate dopo il titolo e il nome del campo. Ad esempio, aggiungiamo un attributo di classe al campo di testo precedente:

La sintassi del tag modello (campo) del modulo:

Attributi dei tag (campi).

È possibile utilizzare gli stessi attributi (opzioni) in tag di moduli diversi. Pertanto, per non ripetere la descrizione di ciascun attributo per ogni campo del modulo, elimineremo la loro descrizione in una sezione separata.

Gli attributi che possono essere applicati solo a un tag di modulo specifico verranno specificati separatamente per ciascun tag.

* Firma * subito dopo che il tipo di campo rende il campo obbligatorio.
Esempio: id (linea) Il nome dell'identificatore. attributo css id, utilizzato per definire lo stile del campo.
Esempio: id:foo classe (linea) Il nome della classe. attributo di classe css, utilizzato per definire lo stile del campo.
Esempio: classe:bar
È possibile specificare più classi: minlength e maxlength (numero)

Si tratta di attributi HTML5 che limitano l'immissione di caratteri nel campo, sia della soglia inferiore (minima) che della soglia superiore (massima). L'utente non potrà inserire nel campo meno caratteri (lunghezza minima) o più caratteri (lunghezza massima) di quelli definiti da questi valori.

Per minlength , se il testo inserito è inferiore a questo valore, l'utente riceverà un avviso "Campo troppo corto". E viceversa per maxlength .

Esempi:
lunghezza minima:10 -
lunghezza massima:90 -
entrambi contemporaneamente

Di conseguenza, otteniamo un campo di testo che emetterà un avviso e la lettera non verrà inviata se vengono inseriti meno di 10 o più di 140 caratteri.

Questi parametri supportano i seguenti tipi di campo: text , textarea , email , url , tel , quiz .

C'è una vecchia voce per queste opzioni:

Il parametro maxlength ha esplicitamente la precedenza, quindi se aggiungi maxlength:150 , 140 verrà riscritto in 150.

taglia (numero) La larghezza del campo di testo, determinata dal numero di caratteri nel carattere a spaziatura fissa. Può essere sovrascritto negli stili CSS utilizzando l'attributo width.
Esempio: taglia:50 -
Predefinito: 40 predefinito (stringa/numero)

Il valore predefinito del campo.

Esempio: default:valore.

Se l'utente che compila il modulo è autorizzato, per impostazione predefinita è possibile sostituire il valore ricavato dai dati del suo profilo. Ad esempio, se specifichi l'attributo default:user_email - , il campo verrà automaticamente sostituito con il valore - "email dell'utente corrente" che visualizza il modulo...

Altri campi speciali dell'attributo predefinito:

    predefinito: post_meta- ottieni il valore del metafield la cui chiave sarà uguale al nome del campo. Ad esempio: visualizzerà un campo modulo il cui valore sarà impostato sul valore del meta campo del record mymeta_key

    predefinito: prendi- imposterà il valore del parametro GET con la chiave uguale al nome del campo: - http://example.com/?mykey=value

    predefinito: post- imposta il valore del parametro POST con la chiave uguale al nome del campo: - in POST si passa il dato mykey=value.

    predefinito: shortcode_attr- imposterà il valore dell'attributo shortcode con la chiave uguale al nome del campo. Ad esempio, il tag del modello di modulo è: , quindi nello shorcode del modulo stesso, quando viene chiamato nel contenuto del post, specifica l'attributo mykey: . Leggi di più di seguito.

    Inoltre, dobbiamo inserire nella whitelist il nome dell'attributo dello shortcode di WordPress (perché wordpress elimina tutti gli attributi dello shortcode sconosciuti...). Questo viene fatto attraverso un filtro:

    Add_filter("shortcode_atts_wpcf7", "my_shortcode_atts_wpcf7", 10, 3); funzione my_shortcode_atts_wpcf7($out, $coppie, $atts)( if(isset($atts["mykey"])) $out["mykey"] = $atts["mykey"]; return $out; )

Per la casella di controllo, radio e selezionare:

  • predefinito: numero - predefinito: 2- seleziona il secondo elemento della lista...
  • predefinito: numero_numero - predefinito:2_3- seleziona il secondo e il terzo elemento dell'elenco (per selezioni multiple e checkbox)...

Di più predefinito e le sue opzioni, leggi alla fine dell'articolo.

Segnaposto o filigrana (linea)

Il testo da mostrare nell'attributo segnaposto.

Questa opzione deve essere utilizzata alla fine di tutte le opzioni di tag del modello: , non

Può essere utilizzata segno d'acqua invece di segnaposto, è un sinonimo (alias) per l'attributo.

Akismet (linea)

Protezione da spam. Richiede l'installazione e l'attivazione del plug-in Akismet.

  • akismet: autore -
  • akismet:author_email -
  • akismet:author_url -

Come funziona? Quando si inviano i dati, i valori dei campi specificati verranno elaborati sul server akismet e se non superano il controllo, la lettera non verrà inviata e l'utente vedrà un errore:

Il messaggio scompare quando lo stato attivo viene posizionato su uno qualsiasi dei campi.

Tag del modello di modulo (campi)

Di seguito sono descritti tutti i tag plug-in che possono essere utilizzati in un modello di modulo. Tali tag si trasformeranno in input , textarea e selezionare elementi HTML.

I campi di testo includono i tipi: text , email , url , tel , textarea , così come il tag count è strettamente correlato ai campi di testo.

Esistono due tipi di campi numerici: numero e intervallo. Questi sono campi HTML5, quindi i browser meno recenti non li supportano, visualizzando invece un campo di testo.

testo

Campo di testo di una riga.

Opzioni supportate (attributi):

  • classe
  • lunghezza minima e lunghezza massima
  • taglia
  • segnaposto
  • predefinito- può essere utilizzato: user_login, user_first_name, user_last_name, user_nickname, user_display_name
  • akismet: autore

e-mail

Il campo è destinato all'immissione di e-mail.

Attributi supportati:

  • classe
  • lunghezza minima e lunghezza massima
  • taglia
  • segnaposto
  • akismet:author_email
  • predefinito: email_utente o predefinito: [email protected]

url

Un campo per inserire un indirizzo Internet (URL).

Attributi supportati:

  • classe
  • lunghezza minima e lunghezza massima
  • taglia
  • segnaposto
  • akismet:author_url
  • predefinito: URL_utente o valore di default

tel

Un campo per inserire un numero di telefono.

Attributi supportati:

  • classe
  • lunghezza minima e lunghezza massima
  • taglia
  • segnaposto

area di testo

Un campo per l'immissione di testo multilinea.

Attributi supportati:

  • classe
  • lunghezza minima e lunghezza massima
  • segnaposto
  • (cols)x(righe)- dove cols è la larghezza del campo in caratteri e righe è l'altezza del campo in righe di testo. Ha 3 formati: (cols)x(rows) , (cols)x e x(rows) .

Per textarea, il valore del campo può essere specificato in due modi:

  2. Testo predefinito...

Se l'area di testo contiene tag html, potresti ricevere un errore 500 del server dopo aver inviato il modulo!

conteggio (conteggio caratteri)

Il tag count permette di impostare un contatore quando si vuole mostrare all'utente quanti caratteri sono stati inseriti o quanti caratteri sono rimasti fino al valore massimo (se il parametro è maxlength).

Per attivare il contatore è necessario inserire nel template del modulo un tag contatore con il nome del campo di testo per il quale conterà i caratteri.

Il tag contatore può essere utilizzato ovunque nel modello di modulo.

Ad esempio, abbiamo un campo di testo per un messaggio:

Quindi facciamo questo:

Il campo è limitato - minimo 10 e massimo 140 caratteri. In questo caso, il contatore mostrerà quanti caratteri sono stati inseriti in totale.

A volte è più conveniente mostrare quanti caratteri sono rimasti da inserire, perché l'utente non conosce il limite massimo. Per fare ciò, è necessario specificare l'opzione down - nel tag.

numero

Un campo per inserire un numero. Quando il campo è focalizzato, i valori possono essere modificati ruotando la rotellina del mouse.

Supporta gli attributi:

  • classe
  • segnaposto
  • min
  • max

gamma

Dispositivo di scorrimento per selezionare i numeri all'interno dell'intervallo specificato.

Supporta gli attributi:

  • classe
  • segnaposto- visualizzato solo nei browser che non supportano questo tipo di campo e visualizzano invece un campo di testo.
  • min- Imposta il valore più basso per l'inserimento del numero: min:20
  • max- Imposta il valore superiore per l'immissione di un numero: min:100
  • fare un passo- Imposta il passaggio di modifica del numero per i cursori e i campi di immissione dei numeri: min:5

casella di controllo e radio

  • Tasti della radio- si tratta di interruttori che consentono di selezionare solo un'opzione tra diverse.
  • Caselle di controllo- Si tratta di caselle di controllo che consentono di selezionare più opzioni contemporaneamente.

Attributi supportati:

  • predefinito- Il valore predefinito del campo, ad esempio default:2, significa che quando il campo viene visualizzato, la seconda risposta sarà già selezionata. Per le caselle di controllo, puoi specificare più valori come questo predefinito: 1_2_3

    prima_come_etichetta- Per impostazione predefinita, viene prima la casella di controllo (pulsante di opzione), quindi la sua (lei) iscrizione. Di passaggio dato parametro, li scambierai.

    usa_etichetta_elemento- Avvolge una casella di controllo o pulsanti di opzione in un'etichetta, che consente di selezionare un elemento facendo clic sul suo nome.

    esclusivo- Specificando questo parametro, è possibile selezionare solo 1 elemento per la casella di controllo. Questa funzionalità è basata su JavaScript. I pulsanti di opzione non supportano l'opzione a causa delle loro specifiche.

    testo libero- Consente di aggiungere un campo di testo all'ultimo elemento. Diventa disponibile per il riempimento quando viene selezionato l'ultimo elemento e l'utente può aggiungere alla sua risposta.

  • dati- Ottiene il valore dall'elenco con i paesi del mondo, ad esempio data:countries .

Cina India San Marino

Selezionare

Consente di selezionare le opzioni di risposta da un elenco a discesa. Può essere utilizzato in due versioni:

Attributi:

  • classe
  • predefinito- predefinito:2 o predefinito:2_3_4
  • multiplo- Consente di selezionare più risposte
  • include_blank- Aggiungi la stringa "- - -" come prima risposta
  • prima_come_etichetta
  • dati
  • Oggetti- opzioni di risposta

Data

Campo per la selezione di una data di calendario. Questo è il tipo HTML5, non supportato dai browser meno recenti.

Attributi:

  • classe
  • segnaposto
  • min- Il valore più basso di una possibile data, ad esempio min:2016-01-01 . È supportato il formato della data relativa, come oggi+10 giorni, oggi-2 settimane e così via.
  • max- Il valore superiore di una possibile data, ad esempio min:2017-01-01 . È supportato il formato della data relativa, proprio come min .
  • fare un passo- Passaggio di modifica della data in giorni, ad esempio passaggio:3 . Se il valore più basso è 2016-01-01 e il passaggio è 3, il passaggio successivo visualizzerà la data 2016-01-04 e così via.

Quando si inserisce un tag in un modello di lettera, verrà inviata una data alla posta nel formato AAAA-MM-GG (25-12-2016) - questo non è visivo. Pertanto, puoi specificare un modello più descrittivo, per questo utilizzare la costruzione [_format_(nome campo) "(formato data)"]

[_format_your-date "G, g M a"]

reCAPTCHA (protezione antispam)

Contact Form 7, a partire dalla versione 4.3, insieme al servizio reCAPTCHA, permette di combattere lo spam. Per utilizzare reCAPTCHA, devi disporre di un account Google, dove puoi ottenere le chiavi per utilizzare il servizio API.

Per ottenere queste chiavi, è necessario:

  1. Vai a Pannello di amministrazione di reCAPTCHA.
  2. Registra un sito.
  3. Ottieni la chiave del sito e la chiave segreta (queste sono due chiavi diverse: può esserci una chiave del sito, ma ci sono molte chiavi segrete).

Attributi:

  • classe
  • tema- Combinazione di colori del widget. Può essere scuro o chiaro (predefinito).
  • taglia- Dimensioni del widget. Può essere compatto (compatto) o normale (predefinito).

Ora, nel tuo modello di modulo, usa il .

Quiz (domanda-risposta)

In questo campo, all'utente viene posta una domanda alla quale deve rispondere, altrimenti la lettera non verrà inviata. Il campo è apparso quando lo spam è stato combattuto con l'aiuto di captcha di lettere (non c'era ancora reCAPTCHA). L'uso dei captcha alfabetici imponeva restrizioni, sia sul server (richiesto librerie grafiche), e su una persona (errori di percezione visiva). Questo metodo risolto queste carenze.

Attributi:

  • classe
  • taglia- Dimensione e lunghezza del campo. Uno dei valori può essere omesso.

L'esempio mostra che la domanda e la risposta sono separate da | . Puoi scrivere assolutamente qualsiasi domanda e risposta, ad esempio matematica:

Puoi specificare più coppie domanda-risposta, la domanda verrà scelta casualmente ogni volta che viene visualizzato il modulo:

È possibile specificare i parametri minlength e maxlength per questo campo:

Quando crei un tag quiz con più domande utilizzando il generatore, scrivi ciascuna coppia domanda-risposta su una nuova riga.

nascosto

Campo nascosto - non visibile all'utente. Può memorizzare informazioni preziose. Le informazioni possono essere aggiunte utilizzando Javascript o create utilizzando l'opzione predefinita.

Attributi:

  • classe
  • predefinito- Qui puoi passare un parametro che verrà convertito secondo una determinata regola. Maggiori informazioni nella descrizione dell'attributo (opzioni all'inizio dell'articolo).

Sottoscrivi

Pulsante per l'invio dei dati del modulo (invia). Facendo clic su questo pulsante si inviano tutti i dati del modulo al server.

Attributi:

  • classe

È possibile specificare il testo del pulsante:

Un esempio di utilizzo di tutti i parametri supportati:

caricatore ajax

Si prega di notare che il tag in cui viene caricata l'icona di download, se si fa clic sul modulo di invio, questa viene aggiunta insieme al pulsante di invio, più precisamente dopo di esso.

Quindi, ad esempio, se sostituisci il tag con un pulsante HTML già pronto. Questo a volte è necessario quando il layout del pulsante non è adatto. Ad esempio, se vuoi che il pulsante di invio assomigli a questo:

© Copyright 2022, Mastering PC - Internet. Skype. Social networks. Esercitazioni di Windows