Modulo di feedback in jQuery e PHP. Modulo di contatto con jQuery, jGrowl, ajaxForm e Buzz

Per non dipendere dal lavoro degli script di altre persone, impara a crearli da solo. Il mio Videocorso te lo insegnerà" PHP e MySQL da Zero a Guru":

In questa lezione faremo conoscenza con la funzione posta (), usando l'esempio della creazione Moduli di feedback PHP con il successivo invio dei dati ricevuti alla posta.

Per questo, creeremo due file - forma.php e mail.php... Il primo file conterrà solo un modulo con i campi per l'inserimento dei dati da parte dell'utente. All'interno del tag modulo- pulsante "Spedire" e attributo azione che si riferisce al gestore - mail.php, è a lui che si accede ai dati dal modulo quando si preme il pulsante "Spedire"... Nel nostro esempio, i dati del modulo vengono inviati a una pagina Web denominata "/Mail.php"... Questa pagina contiene uno script per PHP che elabora i dati del modulo:

Questo è l'aspetto visivo del modulo nel browser.

Successivamente, scriviamo il codice per il file mail.php... Venendo con i nomi per le variabili. V PHP la variabile inizia con un segno $ e poi il nome della variabile. Valore del testo la variabile è racchiusa tra virgolette. Con l'ausilio di variabili, il contenuto del form viene inviato alla mail dell'amministratore, semplicemente sostituendolo in parentesi quadre nome dell'elemento del modulo - valore nome.

$ a = " [e-mail protetta]"; // email del destinatario dei dati dal form
$ tema = "Modulo di feedback PHP"; // oggetto dell'e-mail ricevuta
$ messaggio = "Il tuo nome:". $ _ POST ["nome"]. "
"; // assegna alla variabile il valore ottenuto dalla forma nome = nome
$ messaggio. = "E-mail:". $ _ POST ["e-mail"]. "
"; // ottenuto dalla forma nome = email
$ messaggio. = "Numero di telefono:". $ _ POST ["telefono"]. "
"; // ottenuto dalla forma nome = telefono
$ messaggio. = "Messaggio:". $ _ POST ["messaggio"]. "
"; // ottenuto dalla forma nome = messaggio
$ headers = "Versione MIME: 1.0". "\ r \ n"; // l'intestazione corrisponde al formato più un carattere di avanzamento riga
$ headers. = "Tipo di contenuto: testo / html; set di caratteri = utf-8". "\ r \ n"; // indica il tipo di contenuto inviato
mail ($ a, $ tema, $ messaggio, $ intestazioni); // invia i valori delle variabili al destinatario via e-mail
?>

Quindi, i dati dall'array $ _POST verrà passato alle variabili corrispondenti e inviato alla posta utilizzando la funzione posta... Compiliamo il nostro modulo e premiamo il pulsante di invio. Non dimenticare di includere la tua e-mail. La lettera è arrivata all'istante.

Quindi, continuiamo la conversazione. Nell'ultimo post, ti ho parlato del motivo per cui abbiamo effettivamente bisogno di feedback e di cosa si tratta. In questo vi presenterò le regole del feedback e vi parlerò un po' di come e dove applicarlo.

9 principi di feedback.

Darò un esempio per ciascuno dei principi: è anche molto semplice, ma spero che renderà i principi più chiari. Inoltre, lo diluirò con i miei pensieri. Andare!

1. Il feedback è lo strumento più importante in tutte le sfere della vita, e ancor di più nelle attività sociali e nel lavoro con le persone. Usalo!
Ho scritto dell'importanza del feedback nell'ultimo post, qui voglio scrivere del suo utilizzo. Credo che più le persone acquisiscono familiarità con il feedback e i suoi principi, più facile sarà per tutti noi vivere. È applicabile nel lavoro, nella comunicazione quotidiana con le persone, in famiglia. Ma! È molto importante non esagerare con esso. Il mio insegnante nel corso di gruppo una volta ha detto: "Mi sono reso conto che dovevo prendermi una vacanza quando ho iniziato a dare un feedback a mio marito e ai miei figli, seguendo chiaramente i suoi principi". Questa sua affermazione mi è davvero entrata nell'anima. Non fraintendetemi, sono sicura che il feedback a marito, figli, madre e suocera non può che essere vantaggioso. Ma non dimenticare che la famiglia è nostra. posto sicuro, e dovrebbe esserci spazio per emozioni inspiegabili, dichiarazioni sciocche, dimostrazioni d'amore senza scopo, stranezze, infine. In una famiglia è molto importante trovare un equilibrio tra feedback e normali emozioni umane. Questo è importante ovunque, ma soprattutto in famiglia.

2. Il feedback è dato dal desiderio di aiutare, migliorare, supportare e guidare una persona.
Questo principio è estremamente importante. Prima di dare un feedback, fermati un secondo e pensa al motivo per cui vuoi dirlo. La tua amica vuole andare al primo appuntamento con una gonna che rovina molto il suo bell'aspetto e tu vuoi che il suo appuntamento vada bene, sei preoccupato per lei? Parlare. Sei infastidito dall'odore del profumo della tua collega, e lei stessa, e la tua lingua ha prurito da un mese ormai per dirle tutto quello che pensi del suo profumo soffocante? Questo non è un feedback, amici. Probabilmente è meglio tacere qui.

3. Nel processo di feedback, il tuo compito è portare esempi specifici e fatti, non affermazioni astratte ed emotive.
Tutto è semplice qui. "Vasya, dannazione, capra, che diavolo mi hai scritto qui!" - questo non è un feedback ed è improbabile che possa giovare a nessuno. "Vasya, ti sbagli. Ti ho chiesto di scrivermi un elenco di tutti i clienti con i nomi di tre lettere, e mi hai scritto un elenco di dipendenti con nomi di quattro lettere... Sarà molto più facile per me se ascolterai le mie richieste con più attenzione. "Questo è un feedback. Vasya potrebbe essere una capra, ma dopo la prima frase rimarrà una capra. Dopo il feedback, c'è la possibilità che la prossima volta tu riceverà qualcosa da lui, ciò di cui hai bisogno.

4. Scelta parole corrette e la formulazione è estremamente importante nel processo di feedback - ricorda che una persona che è importante per te è seduta di fronte a te, o l'interazione con lui è importante per te (questo è al lavoro, di regola).
Questo punto segue direttamente dal precedente. Prima di dare un feedback, PENSA esattamente a cosa vuoi dire e cosa vuoi che ottengano. Esiste un cosiddetto "principio del sandwich", a me è piuttosto indifferente, ma molti lo trovano utile, perché no. Dice che è necessario inserire argomenti nel feedback, come pane e formaggio in un panino. Iniziamo con il positivo (pane), continuiamo con il negativo (formaggio) e finiamo di nuovo con il positivo. Penso che questo sia eccessivo, ma se ti piace, prendilo e usalo.

5. Si consiglia di non usare la parola "ma" nel feedback (mi è piaciuto tutto, ma ...). Annulla e cancella quanto detto prima.
Se il tuo feedback contiene punti sia positivi che negativi, separali semplicemente, dillo in frasi diverse. Dopotutto, non dipendono l'uno dall'altro e non si annullano a vicenda. La tua amica, che viene da te per un consiglio sui vestiti nuovi, è più probabile che si arrabbi se le dici "La gonna non è niente, ma le scarpe sono assolutamente stupide". Ma se dici "Mi piace questa gonna, ti sta perfettamente, è slanciata e il tuo colore. Non mi piacciono le scarpe, mi sembra che questo non sia il tuo stile, e il colore è sfortunato". Questa è una parola sulla "verità negli occhi". Il feedback ci permette di dire questa verità senza rischiare di offendere gli amici o litigare con i colleghi. Certo, ho amici e familiari con cui cavalcheranno la "gonna stupida" e persino le "gambe storte", ma tutti noi abbiamo poche persone del genere, quindi vedi il punto 1.

6. Ricorda che un buon feedback è il tipo di feedback che consentirà alla persona che lo riceve di migliorare qualcosa. Ricorda anche che nessuno è obbligato ad essere d'accordo con il tuo feedback e ad accettarlo - dopotutto, sei sempre soggettivo.
Questo, amici, è estremamente punto importante... Non dimentichiamo che è più probabile che un amico con scarpe stravaganti continui a indossarle. E la nostra opinione non è l'ultima opinione. V caso migliore possiamo sperare che se ne tenga conto in un modo o nell'altro. In un altro caso, la nostra opinione può rimanere solo la nostra, e questo è NORMALE. Dopotutto, noi stessi non accettiamo sempre l'opinione di coloro che ci danno un feedback, che sia un tre volte vincitore del premio Nobel o sua madre. Quindi lasciamo la decisione: accettare o non accettare il feedback dalla parte offesa.

7. Il feedback non dovrebbe essere giudicante, ma dovrebbe essere un riflesso SOLO dei tuoi pensieri e sentimenti sul destinatario del feedback in una situazione particolare.
Sì, sì, appena condanniamo, il nostro feedback perde valore, mi sembra che qui non serva nemmeno un esempio, e tutto è chiaro.

8. Se sei un destinatario di feedback, non dimenticare di ringraziare la persona che ti dà questo feedback. Con le conoscenze acquisite, devi fare un lavoro, separare i grani dalla pula e provare ad applicarli. Il feedback è un dono prezioso!
Difficile, vero? Ma essere in grado di ottenere un feedback è importante quanto darlo, penso.

9. È molto importante non perdere feedback positivi durante il processo di feedback - non è meno importante del feedback negativo!
Molti di noi hanno un tale atteggiamento: affinché una persona impari, è necessario sgridarlo. Una tale reliquia dello scoop. Beh, sono stronzate, lo sai. Dobbiamo ricordare che il feedback non è solo un elenco costruttivo e accurato delle carenze, ma anche un'indicazione indispensabile dei pro e della ricerca delle cose buone. Dopotutto, dici a tuo marito non solo "Caro, hai salato troppo la zuppa!", Ma anche "Tesoro, che deliziosi panini hai cotto!" :) Dopotutto, se il marito sente sempre parlare solo di cotolette bruciate e di zuppa salata, smetterà piuttosto rapidamente di cucinare. Quindi in altre aree - non dimenticare il buono, ma meglio - inizia con la ricerca.

Voglio darvi un esempio di feedback molto importante che ho ricevuto. L'esempio è molto personale, ma per me è importante raccontarvi questa esperienza per farvi vedere vera azione questo strumento non solo sull'astratto Vasya Pupkin dai miei esempi.
Circa un anno fa, il mio migliore amico mi ha chiamato in un bar. Ilan, mio ​​figlio, aveva 3 mesi, avevo appena iniziato a strisciare nel mondo da pannolini e passeggini. Pensavo che stessimo per parlare delle stronzate di nostra zia. E ha detto che aveva bisogno di parlarmi di quella dolorosa. Mi ha detto che le manco davvero. Che negli ultimi sei mesi mi sono completamente immerso in me stesso e nella mia famiglia, che non le parlo al telefono, non le dico niente della gravidanza o di mio figlio, non ascolto i suoi problemi e gioie. Ha detto che le mancavo molto, e non sapeva cosa sarebbe successo dopo con la nostra relazione, dal momento che ci stavamo allontanando, e io non ero assolutamente a conoscenza della sua notizia. Ha aggiunto che ha un periodo molto difficile della sua vita e ha davvero bisogno del mio sostegno.
Era un vero riscontro. Ha parlato dei suoi sentimenti, fornendo esempi di situazioni specifiche. Non mi ha incolpato per la mia immersione nella famiglia, ha parlato di cosa vorrebbe dalla nostra relazione e di come questo può essere raggiunto. Era evidente che lo diceva non solo per se stessa, ma anche per me.
E per me era una novità assoluta! Ero così immerso nel mio figlio appena nato, e prima ancora - in gravidanza, che non ho notato come mi sono alienato le persone più vicine e molto importanti! io sono su oggi scioccato da quanto fossi inconsapevole del mio comportamento.

Cosa sarebbe successo se non mi avesse parlato allora? Molto probabilmente, una serie di lamentele: "perché non mi chiami?" "non vi vedete più da cento anni" "non vi interessa la mia vita", ecc.
Cosa successe veramente? Mi svegliai". Le ho detto chiaramente che non volevo andare da nessuna parte, che l'amavo e che stavo tornando. Mi sono ripreso e abbiamo fatto diversi "appuntamenti" contemporaneamente per i prossimi mesi. Ho iniziato a chiamare più spesso e ho cercato di alzare il telefono quando ha chiamato. E inoltre - sono anche andato a trovare un'altra amica che trova più difficile dare questo tipo di feedback, e le ho fatto io stessa una domanda. E si è scoperto che anche lei si sente come la prima - puoi immaginare? Riesci a immaginare quante cose buone sono uscite da un feedback? Sono rimasto in contatto con due persone molto importanti per me. E il mio amico è molto grato per quella conversazione.

In conclusione, voglio dire che c'è più di un semplice feedback nella vita. Contiene litigi, sesso, stupidità, discussioni, autoindulgenza, umorismo, risentimento, amore, complimenti, risate e molto altro. E tutto questo ha diritto di esistere - come diversi aspetti della comunicazione interpersonale. Ed è solo un po' più facile vivere con il feedback.

Quando si avvia un nuovo progetto web, non c'è niente di più bello che ottenerlo subito. recensioni positive e grazie dai primi visitatori. Sfortunatamente, i proprietari di molti siti Web perdono di vista questo fatto ed è abbastanza difficile contattare l'amministrazione sul loro sito.

Oggi ti parleremo di una semplice soluzione al problema. Questo modulo, utilizzando jQuery, PHP e PHPMailer, ti consentirà di ricevere feedback dai visitatori direttamente sul tuo e-mail.

HTML

Iniziamo con markup HTML... Il foglio di stile è incluso all'inizio del documento e le fonti javascript sono alla fine. Ciò migliora le prestazioni perché gli script vengono caricati per ultimi mentre il resto del sito Web è già caricato e visualizzato.

: feedback.html

Modulo di feedback rapido con PHP e jQuery | Tutorialzine Demo

Nel corpo del documento vediamo il DIV "#feedback". Ha un posizionamento fisso temporizzato nell'angolo in basso a destra della finestra, che puoi vedere in sezione successiva articoli.

Ci sono 5 campate colorate al suo interno. Sono larghi il 20% ciascuno del documento e sono allineati a sinistra. In questo modo, riempiono l'intera larghezza del DIV #feedback.

Infine, il contenitore .section, che contiene il titolo e l'intestazione, contiene il pulsante e il campo di inserimento del testo.

Passando alla modifica degli stili del form, dobbiamo prima dire qualcosa su come è strutturato il foglio di stile. Come puoi vedere dalle definizioni CSS di seguito, ogni regola inizia con un #feedback. In questo modo, otteniamo l'equivalente CSS degli spazi dei nomi, che semplifica l'aggiunta di codice a un sito esistente e aiuta a evitare potenziali conflitti.

: stili.css - Parte 1

#risposta (
colore di sfondo: # 9db09f;
larghezza: 310 px;
altezza: 330px;
posizione: fissa;
in basso: 0;
a destra: 120 px;
margine inferiore: -270px;
indice z: 10000;
}

#feedback .sezione (
sfondo: url ("img / bg.png") repeat-x a sinistra in alto;
bordo: 1px solido # 808f81;
bordo inferiore: nessuno;
imbottitura: 10px 25px 25px;
}

#feedback .colore (
galleggiante: sinistro;
altezza: 4px;
larghezza: 20%;
trabocco: nascosto;
}

#feedback .color-1 (colore di sfondo: # d3b112;)
#feedback .color-2 (colore di sfondo: # 12b6d3;)
#feedback .color-3 (colore di sfondo: # 8fd317;)
#feedback .color-4 (colore di sfondo: # ca57df;)
#feedback .color-5 (colore di sfondo: # 8ecbe7;)

#risposta h6 (
sfondo: url ("img / feedback.png") senza ripetizione;
altezza: 38px;
margine: 5px 0 12px;
rientro del testo: -99999px;
cursore: puntatore;
}

#feedback area di testo (
colore di sfondo: #fff;
confine: nessuno;
colore: # 666666;
font: 13px "Lucida Sans", Arial, sans-serif;
altezza: 100px;
imbottitura: 10px;
larghezza: 236px;

Moz-box-shadow: 4px 4px 0 # 8a9b8c;
-webkit-box-shadow: 4px 4px 0 # 8a9b8c;
box-shadow: 4px 4px 0 # 8a9b8c;
}
Il primo elemento che dobbiamo formattare è il DIV #feedback. Ha un posizionamento fisso ed è limitato alla finestra del browser. Segue la definizione di DIV'a.section e cinque campate colorate. Questi intervalli differiscono solo per il colore di sfondo specificato dalle diverse classi.

Alla fine, abbiamo regole CSS che determinano l'aspetto del campo di inserimento del testo.

: stili.css - Parte 2

#feedback a.submit (
sfondo: url ("img / submit.png") no-repeat;
confine: nessuno;
blocco di visualizzazione;
altezza: 34px;
margine: 20px automatico 0;
decorazione del testo: nessuna;
rientro del testo: -99999px;
larghezza: 91px;
}

#feedback a.submit: hover (
posizione di sfondo: in basso a sinistra;
}

#feedback a.submit.working (
background-position: in alto a destra!importante;
cursore: predefinito;
}

#feedback .messaggio (
font-family: Corbel, Arial, sans-serif;
colore: # 5a665b;
text-shadow: 1px 1px 0 # b3c2b5;
margine inferiore: 20px;
}

#feedback .freccia (
sfondo: url ("img / arrows.png") no-repeat;
galleggiante: a destra;
larghezza: 23px;
altezza: 18px;
posizione: relativa;
in alto: 10px;
}

#feedback .arrow.down (posizione di sfondo: in alto a sinistra;)
#feedback h6: hover .down (posizione sfondo: in basso a sinistra;)
#feedback .arrow.up (posizione sullo sfondo: in alto a destra;)
#feedback h6: hover .up (posizione sfondo: in basso a destra;)

#feedback .risposta (
dimensione del carattere: 21px;
margine superiore: 70 px;
allineamento del testo: centro;
text-shadow: 2px 2px 0 # 889889;
colore: #FCFCFC;
}
Nella seconda parte del foglio di stile, puoi vedere la definizione del pulsante di invio (invio). Si prega di notare che il pulsante ha tre posizioni che sono legate allo stesso immagine di sfondo- submit.png e viene visualizzato solo quando necessario. Posizioni: posizione standard, posizione del mouse sopra e posizione attiva "in esecuzione". Quando il pulsante è in posizione di lavoro, l'effetto mouseover è disabilitato.

Il modulo di feedback ha due disposizioni: nascosto e divulgato. Una volta caricato, la sua posizione è impostata su nascosta dallo standard. Ma quando l'utente fa clic sul titolo, viene espanso tramite jQuery. Ciò viene implementato attraverso il monitoraggio e l'attivazione degli eventi animazione semplice come puoi chiaramente vedere qui sotto.

: script.js - Parte 1

$ (documento) .ready (funzione () (

// L'URL relativo dello script submit.php.
// Probabilmente dovrai cambiarlo.
var submitURL = "submit.php";

// Memorizzazione nella cache dell'oggetto feedback:
var feedback = $ ("# feedback");

$ ("# feedback h6"). clic (funzione () (

// Stiamo memorizzando i valori dell'animazione
// proprietà in un oggetto separato:

Var el = $ (questo) .find (". Freccia");

If (el.hasClass ("down")) (
anima = (
mb: -270,
punto: 10
};
}

// La prima animazione sposta il modulo in alto o in basso, e il il secondo
// sposta l'intestazione "Feedback", in modo che si adatti alla versione ridotta a icona

Feedback.stop().Animate ((marginBottom: anim.mb));

Feedback.find (". Sezione"). Stop (). Animate ((paddingTop: anim.pt), function () (
el.toggleClass ("giù su");
});
});
Per mantenere pulito il nostro codice, abbiamo spostato le posizioni if ​​nella parte superiore del documento e creato un oggetto anim che contiene i valori dell'animazione. A seconda che ci sia una classe "giù" sulla freccia, nascondiamo o riveliamo il modulo.

La seconda parte di script.js contiene la struttura per l'interazione AJAX con submit.php.

: script.js - Parte 2

$ ("# feedback a.submit"). live ("click", function() (
pulsante var = $ (questo);
var textarea = feedback.find ("textarea");

// Usiamo la classe operaia non solo per lo stile del pulsante di invio,
// ma anche come una sorta di "blocco" per evitare invii multipli.

If (button.hasClass ("funzionante") || textarea.val().Length return false;
}

// Blocco del modulo e modifica dello stile del pulsante:
button.addClass ("funzionante");

$ .ajax ((
URL: submitURL,
digita: "posta",
dati: (messaggio: textarea.val ()),
completo: funzione (xhr) (

Var text = xhr.responseText;

// Questo aiuterà gli utenti a risolvere i problemi del loro modulo:
if (xhr.status == 404) (
text = "Il tuo percorso per submit.php non è corretto.";
}

// Nascondendo il pulsante e l'area di testo, dopodiché
// mostriamo la risposta ricevuta da submit.php

Button.fadeOut ();

Textarea.fadeOut (funzione () (
var span = $ (" ",{
nomeclasse: "risposta",
html: testo
})
.nascondere ()
.appendTo (feedback.find (". sezione"))
.mostrare ();
)).val ("");
}
});

Restituire falso;
});
});
Qui stiamo usando il metodo AJAX livello inferiore jQuery - $ .ajax (), attraverso il quale viene implementata l'interazione con submit.php. Questo metodo ci offre un po' più di controllo sulla connessione rispetto a $ .get() o $ .post().

Uno grande vantaggio questo metodo consiste in un messaggio di ritorno "completo". Qui definiamo una corrispondenza tra la risposta e l'errore 404, che dice educatamente all'utente di controllare il percorso dell'URL di invio.

Ora andiamo avanti e passiamo alla parte finale del tutorial - la sezione PHP

PHP

PHP contiene le informazioni passate attraverso AJAX, le elabora e invia un messaggio alla tua casella di posta.

: invia.php

// Inserisci il tuo indirizzo email qui sotto
$ indirizzo email = " [e-mail protetta]";

// Utilizzo della sessione per prevenire il flooding:

nome_sessione ("QuickFeedback");
inizio_sessione ();

// Se l'ultimo modulo inviato è stato inviato meno di 10 secondi fa,
// o l'utente ha già inviato 10 messaggi nell'ultima ora

if ($ _ SESSION ["lastSubmit"] && (time () - $ _SESSION ["lastSubmit"] 10)) (
die ("Attendere qualche minuto prima di inviare di nuovo.");
}

$ _SESSION ["lastSubmit"] = ora ();
$ _SESSION ["inviaUltimaOra"] ++;

richiedono "phpmailer / class.phpmailer.php";

if (ini_get ("magic_quotes_gpc")) (
// Se le virgolette magiche sono abilitate, eliminale
$ _POST ["messaggio"] = stripslashes ($ _ POST ["messaggio"]);
}

if (mb_strlen ($ _ POST ["message"], "utf-8") die ("Il testo del tuo feedback è troppo corto.");
}

$ msg = nl2br (strip_tags ($ _ POST ["messaggio"]));

// Utilizzo della classe PHPMailer

$ mail = nuovo PHPMailer ();
$ mail-> IsMail ();

// Aggiunta dell'indirizzo e-mail di ricezione
$ mail-> AddAddress ($ emailAddress);

$ mail-> Oggetto = "Invio nuovo modulo di feedback rapido";
$ mail-> MsgHTML ($ msg);

$ mail-> AddReplyTo (" [e-mail protetta]". $ _ SERVER [" HTTP_HOST "]," Modulo di feedback rapido ");
$ mail-> SetFrom (" [e-mail protetta]". $ _ SERVER [" HTTP_HOST "]," Modulo di feedback rapido ");

echo "Grazie!";
Per prima cosa utilizzeremo i controlli Sessioni PHP per calcolare quante volte l'utente ha utilizzato il modulo nell'ultima ora. Se l'utente tenta di inviare un messaggio meno di 10 secondi dopo che è stato inviato ultimo messaggio o invia più di 10 messaggi entro un'ora, gli verrà visualizzato un errore.

I messaggi vengono inviati utilizzando la classe PHPMailer. Funziona solo con PHP5, quindi il server deve supportare questa particolare versione.

Per configurare la posta in uscita vengono utilizzati diversi metodi PHPMailer. Usiamo IsMail() per dire alla classe di usare la funzione interna PHP mail(). AddAddress() aggiunge i destinatari (è possibile aggiungere più di un destinatario lì). Dopo aver aggiunto l'oggetto al corpo del documento, indichiamo l'indirizzo di risposta e inviamo il messaggio.

Questo conclude lo sviluppo!

Insomma

Puoi usare questa forma per raccogliere feedback dai visitatori. Con questo modulo, faciliti notevolmente il processo di scrittura di recensioni per gli utenti e molti utenti semplicemente non scriveranno una recensione se per questo hai ancora bisogno di fare clic da qualche parte e andare da qualche parte. Puoi anche personalizzare facilmente il modulo a tuo piacimento o da un modello di sito web.

Per lo sviluppo di un progetto web è molto importante ricevere feedback dai visitatori. Sfortunatamente, su molti siti Web, la possibilità di inviare un messaggio agli sviluppatori non è fornita affatto o è associata a difficoltà piuttosto serie.

Oggi faremo una semplice soluzione a questo problema. Utilizzando jQuery, PHP e la classe PHPMailer, il modulo invia il suggerimento dell'utente direttamente alla tua casella di posta.

HTML

Iniziamo con il markup HTML. Gli stili sono inclusi nella parte superiore del documento e File JavaScript- in fondo. Ciò ottimizza il processo di caricamento della pagina, in modo che gli script vengano caricati per ultimi, consentendo all'utente di vedere il contenuto della pagina.

demo.html

Dentro corpo situato div #risposta... È posizionato in basso a destra della finestra utilizzando il posizionamento fisso, come vedrai nella sezione CSS del tutorial.

All'interno di questo div vengono posizionati cinque elementi colorati span... Ciascuno è largo 20% e spostato a sinistra. Pertanto, si adattano esattamente all'intera larghezza. div #risposta.

Poi arriva il contenitore .sezione, che contiene un titolo, un'area di testo e un pulsante.

CSS

Passiamo all'impostazione degli stili per il form. Innanzitutto, diciamo alcune parole su in cosa consiste la struttura di un foglio di stile. Se guardi le definizioni CSS di seguito, noterai che ogni regola inizia con #risposta... Questo crea una somiglianza con lo spazio dei nomi in CSS, rendendo facile aggiungere codice a un sito Web esistente senza conflitti.

stili.css - Parte 1

#feedback (colore di sfondo: # 9db09f; larghezza: 310 px; altezza: 330 px; posizione: fissa; fondo: 0; destra: 120 px; margine inferiore: -270 px; z-index: 10000;) #feedback .section (sfondo : url ("img / bg.png") repeat-x in alto a sinistra; border: 1px solid # 808f81; border-bottom: nessuno; padding: 10px 25px 25px;) #feedback .color (float: a sinistra; altezza: 4px; larghezza: 20%; overflow: nascosto;) #feedback .color-1 (colore-sfondo: # d3b112;) #feedback .color-2 (colore-sfondo: # 12b6d3;) #feedback .color-3 (colore-sfondo : # 8fd317;) #feedback .color-4 (background-color: # ca57df;) #feedback .color-5 (background-color: # 8ecbe7;) #feedback h6 (background: url ("img / feedback.png" ) no-repeat; altezza: 38px; margine: 5px 0 12px; rientro del testo: -99999px; cursore: puntatore;) #feedback textarea (colore di sfondo: #fff; bordo: nessuno; colore: #666666; font: 13px "Lucida Sans", Arial, sans-serif; altezza: 100px; imbottitura: 10px; larghezza: 236px; ridimensionamento: nessuno; contorno: nessuno; overflow: auto; -moz-box-shadow: 4px 4px 0 # 8a9b8c; -webkit -box-sha dow: 4px 4px 0 # 8a9b8c; box-shadow: 4px 4px 0 # 8a9b8c; )

Il primo elemento da acconciare è div #risposta... Viene assegnata una posizione fissa e si aggancia alla finestra del browser. Dopo viene la definizione per div .sezione e cinque elementi colorati span... Questi elementi differiscono solo per il colore di sfondo, che viene assegnato separatamente per ogni classe.

Nella parte inferiore della parte presentata del file CSS, sono definite le regole per la visualizzazione di una regione di testo.

stili.css - Parte 2

#feedback a.submit (background: url ("img / submit.png") no-repeat; border: nessuno; display: block; height: 34px; margin: 20px auto 0; text-decoration: nessuno; text-indent: -99999px; larghezza: 91px;) #feedback a.submit: hover (posizione sfondo: in basso a sinistra;) #feedback a.submit.working (posizione sfondo: in alto a destra! Importante; cursore: default;) #feedback .message (font-family: Corbel, Arial, sans-serif; color: # 5a665b; text-shadow: 1px 1px 0 # b3c2b5; margin-bottom: 20px;) #feedback .arrow (sfondo: url ("img / arrows.png ") no-repeat; float: right; width: 23px; height: 18px; position: relative; top: 10px;) #feedback .arrow.down (posizione-sfondo: left top;) #feedback h6: hover .down ( background-position: in basso a sinistra;) #feedback .arrow.up (background-position: a destra in alto;) #feedback h6: hover .up (background-position: in basso a destra;) #feedback .response (font-size: 21px; margin-top: 70px; text-align: center; text-shadow: 2px 2px 0 # 889889; color: #FCFCFC; display: block;)

La seconda parte del foglio di stile definisce l'aspetto del pulsante di invio. Nota che ci sono tre stati del pulsante, le cui immagini sono contenute in un file per immagine di sfondo - invia.png... Vengono visualizzati solo quando necessario.

jQuery

Il modulo di feedback ha due stati: minimo e massimo. All'avvio, l'impostazione predefinita è lo stato ridotto a icona in basso a destra dello schermo. E jQuery spinge il modulo al suo stato massimo quando l'utente fa clic sull'intestazione. Questa funzione viene eseguito associando un evento ed eseguendo semplici animazioni.

script.js - Parte 1

$ (document) .ready (function () (// L'URL relativo dello script submit.php. // Probabilmente devi cambiarlo.var submitURL = "submit.php"; // Memorizzazione nella cache dell'oggetto feedback: var feedback = $ ("#feedback"); $ ("# feedback h6"). click (function () (// I valori delle proprietà di animazione sono memorizzati // in un oggetto separato: var anim = (mb: 0, // Campo inferiore pt: 25 // Rientro superiore); var el = $ (this) .find (". Arrow"); if (el.hasClass ("down")) (anim = (mb: -270, pt: 10 );) // La prima animazione sposta il form in alto o in basso e la seconda sposta il titolo // in modo che si allinei con la versione ridotta feedback.stop().animate ((marginBottom: anim.mb)); feedback.find (".sezione"). stop() .animate ((paddingTop: anim.pt), function() (el.toggleClass ("down up");));));

Per mantenere il codice semplice e diretto, in alto viene creato un oggetto anim, che contiene i valori per l'animazione, e viene posizionato l'operatore Se... A seconda dell'esistenza della classe ' giù 'Sulla freccia, stiamo espandendo o comprimendo il modulo.

Seconda parte script.js gestisce il lavoro con AJAX con invia.php.

script.js - Parte 2

$ ("# feedback a.submit"). live ("click", function () (var button = $ (this); var textarea = feedback.find ("textarea"); // Stiamo usando la classe di lavoro per più della semplice impostazione degli stili per il pulsante di invio, // ma anche come una sorta di blocco per impedire generazioni multiple di moduli.if (button.hasClass ("funzionante") || textarea.val ().< 5){ return false; } // Запираем форму и изменяем стиль кнопки: button.addClass("working"); $.ajax({ url: submitURL, type: "post", data: { message: textarea.val()}, complete: function(xhr){ var text = xhr.responseText; // Questa operazione aiuta l'utente a identificare l'errore: if (xhr.status == 404) (text = "Il percorso dello script submit.php non è valido.";) // Nasconde il pulsante e l'area di testo, dopodiché // noi ha mostrato la risposta ricevuta dal pulsante submit.php .fadeOut (); textarea.fadeOut (funzione () (var span = $ (" ", (className:" response ", html: text)) .hide () .appendTo (feedback.find (. section ")) .show ();)). val (" ");))); return falso;));));

Stiamo usando il metodo jQuery per AJAX $ .ajax () con cui interagire invia.php... Questo metodo offre un po' più di controllo sulla connessione rispetto a $ .ottenere () e $ .posta ().

Uno dei vantaggi del metodo è la visibilità delle proprietà dell'oggetto nell'"intera" funzione di callback. Qui controlliamo lo stato della risposta per la conformità Errore 404 (pagina non trovata) e visualizzare un messaggio all'utente chiedendogli di controllare il percorso inviaURL.

Ora è il momento di passare alla parte finale: PHP.

PHP

PHP elabora i dati inviati da AJAX, li convalida e li invia messaggio email all'indirizzo indicato.

invia.php

// Inserisci qui il tuo indirizzo $ emailAddress = " [e-mail protetta]"; // Usa la sessione per prevenire il flooding: session_name (" quickFeedback "); session_start (); // Se l'ultimo modulo è stato inviato meno di 10 secondi fa, // o l'utente ha già inviato 10 messaggi nell'ultima ora se ($ _ SESSIONE [ "lastSubmit"] && (time () - $ _SESSION ["lastSubmit"]< 10 || $_SESSION["submitsLastHour"] >10)) (die ("Attendere qualche minuto prima di inviare nuovamente il messaggio.");) $ _SESSION ["lastSubmit"] = time (); $ _SESSION ["inviaUltimaOra"] ++; richiedono "phpmailer / class.phpmailer.php"; if (ini_get ("magic_quotes_gpc")) ($ _POST ["message"] = stripslashes ($ _ POST ["message"]);) if (mb_strlen ($ _ POST ["message"], "utf-8")< 5){ die("Ваше сообщение слишком короткое."); } $msg = nl2br(strip_tags($_POST["message"])); // Используем класс PHPMailer $mail = new PHPMailer(); $mail->IsMail (); // Aggiungi l'indirizzo del destinatario $ mail-> AddAddress ($ emailAddress); $ mail-> Oggetto = "Nuova lettera dal modulo di feedback"; $ mail-> MsgHTML ($ msg); $ mail-> AddReplyTo (" [e-mail protetta]". $ _ SERVER [" HTTP_HOST "]," Modulo di feedback sulla pagina demo "); $ mail-> SetFrom (" [e-mail protetta]". $ _ SERVER [" HTTP_HOST "]," Modulo di feedback nella pagina demo "); $ mail-> Invia (); echo" Grazie! ";

Usiamo prima la gestione della sessione per determinare la frequenza con cui l'utente utilizza l'invio del modulo durante ultima ora, e determinare anche il tempo trascorso da ultima spedizione... Se sono trascorsi meno di 10 secondi dall'ultimo invio o se l'utente ha già inviato più di 10 messaggi nell'ultima ora, viene visualizzato un messaggio di errore.

La posta elettronica viene inviata utilizzando la classe PHPMailer. Attenzione! Funziona solo con PHP5.

Metodi multipli PHPMailer utilizzato per la configurazione e-mail in uscita... Metodo IsMail () dice alla classe di usare l'internal Funzione PHP posta ()... Metodo Aggiungi indirizzo () aggiunge l'indirizzo del destinatario (è possibile aggiungere più di un destinatario con chiamate aggiuntive a questo metodo). Dopo aver aggiunto l'oggetto della lettera e il testo, viene indicato l'indirizzo per le risposte e il messaggio viene inviato.

Pronto!

Conclusione

Puoi utilizzare questo modulo per organizzare un rapido feedback dal visitatore del tuo sito web. Barriera molto bassa prima dell'invio - devi solo compilare il campo di testo e premere il pulsante - si creerà ottime condizioni in modo che i visitatori delle tue pagine inizino a condividere le loro idee. Lo script è anche ben strutturato e facile da configurare, il che ti aiuterà con sforzo minimo usalo sul tuo sito