La qualità di un sito web e la sua usabilità dipendono in gran parte dalla possibilità che i futuri visitatori possano contattare facilmente l'amministrazione o i gestori.

Naturalmente puoi sfruttare l'opportunità per inviare una lettera a e-mail specificato nei contatti. Ma questo metodo è troppo lungo e scomodo, soprattutto se si tratta di una piccola domanda, raccomandazione o commento.

A questo proposito, sembra logico utilizzare il modulo feedback.

L'essenza e il significato del modulo di feedback per Joomla

Il modulo di feedback è uno strumento utile per inviare messaggi all'amministrazione del sito.

Questo dettaglio piccolo ma estremamente significativo dei siti moderni non porta alla creazione di un peso eccessivo della pagina e non è associato alla scrittura di un numero significativo di script ingombranti.

Il sistema di gestione dei contenuti (CMS) Joomla 3 ti consente di creare un modulo di feedback che presenta i seguenti vantaggi:

• Configurazione semplice;
• Interfaccia bella e conveniente;
• Possibilità di invio tempestivo di messaggi;
• Disponibilità di un modulo di contatto su tutte le pagine del sito;
• Possibilità di fare a meno di ricaricare la pagina;
• Protezione da spam.

Quando un utente invia una lettera all'amministrazione tramite questo componente, questa arriva automaticamente all'indirizzo email dei proprietari del sito.

Infatti l’intero processo del modulo di feedback può essere rappresentato in due fasi:

Compilazione dei campi richiesti da parte del visitatore;

Invio di un messaggio.

È importante notare che tale modulo può consistere in un numero arbitrario di campi per vari scopi. In questo caso sono obbligatori campi come “Email”, “Nome”, “Oggetto” e “Messaggio”.

Il processo di creazione di un modulo di feedback in Joomla 3: istruzioni passo passo

La funzionalità standard del CMS Joomla 3 ti consente di creare un modulo di feedback senza installare estensioni aggiuntive. Ciò semplifica notevolmente il compito di creare questo importante modulo su qualsiasi sito web.

A questo proposito, le istruzioni seguenti possono essere utili anche per i dilettanti che non hanno piena familiarità con le complessità della programmazione.

Si consiglia di considerare in dettaglio ciascuna fase della creazione di un modulo di feedback su Joomla 3.

Passo 1.

Nel pannello di amministrazione di Joomla 3, apri il menu "Componenti" e vai alla scheda "Contatti":

Passo 2.

Nella finestra che si apre, fai clic sul pulsante "Crea", dopodiché verrà visualizzato un modulo con campi vuoti. Qui è necessario fornire tutte le informazioni necessarie.

In particolare sono obbligatori i campi “Nome”, “Categoria” e “Utente associato”. Inoltre, è possibile specificare le seguenti informazioni di contatto: "Posizione", "Casella postale", "Città", "Sito Web", "Telefono", ecc.

Al termine della compilazione lo stato viene impostato su “Pubblicato”. Se il modulo di feedback viene configurato per un sito multilingue, è importante anche selezionare la lingua per la quale verrà visualizzato:

Passaggio 3.

Nella scheda "Informazioni aggiuntive", puoi inserire ulteriori informazioni di contatto, come indicazioni stradali o orari di lavoro, che potrebbero essere importanti per gli utenti del modulo di feedback:

Passaggio 4.

Nella scheda “Opzioni di pubblicazione” è possibile specificare la data di inizio e fine della pubblicazione, nonché specificare le meta descrizioni e il meta tag “consenti/nega” l'indicizzazione della pagina:

Passaggio 5.

Nella scheda successiva - "Impostazioni di visualizzazione" puoi selezionare quali informazioni di contatto devono essere pubblicate sulla pagina, poiché per impostazione predefinita verranno pubblicati tutti i dati specificati.

Qui dovresti impostare il formato di visualizzazione del modulo di feedback di Joomla 3.

È bene sottolineare che le opzioni di visualizzazione disponibili sono tre:

• "Elenchi compressi": ci saranno due o tre elementi nella pagina: contatto, modulo di feedback e Informazioni aggiuntive, situato verticalmente;
• “Schede”: verranno visualizzate le stesse schede, solo in orizzontale;
• "Normale": tutte le informazioni di contatto specificate saranno visibili sulla pagina.

Passaggio 6.

SU ultima scheda"" puoi configurare argomenti e caselle di posta bloccati e anche attivare la voce "Invia una copia della lettera all'e-mail del mittente":

Passaggio 7

Una volta specificati tutti i dati necessari è necessario salvare il contatto:

Passaggio 8

Dopo il salvataggio, è necessario creare una voce di menu per il contatto creato. Per fare ciò, vai alla sezione “Menu” e seleziona “Menu principale”, quindi la scheda “Crea voce di menu”:

Passaggio 9

Nella finestra che appare, devi associare una voce di menu separata al menu principale o verticale, che di solito si trova nel blocco sinistro o destro del pannello di amministrazione di Joomla 3:

Passaggio 10

Come tipologia di voce di menu è necessario selezionare la sezione “Contatti”:

Passaggio 11

Dopo aver impostato il tipo di voce di menu, apparirà il campo “Seleziona contatto”. In esso è necessario selezionare il contatto creato nei passaggi precedenti (in questo caso, Amministratore).

È importante sottolineare che le schede “Opzioni di visualizzazione dei contatti” e “Opzioni di posta” copiano rispettivamente le impostazioni delle schede “Impostazioni di visualizzazione” e “Impostazioni di visualizzazione dei contatti”:

Passaggio 12

Nella scheda "Opzioni di visualizzazione del collegamento", inserisci il campo "Titolo come collegamento", che è una descrizione personalizzata di questa voce di menu. Successivamente questa descrizione verrà visualizzato quando passi il mouse su una voce di menu.

Puoi anche assegnare alla voce di menu la tua classe CSS se desideri un aspetto unico. Questo articolo è facoltativo:

Passaggio 13

Dopo aver completato le operazioni di cui sopra, è possibile configurare le impostazioni di visualizzazione della pagina, vale a dire tag del titolo e h1 di questa pagina.

Puoi anche saltare questa scheda, nel qual caso l'intestazione mostrerà il nome della pagina, in questo caso "Feedback":

Passaggio 14

Nella scheda "Metadati", meta Tag di descrizione e le parole chiave della pagina web. In sostanza, questa scheda ripete le impostazioni della sezione “Opzioni di pubblicazione”, che si apre nella finestra di creazione del contatto.

Saluti ai miei lettori, ho acquisito esperienza e vi parlerò dei principi di funzionamento del modulo di feedback connessioni php. Ti mostrerò con esempi chiari in modo che tu capisca come funziona il tutto e come avviene l'interazione tra il modulo di input stesso (i suoi campi di input) e il file del gestore scritto in PHP. Inoltre, puoi scaricare i sorgenti gratuitamente insieme ai file .

Naturalmente, sarebbe fantastico se avessi almeno una minima conoscenza di HTML/CSS perché... Dovrai trascinare il codice sulla tua pagina per analogia. Linguaggio PHP Non ne parleremo, ti mostrerò tutte le modifiche necessarie che devi apportare da solo.

AGGIORNAMENTO: In base alle risposte dei lettori, ho capito che ho bisogno di qualcosa di più bello e funzionale, incontratemi, date un'occhiata e date un'occhiata. Scegli quale ti piace di più)

UPDATE2: Versione 3.0 Adaptive Landing + modulo ajax con trasmissione di tag UTM, leggi e vedi. Ti piacerà

Mi sono ricordato di me stesso quando ho provato per la prima volta a creare il mio modulo di feedback in PHP e, a dire il vero, è stato molto laborioso, perché... Non capivo cosa e come stesse succedendo. Pazienza e perseveranza, amici, e avrete successo.

Modulo di feedback PHP - struttura

Studieremo l'analisi del modulo di feedback stesso utilizzando l'esempio di una pagina di destinazione, a proposito, c'è un articolo separato su. Puoi vedere come funziona in azione utilizzando i pulsanti sottostanti, allego i sorgenti di questa pagina di una pagina e il file principale del gestore php (questo file verrà elaborato e invierà l'e-mail)

Dopo aver scaricato i sorgenti e decompresso l'archivio, vedrai la seguente struttura di file:

• immagine: tutte le immagini utilizzate per la pagina di destinazione stessa, i pulsanti, ecc.
• js - script javascript che forniscono, ad esempio, una finestra modale pop-up su una pagina e altri effetti visivi
• index.html - file indice della nostra pagina di una pagina
• index1.php è un file gestore in cui vengono trasferiti i valori del modulo, quindi viene generata una lettera dalle variabili ricevute e inviata all'indirizzo e-mail specificato. Index1.php fungerà anche da pagina di notifica intermedia sull'avvenuto invio dei dati con reindirizzamento automatico a index.html (ovvero la nostra pagina di una pagina)

È importante che il tuo hosting, dove si trovano i file del sito, supporti l'elaborazione PHP, altrimenti il ​​file index1.php non verrà eseguito e non funzionerà. Per chiarire questa sfumatura, contatta la campagna in cui è registrato il tuo hosting o semplicemente testalo: funziona, significa che c'è supporto. In caso contrario, abilita l'opzione di supporto della lingua php

Dai un'occhiata al diagramma di come interagiscono tutti gli elementi (pagina, modulo, gestore)

Fonte chiamando il modulo e il gestore

Diamo un'occhiata a come funziona uno dei pulsanti, che fa apparire una finestra pop-up modale contenente un modulo di feedback. Questo dato codice sorgente è qualcosa che puoi inserire nella pagina più di una o due volte e funzionerà. Dovrai personalizzarlo tu stesso per adattarlo al tuo design e alle tue esigenze.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Richiedi di essere richiamato Richiedi di essere richiamato

Richiedi di essere richiamato Richiedi di essere richiamato

Di seguito è riportato il codice sorgente completo del gestore index1.php, per poter configurare l'invio al tuo Cassetta postale, modifica " [e-mail protetta]"al tuo, il resto, in linea di principio, può essere lasciato invariato

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

Verrai contattato

Verrai contattato body ( background: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat; ) setTimeout("location.replace("/index.html")", 3000); /*Cambia l'indirizzo della pagina corrente dopo 3 secondi (3000 millisecondi)*/

Verifica della funzionalità del modulo

Richiama la finestra e inserisci i dati per un controllo di prova del nostro modulo

Permettimi di ricordarti ancora una volta che il tuo hosting deve supportare l'elaborazione di file PHP, altrimenti il ​​nostro gestore semplicemente non verrà eseguito e non verrà inviata alcuna lettera all'indirizzo email specificato. Il risultato di un modulo di feedback completato con successo

Per me questo è tutto, ho cercato di trasmettere al meglio il significato e il funzionamento della sceneggiatura. Se avete domande, non esitate a contattarmi nei commenti o su VK (vedi dettagli di contatto). Ti auguro un lavoro facile e produttivo.

RSContact è un modulo di feedback gratuito in lingua russa per Joomla con la possibilità di personalizzare campi, lettere e protezione antispam. Il modulo è molto facile da personalizzare, adattivo e si integra abbastanza bene con diversi modelli. Puoi creare un modulo con almeno un campo "E-mail" e un pulsante di invio. E puoi includere circa altri 18 campi tipi diversi. È possibile visualizzare una casella di controllo per il consenso al trattamento dei dati personali in conformità con il GDPR e la Legge Federale 152. Se hai già configurato la posta in generale Impostazioni di Joomla e sono attivati ​​alcuni plugin captcha “generali”, non dovrai preoccuparti di inviare e-mail e proteggere dallo spam. Naturalmente un'estensione come RSForm non può essere sostituita tramite RSContact. Ma per creazione rapida il modulo di feedback sarà più che sufficiente.

informazioni generali

Diamo un'occhiata alle principali, secondo me, capacità e caratteristiche di RSContact.

• Supporta Joomla 3.2 e versioni più recenti.
• Design reattivo (Bootstrap).
• Possibilità di creare moduli composti da 1-18 campi preconfigurati (di diverse tipologie) (immagine sotto). Ci sono tre campi che puoi personalizzare. Ad esempio, crea un elenco a discesa con le opzioni che devi selezionare.
• Le etichette dei campi possono trovarsi all'interno o all'esterno dei campi.
• La presenza di un campo per dare il consenso al trattamento dei dati personali dell’utente.
• Possibilità di rendere i campi obbligatori o facoltativi. Potrai modificare il carattere del campo richiesto.
• Disponibilità di opzioni per la modifica delle lettere inviate agli amministratori. Con la possibilità di inserire segnaposto e progettare lettere (layout testo).
• Possibilità di inviare lettere a uno o più amministratori.
• E' possibile inserire il proprio codice CSS e Javascript da modificare aspetto forma e cambiamenti nella sua funzionalità.
• Possibilità di inserire informazioni aggiuntive sopra o sotto il modulo.
• Capacità di creare forme orizzontali e verticali.
• Possibilità di modificare il messaggio che verrà mostrato all'utente dopo aver inviato il modulo.
• Protezione dallo spam utilizzando i plugin captcha di Joomla.
• Configurazione semplice.
• Opzione per disabilitare il caricamento di jQuery per un modulo. Ciò potrebbe migliorare la compatibilità con altre estensioni.
• C'è una traduzione in russo, inglese, tedesco e altre lingue.
• Disponibilità di documentazione (in inglese).

Le impostazioni del modulo feedback di Joomla sono divise in 7 schede. Sulle schede Modulo, Associazione alle voci di menu E Diritti Sono state raccolte le opzioni “solite” per tutti i moduli Joomla. Sulla scheda Opzioni aggiuntive tutto tranne l'opzione Carica jQuery, è simile anche ad altri moduli. L'opzione stessa Carica jQuery consente di abilitare/disabilitare il caricamento della libreria jQuery, necessaria per funzionamento normale modulo di feedback. Se questa libreria viene caricata da altre estensioni o hai un conflitto sul sito, prova a disabilitare questa opzione.

Campi

Questa scheda (immagine sotto) contiene opzioni che ti consentono di abilitare o disabilitare vari campi del modulo di feedback. Tutti i campi disponibili sono mostrati nel modulo nella figura sopra. La maggior parte dei campi presenta queste “opzioni di visualizzazione”:

Obbligatorio. Il campo verrà visualizzato nella parte anteriore del sito. Per inviare il modulo, l'utente sarà tenuto a compilarlo. Un contrassegno speciale specificato nella scheda verrà visualizzato accanto alla firma del campo in campo .

SÌ. Il campo verrà visualizzato nella parte anteriore del sito. L'utente non deve necessariamente compilarlo.

NO. Il campo non verrà mostrato nella parte anteriore del sito.

È possibile disabilitare tutti i campi tranne il campo E- posta. È necessario compilarlo.

Fondamentalmente, tutti i campi sono normali campi di testo o aree di testo. Consideriamo solo quelli che differiscono.

Digitare Nome.È possibile visualizzare il campo nome utente su una riga ( Nome) o due ( Cognome e nome).

Tipo di campo Oggetto. Questo campo può essere uno dei seguenti tipi: , poi sul campo Temi preimpostati puoi inserire opzioni, una per riga, che gli utenti possono selezionare dalla parte anteriore del sito. L'immagine seguente mostra un esempio di un campo di tipo oggetto Menu `A tendina. Impostando gli argomenti è possibile, ad esempio, impostare regole per l'elaborazione delle lettere (filtri) nella posta e ricevere una lettera con un argomento particolare e reindirizzarla automaticamente al destinatario desiderato. Puoi leggere ulteriori informazioni su come eseguire questa operazione per la posta Yandex, Mail.ru e Gmail nella loro guida. Inoltre, si può fare anche per gli altri. Servizi Postali e client di posta elettronica, ad esempio, per Thunderbird.

Lunghezza del messaggio. Limite al numero di caratteri in un campo Messaggio.

Captcha Joomla!. Possibilità di attivare captcha per proteggersi dallo spam. Per fare ciò, è necessario che qualsiasi plugin di tipo “captcha” sia configurato e abilitato nel gestore plugin. Controlla anche le impostazioni delle opzioni CAPTCHA (predefinito) V Sistema - Impostazioni generali.

Invia una copia.È possibile configurare la possibilità di inviare una copia della lettera all'utente tramite e-mail. Sono disponibili le seguenti opzioni: Permetti all'utente di decidere– nel modulo di feedback di Joomla verrà visualizzata un'apposita casella di controllo (immagine sotto), selezionando la quale l'utente riceverà una copia della lettera via email; SÌ– la casella di controllo non verrà visualizzata nel modulo di feedback, ma una copia della lettera verrà inviata all'utente tramite email; NO– la casella di controllo non verrà visualizzata nel modulo di feedback e una copia della lettera non verrà inviata all'utente.

Mostra la casella per il consenso al trattamento dei dati personali. Attiva la visualizzazione di una casella di controllo (immagine sotto) per ottenere il consenso dell'utente al trattamento dei suoi dati personali in conformità con la normativa GDPR e 152 Legge Federale.

Nel modulo di feedback di Joomla, puoi creare fino a 3 campi personalizzati di diverso tipo: Campo di testo, Area di testo, Elenco a discesa, Pulsante di opzione, Casella di controllo. Se hai scelto una di queste tipologie: Elenco a discesa, pulsante di opzione, casella di controllo, poi sul campo Temi preimpostati puoi inserire opzioni, una per riga, che gli utenti possono selezionare dalla parte anteriore del sito. Campo di testo, Area di testo E Menu `A tendina sono discussi nelle figure sopra nell'articolo e la figura seguente mostra un esempio di un tipo di campo personalizzato Pulsante di opzione(nella parte superiore dell'immagine) e Casella di controllo(in fondo all'immagine).

Vale anche la pena notare separatamente il campo Regione. Per impostazione predefinita, contiene i nomi degli stati degli Stati Uniti. Per modificarlo, aprire il file “modules/mod_rscontact/helper.php” e intorno alla riga 33, dopo “static $states = array”, inizia l'elenco delle aree. Cambialo secondo le tue necessità. Puoi aggiungere e rimuovere aree.

Ecco le impostazioni che ti consentono di configurare il modulo di feedback di Joomla stesso (immagine sotto).

Intestazione del modulo. piè di pagina forme. Puoi aggiungere contenuto sopra e/o sotto il modulo utilizzando visual editor di testo. È possibile inserire un'immagine, una tabella e così via. Sfortunatamente, i plugin non vengono elaborati al suo interno. Non sarà quindi possibile inserire un video utilizzando, ad esempio, AllVideos.

CSS personalizzato. Puoi aggiungere Stile CSS per modificare l'aspetto del modulo. Ma è meglio farlo utilizzando un foglio di stile. Nel mio esempio ho aggiunto la riga:

#mod-rscontact-counter-231 (visualizzazione: nessuno;)

Nasconde la visualizzazione del campo con il contatore del numero di caratteri rimanenti (immagine sotto).

JavaScript personalizzato. Puoi inserire il tuo codice Javascript, senza il tag "script", che verrà caricato con il modulo.

Indicatore di campo obbligatorio. Verrà visualizzato accanto all'etichetta del campo quando il campo è impostato come obbligatorio.

Posizione della firma. Puoi posizionare le etichette dei campi all'interno o sopra i campi (immagine sotto).

La figura seguente mostra un modulo di feedback con didascalie sopra i campi, un contatore nascosto per i caratteri rimanenti e didascalie sopra e sotto il modulo stesso.

Forma orizzontale. Consente di applicare stili più adatti alla creazione di una forma orizzontale. Inoltre, per l'opzione Posizione della firmaè necessario selezionare un'opzione Al di fuori.

Larghezza del margine automatica. Questa opzione influisce sull'impostazione della larghezza del margine.

Messaggio di gratitudine. Qui puoi specificare un messaggio che verrà mostrato dopo aver inviato il modulo. È possibile applicare la formattazione e aggiungere immagini.

Questa scheda (immagine sotto) contiene opzioni che ti permetteranno di personalizzare le lettere inviate all'amministratore e all'utente. Le impostazioni sono le stesse sia per gli amministratori che per gli utenti.

Nelle opzioni Destinatario (e-mail dell'amministratore), Cc, Ccn Potrai specificare i destinatari delle lettere. Come minimo è necessario inserire un'e-mail nel campo Destinatario (e-mail dell'amministratore). È possibile specificare più indirizzi, separandoli con una virgola o un punto e virgola.

Nel campo Soggetto Inserisci l'oggetto della lettera. Puoi utilizzare i segnaposto. I segnaposto sono tag speciali al posto dei quali verranno sostituiti determinati dati. L'elenco dei segnaposto disponibili è riportato sotto il campo di immissione del contenuto dell'e-mail. Nel campo Contenuto puoi inserire il testo della lettera utilizzando i segnaposto. Nella figura sopra puoi vedere le impostazioni per il contenuto della lettera. E questo è come appare la lettera stessa (immagine sotto). Come puoi vedere, tutti i tag sono stati sostituiti con i dati del modulo specificati dall'utente e con i dati che il modulo è stato in grado di estrarre da altre fonti (data, indirizzo IP, nome del sito).

Opzione Utilizzo Rispondi al mittente farà in modo che quando premi un pulsante Risposta nell'interfaccia di posta, quando si visualizza una lettera ricevuta dall'amministratore, indirizzo e-mail il mittente del modulo verrà automaticamente aggiunto all'indirizzo del destinatario dell'e-mail. L'indirizzo del destinatario può essere sovrascritto specificandolo nelle impostazioni Risposta.

Se le lettere non vengono inviate, prova queste soluzioni al problema.

Disabilitare la cache. In alternativa, puoi utilizzare un componente cache di terze parti come JotCache per escludere il modulo RSContact dalla memorizzazione nella cache.

Controlla le impostazioni della posta in Sistema – Impostazioni generali – Server – Impostazioni posta. Provalo diversi modi invio. Contatta il tuo provider di hosting per chiarire la configurazione della posta sul tuo server.

Come potete vedere, questa forma feedback Joomla è molto funzionale e facile da configurare. Spero che questa recensione ti aiuti nella scelta dell'estensione appropriata e nella successiva configurazione del modulo RSContact. Nel prossimo articolo “Recensione DJ-EasyContact. Modulo modulo di feedback in Joomla » esamineremo un'altra estensione gratuita simile.

Uno dei compiti più comuni nella pratica è l'implementazione di un modulo di feedback. Intendi scrivere il suo codice HTML, progettarlo in CSS, creare Scritto PHP a, che elaborerebbe i dati ricevuti dall'utente e li invierebbe alla nostra posta, scrivendo uno script JS che controllerà il modulo per l'adeguatezza dei dati inseriti, proteggendo la nostra idea dallo spam in modo che la nostra casella di posta non crolli dagli attacchi dei bot .

Tutti i punti precedenti saranno discussi nella nostra recensione e commentati in dettaglio.

Quindi, iniziamo a creare un modulo di feedback:

HTML

Prima di tutto scriviamo il codice HTML, che specifica i campi che l'utente dovrà compilare. Verranno formalizzati in futuro. Il codice del modulo è simile al seguente:

< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" >Nome:< input maxlength= "30" type= "text" name= "name" /> < label for = "phone" >Telefono:< input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" >E-mail:< input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" >Messaggio:< textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "Inviare" />

E visivamente ora appare così:

Sono d'accordo, finora tutto è brutto e nulla è chiaro, ma abbiamo appena iniziato.

Diamo un'occhiata al codice sopra in dettaglio:

• < form method= "post" action= "mail.php" > …

  
  Per creare un modulo è necessario utilizzare il tag form. È lui che determina l'inizio e la fine della forma per l'interprete del codice. Come ogni tag, ha un intero set di attributi, ma ce ne sono solo due richiesti affinché il modulo funzioni, questi sono metodo (il metodo per inviare una richiesta al server, post è usato come standard per i moduli) e azione ( indica il percorso del file del gestore del modulo, vale a dire in Questo file conterrà uno script PHP, che poi ci invierà i valori immessi dall'utente tramite e-mail. Nel nostro caso, vediamo che questo file si chiama mail.php e si trova nella stessa directory del sito della pagina che stiamo considerando).

• < input maxlength= "30" type= "text" name= "name" />

  
  Successivamente abbiamo gli input. Questi sono in realtà i campi del modulo in cui gli utenti inseriranno le informazioni di cui abbiamo bisogno (type="text" indica che si tratterà di testo). L'attributo maxlength specifica quanti caratteri l'utente può inserire in un determinato campo del modulo. L'attributo più importante è name: specifica il nome di un campo specifico. È con questi nomi che lo script PHP elaborerà successivamente le informazioni che lo inseriscono. Se lo desideri, puoi anche impostare l'attributo segnaposto, che visualizza il testo all'interno del campo che scompare quando il cursore viene posizionato al suo interno. Uno dei problemi con il segnaposto è che non è supportato da alcuni browser meno recenti.

• < label for = "name" >Nome:

  
  Utilizzato se abbiamo abbandonato i segnaposto. Una firma di campo regolare, l'attributo for indica a quale campo specifico si riferisce questa firma. Il valore indica il nome del campo che ci interessa.

• < textarea rows= "7" cols= "50" name= "message" >

  
  Proprio come l'input, è previsto che l'utente inserisca informazioni, solo che questa volta il campo è adattato per messaggi lunghi. Righe specifica la dimensione del campo in righe, colonne in caratteri. In generale, impostano l'altezza e la larghezza del nostro campo.

• < input type= "submit" value= "Inviare" />

  
  Type="submit" ci dice che questo è un pulsante per inviare un modulo e value specifica il testo che sarà all'interno di questo pulsante.

• < div class = "right" >

  
  vengono utilizzati solo per l'ulteriore progettazione visiva del modulo.

CSS

Affinché il nostro modulo di feedback sia presentabile, deve essere formattato. Per ottenere il seguente risultato:

Abbiamo utilizzato questo codice:

modulo ( sfondo: #f4f5f7; imbottitura: 20px; ) modulo . sinistra, forma . right ( display: inline- block; vertical- align: top; width: 458px; ) form . destra (imbottitura-sinistra: 20px;) etichetta (visualizzazione: blocco; dimensione carattere: 18px; allineamento testo: centro; margine: 10px 0px 0px 0px;) input, textarea (bordo: 1px solido #82858D; imbottitura: 10px; dimensione carattere: 16px; larghezza: 436px; ) area testo (altezza: 98px; margine inferiore: 32px; ) input[ tipo= "invia"] ( larghezza: 200px; float: destra; bordo: nessuno; sfondo: #595B5F; colore: #fff; trasformazione del testo: maiuscolo;

Non vedo il motivo di descrivere i CSS in dettaglio; attirerò la vostra attenzione solo sui punti chiave:

Non è necessario scrivere un disegno per ciascun tag nel modulo. Prova a costruire i tuoi selettori in modo da poter progettare tutti gli elementi di cui hai bisogno in un paio di righe di codice.

Non utilizzare tag di tipo non necessari per interrompere righe e creare rientri< br>, < p>ecc. I CSS con le proprietà display: block e margin con riempimento si adattano bene a questi compiti. Maggiori informazioni sul motivo per cui non dovresti usarlo< br>per quanto riguarda il layout in generale, puoi leggere nell'articolo Tag br, ma è proprio necessario? .

Non dovresti utilizzare il layout tabellare per i moduli. Ciò contraddice la semantica di questo tag e i motori di ricerca adorano il codice semantico. Per formare la struttura visiva del documento, abbiamo solo bisogno dei tag div e di quelli specificati in Proprietà CSS display: inline-block (dispone i blocchi in fila) e vertical-align: top (impedisce loro di disperdersi sullo schermo), impostali all'altezza richiesta e voilà, niente di superfluo e tutto si trova nel modo in cui ci serve.

Per coloro che vogliono risparmiare tempo nella progettazione di siti Web, posso consigliare di utilizzare i framework CSS durante la creazione di siti Web, in particolare quelli scritti da sé. La mia scelta a questo proposito è Twitter Bootstrap. Puoi guardare una lezione su come progettare moduli utilizzandolo.

PHP

Bene, è il momento di far funzionare il nostro modulo.

Andiamo nella nostra directory principale del sito e creiamo lì il file mail.php, di cui abbiamo precedentemente specificato il percorso nell'attributo action del tag form.

Alla fine il suo codice sarà simile a questo:

Il tuo messaggio è stato inviato con successo

Puoi saltare la discussione delle parti HTML e CSS di questo documento. Fondamentalmente, questa è una normale pagina del sito Web che puoi progettare in base ai tuoi desideri e alle tue esigenze. Diamo un'occhiata alla sua parte più importante: lo script PHP per l'elaborazione del modulo:

$indietro = "

ritorno

" ;

Con questa riga creiamo un collegamento per tornare alla pagina precedente. Poiché non sappiamo in anticipo da quale pagina l’utente arriverà a questa, ciò avviene tramite una piccola funzione JS. In futuro accederemo semplicemente a questa variabile per visualizzarla nei luoghi di cui abbiamo bisogno.

if (! vuoto ($_POST ["nome"]) e ! vuoto ($_POST ["telefono"]) e ! vuoto ($_POST ["mail"]) e ! vuoto ($_POST ["messaggio"])) ( //parte interna del gestore ) else ( echo "Per inviare un messaggio, compila tutti i campi! $back " ; exit ; )

Qui aggiungiamo un controllo del modulo per garantire che i campi siano pieni. Come hai intuito, nella parte $_POST["name"], tra virgolette, scriviamo il valore dell'attributo name dei nostri input.

Se tutti i campi vengono compilati, allora lo script inizierà ad elaborare i dati nella sua parte interna, ma se almeno un campo non è stato compilato, allora verrà visualizzato un messaggio sullo schermo dell'utente chiedendogli di compilare tutti i campi i campi del modulo riportano "Per inviare un messaggio, compila tutti i campi $back" e un collegamento per tornare alla pagina precedente che abbiamo creato con la prima riga.

Successivamente incolliamo nella parte interna del gestore del modulo:

$nome = trim(strip_tags($_POST["nome"]));

$telefono = trim(strip_tags($_POST["telefono"])); $mail = trim(strip_tags($_POST["mail"]));$messaggio = trim(strip_tags($_POST["messaggio"]));

In questo modo abbiamo cancellato l'input dell'utente

tag html

e spazi aggiuntivi. Questo ci consente di proteggerci dalla ricezione di codice dannoso nei messaggi che ci vengono inviati.

I controlli possono essere resi più complicati, ma questo è a tua discrezione. Abbiamo già installato una protezione minima lato server. Faremo il resto lato client utilizzando JS.
Non consiglio di abbandonare completamente la protezione dei moduli lato server a favore di JS, poiché, sebbene estremamente rari, ce ne sono di unici con JS disabilitato nel browser.
Dopo aver pulito i tag, aggiungi l'invio di un messaggio:
mail ("[email protected]" , "Lettera dal_tuo_indirizzo_sito" , "Ti ho scritto: " . $nome . "

Il suo numero: " . $telefono . "

La sua email: " . $mail ".

Il suo messaggio: " . $message, "Content-type:text/html;charset=windows-1251" ) ;

È questa linea che è responsabile della generazione e dell'invio del messaggio a noi. È compilato come segue:< br />“[email protected]” – qui inserisci la tua email tra virgolette< br />"Lettera dal tuo_indirizzo_sito" è l'oggetto del messaggio che verrà inviato alla tua email. Puoi scrivere qualsiasi cosa qui.< br />"Ti ho scritto: ".$nome."< br />Il suo numero: ".$phone."

La sua email: ".$mail."

Il suo messaggio: ".$message – formiamo il testo del messaggio stesso. $name – inseriamo le informazioni compilate dall'utente accedendo ai campi del passaggio precedente, tra virgolette descriviamo cosa significa questo campo, con il tag

Interrompiamo la riga in modo che il messaggio nel suo insieme sia leggibile.< meta http- equiv= "Content-Type" content= "text/html; charset=windows-1251" />Content-type:text/html;charset=windows-1251 - alla fine c'è un'indicazione esplicita del tipo di dati trasmesso nel messaggio e della sua codifica. IMPORTANTE! La codifica specificata nell'"intestazione" del documento (

Molti non indicano esplicitamente la codifica del messaggio inviato, ma su alcuni client di posta a causa di ciò potrebbero sorgere problemi in futuro (vengono inviate lettere illeggibili alla posta), quindi ti consiglio di indicarlo comunque.

Controllo del modulo per l'adeguatezza dei dati inseriti

Per garantire che gli utenti non perdano inavvertitamente campi e compilino tutto correttamente, vale la pena controllare i dati inseriti.

Questo può essere fatto sia in PHP lato server che in JS lato client. Io utilizzo la seconda opzione, perché in questo modo una persona può scoprire immediatamente cosa ha fatto di sbagliato e correggere l'errore senza effettuare ulteriori transizioni di pagina.

Incolliamo il codice dello script nello stesso file in cui abbiamo la parte HTML del modulo. Nel nostro caso sarà simile a questo:

< script>function checkForm(form) ( var name = form. name. value; var n = name. match(/ ^[ A- Za- zA- Jaa- z ] * [ A- Za- zA- Ja- z ] + $/ ) ; if (! n) ( alert("Il nome è stato inserito in modo errato, correggere l'errore" ) ​​; return false ; ) var phone = form phone ] [ 0 - 9 - ] * [ 0 - 9 - ] + $/ ) ; if (! p) ( alert("Telefono inserito in modo errato") ; return false ; ) var mail = form mail . A- Za- z0- 9 ] [ A- Za- z0- 9 \. - z0- 9 - ] * [ A- Za- z0- 9 ] + ) * \ ) + [ A- Za- z] + $/ ) ; if (! m) ( alert("L'e-mail è stata inserita in modo errato , per favore correggi l'errore" ); return false ; ) return true ; )

Bene, ora la solita analisi:

Per poter controllare il modulo quando facciamo clic sul pulsante di invio, alleghiamo l'avvio del nostro script al tag del modulo:

< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >

Ora prendiamo la checklist punto per punto:

Come puoi vedere, un mini assegno di questo tipo è scritto per ciascuno dei nostri campi. Ho evidenziato il segno di spunta per un campo nello screenshot con un quadrato rosso; per gli altri campi ha una struttura simile e se è necessario aggiungere o rimuovere un campo, ora puoi farlo facilmente.

In questa lezione conosceremo la funzione mail(), utilizzando l'esempio della creazione di un modulo di feedback in PHP e quindi dell'invio dei dati ricevuti via e-mail.

Per fare ciò, creeremo due file: forma.php e mail.php. Il primo file conterrà solo un modulo con campi in cui l'utente può inserire i dati. All'interno del tag del modulo c'è un pulsante "Inviare" e l'attributo action, che si riferisce al gestore - mail.php, che è il punto in cui si accede ai dati del modulo quando si fa clic sul pulsante "Inviare". Nel nostro esempio, i dati del modulo vengono inviati a una pagina web chiamata "/mail.php". Questa pagina contiene uno script PHP che elabora i dati del modulo:

I dati del modulo vengono inviati utilizzando il metodo POST (elaborati come $_POST). $_POST è un array di variabili passato allo script corrente tramite il metodo POST.

Di seguito puoi vedere il contenuto del file forma.php, i cui campi vengono compilati dall'utente stesso su alcuni siti web. Tutti i campi per l'immissione dei dati devono avere un attributo nome; scriviamo noi stessi i valori, in base alla logica.

Modulo di feedback in PHP inviato via email


Modulo di feedback in PHP





Lasciate un messaggio:
Il tuo nome:



E-mail:

Numero di telefono:

Messaggio:

L'area di testo può contenere importo illimitato personaggi-->

Ecco come appare visivamente il modulo nel browser.

Successivamente scriviamo il codice per il file mail.php. Troviamo i nostri nomi per le variabili. In PHP, una variabile inizia con il segno $ seguito dal nome della variabile. Il valore testuale della variabile è racchiuso tra virgolette. Utilizzando le variabili, il contenuto del modulo viene inviato all'e-mail dell'amministratore semplicemente inserendo il nome dell'elemento del modulo tra parentesi quadre: il valore del nome.

Pertanto, i dati dell'array $_POST verranno trasferiti alle variabili corrispondenti e inviati alla posta utilizzando la funzione mail. Compiliamo il nostro modulo e premiamo il pulsante di invio. Non dimenticare di includere la tua email. La lettera è arrivata immediatamente.