In questa lezione, faremo conoscere la funzione posta (), sull'esempio di creazione forme di feedback su PHP Con i successivi dati di invio per la posta.
Per fare ciò, crea due file - forma.php. e mail.php.. Nel primo file ci sarà solo un modulo con i campi per l'inserimento dell'utente. Tag interno modulo - Button. "E-mail" E attributo. azione.che si riferisce al gestore - mail.php., È che i dati del modulo vengono visualizzati quando si preme il pulsante "E-mail". Nel nostro esempio, queste forme vengono inviate a una pagina web intitolata "/Mail.php". Questa pagina ha registrato lo script su PHP.che elabora i dati del modulo:
Quindi la forma guarda visivamente nel browser.
Prossimo codice di scrittura per il file mail.php.. Inventare te stesso nomi per le variabili. NEL PHP. La variabile inizia con un segno $ E poi il nome della variabile. Il valore del testo della variabile è citazioni. Utilizzando le variabili su un'e-mail di amministratore, i contenuti del modulo vengono trasmessi, semplicemente sostituire il nome dell'elemento del modulo in staffe quadre - valore nome..
$ a \u003d " [Email protetto]"; // e-mail del destinatario dei dati dal modulo
$ Tema \u003d "modulo di feedback su php"; // tema del eamel ricevuto
$ MESSAGE \u003d "Il tuo nome:" $ _ Posta ["nome"]. "
"; // Assegna un valore variabile ottenuto dal nome \u003d modulo nome
$ Messaggio. \u003d "E-mail:". $ _ Posta ["Email"]. "
"; // ottenuto dal nome del modulo \u003d e-mail
$ Messaggio. \u003d "Numero di telefono:" $ _ Posta ["Telefono"]. "
"; // ricevuto dal nome \u003d modulo telefonico
$ Messaggio. \u003d "Messaggio:". $ _ Posta ["Messaggio"]. "
"; // ricevuto dal nome \u003d modulo del messaggio
$ Intestazioni \u003d "MIME-versione: 1.0". "\\ r \\ n"; // titolo corrisponde al formato più un simbolo di traduzione stringa
$ Intestazioni. \u003d "Tipo di contenuto: testo / html; charset \u003d utf-8". "\\ r \\ n"; // indica il tipo di contenuto inviato
Posta ($ a, $ tema, $ messaggio, $ intestazioni); // invia valori variabili al destinatario sull'e-mail
?>
Quindi, i dati dall'array $ _Post. sarà trasferito alle variabili corrispondenti e inviate alla posta utilizzando la funzione mail. Completiamo la nostra forma e fai clic sul pulsante Invia. Non dimenticare di specificare la tua e-mail. La lettera è arrivata all'istante.
Ciao amici! In questa lezione parleremo creazione di modulo di feedback, o come ancora parlare nella gente "Modulo di Contatto".
Oggi analizzeremo con te come puoi creare in pochi minuti. leggero, bellissimo e funzionale La forma di feedback con il mio plugin preferito Modulo di contatto 7. .
Proverò a spiegare tutte le fasi di installazione del modulo di contatto il più possibile, e in connessione con questa lezione sarà sufficientemente lunga 🙂
Creazione di un modulo di contatto in WordPress
All'inizio voglio notare che il modulo di contatto del plugin 7 è russificato e non avrai problemi con esso. Come prova delle mie parole può agire il fatto che questo plugin è stato scaricato Più di 25 milioni di volte !!!
E così, iniziamo. Per creare un modulo di feedback bisogno di fare quanto segue:
1. Installare e attivare il plugin del modulo di contatto 7. Come installare i plug-in che puoi.
2. Dopo l'attivazione, vai a Modulo di contatto 7 -\u003e Forme.
3. Nella finestra che si apre Copia la linea Con il codice di inserimento.
4. Copia codice inserto in quella pagina su cui vogliamo aggiungere un modulo di feedback. Dopo aver inserito il codice, non dimenticare di salvare le modifiche premendo il pulsante. "Aggiornare".
Ecco come risultato Aggiungi software del modulo di contatto Avremo:
Pronto! Hai installato forma di lavoro Feedback sul tuo sito!
Come puoi vedere, totale tra pochi minuti È possibile installare facilmente il modulo di feedback sul sito. Su questo puoi mettere un punto, ma quelli che non si adattano al modulo standard e chi vuole creare Completamente nuovo forma di contatto con altri campi e opportunità - raccomandare Leggi la lezione fino alla fine.
Per creare un nuovo modulo, devi prima decidere quali campi sono necessari. In questa lezione, ad esempio, creeremo un semplice modulo di ordine di chiamata di ritorno.
Per fare ciò, abbiamo bisogno nella forma di tali campi per il riempimento:
- Nome (riempimento del campo richiesto)
- Cognome
- Telefono (campo di riempimento obbligatorio)
- Campo con una scelta di tempo conveniente per chiamare
Dopo aver deciso i campi, vai alla creazione della forma:
1. Vai a B. Modulo di contatto 7 -\u003e Aggiungi uno nuovo.
2. Nella finestra a cui si apre, fai clic sul pulsante "Aggiungere nuova". Se necessario, selezionare la lingua nell'elenco a discesa di seguito. Di la lingua predefinita sarà russa.
3. Dopo aver premuto il pulsante, andrà alla pagina su cui c'è formatore.
Nella parte migliore, il campo in cui scriviamo nome nuova forma. NEL Forme del modello Vediamo campi moduli standard creati per impostazione predefinita.
Di seguito vediamo le impostazioni della lettera che arriva alla tua posta dopo che qualcuno ha inviato un ordine dal modulo sul sito. In queste impostazioni, ad esempio, è possibile modificare o aggiungere un'e-mail a cui le richieste saranno ricevute dal modulo sul tuo sito. NEL modello di lettera Le informazioni sono configurate per essere visualizzate all'interno della lettera.
4. Dopo che abbiamo familiarizzato da surficamente con la struttura dell'editor, vai alla creazione della nostra nuova forma. Per questo abbiamo bisogno Elimina Dal modello di forma tutte le linee tranne il pulsante "Spedire",e nel modello della lettera elimina Tutto completamente . Dopo la rimozione, dovresti lavorare in questo modo:
5. Ora dobbiamo creare nuovi campi: Nome (obbligatorio), Cognome, Telefono(obbligatorio), Tempo di chiamata conveniente.
Inizia con la creazione del campo per inserire il nomeche deve essere obbligatorio per il riempimento. Per fare ciò, premere il pulsante "Genera tag"e scegliere Campo di testo.
Nelle impostazioni del nuovo campo, abbiamo messo un segno di spunta, che è necessario solo se il campo deve essere obbligatorio per il riempimento. Quindi, copia il codice generato nel modello di forma sulla destra e il seguente codice copia il modello della lettera. Commenti e frecce per una migliore comprensione, vedere l'immagine qui sotto.
6. Dopo aver aggiunto un campo per inserire il nome, fai clic su "Genera Tag" -\u003e Campo di testo E per analogia, crea un campo Cognome e Telefono, Copia e inserimento del codice nel modello di forma e il modello della lettera. L'unica differenza è quella per il campo Cognomenon è necessario mettere un segno di spunta per il riempimento obbligatorio .
Dopo aver aggiunto i campi, il nome, il cognome e l'editor di telefono del modulo sarà simile a questo:
7. Ora crea un campo Tempo di chiamata conveniente. Per fare questo, fai clic su "Genera tag" e scegliere "Menu a discesa".
Nel campo Scelta Scriviamo in una linea una per un'opzione, nel nostro caso è tempo dalle 8-00 alle 18-00 con intervalli di due ore. Dopo il riempimento, copiare le linee di codice corrispondenti nel modello di forma e il modello della lettera.
Di conseguenza, dovresti essere così:
9. Copia il codice di codice e incollalo sulla pagina in cui hai bisogno di un modulo. Se hai fatto tutto bene, dovresti avere questo modulo di ordine di chiamata inverso:
Dopo che l'utente effettua la chiamata di chiamata dal tuo sito, un'e-mail verrà alla tua posta Con questo riempimento:
Pronto!Qui abbiamo creato con te modulo dell'ordine di chiamata di ritorno da zero.
Accetto che per alcuni tutto possa sembrare molto difficile e spaventoso, ma una tale sensazione sarà solo fino alla prima creazione del modulo di contatto da zero 😉
Nella maggior parte dei casi, il modulo di feedback standard è abbastanza, che viene creato dal plugin predefinito immediatamente dopo l'installazione e l'attivazione.
Spero che questa lezione sia stata utile per te, e hai affrontato il modulo di contatto del plugin 7.
Se hai nel corso della creazione di domande di forma o qualcosa non sarà ottenuto - scrivi e fai domande nei commenti.
E ricordati modulo di feedback sul sito - Attributo obbligatorio sulla pagina di contatto.
Ciao amici! In questa lezione, parleremo di creare un modulo di feedback o come comunque parli la gente del "modulo di contatto". Oggi ti occuperemo con te come puoi creare alcuni minuti con un modulo di feedback leggero, bello e funzionale utilizzando il mio modulo di contatto preferito 7 plugin. Proverò a spiegare nel massimo dettagliatamente tutti i passaggi di installazione del modulo di contatto e in Connessione con questa lezione si rivelerà abbastanza a lungo :) Creare un modulo di contatto in WordPress All'inizio Voglio notare che il modulo di contatto del plugin 7 è russificato e non avrai problemi con esso. Come prova delle mie parole può agire il fatto che questo plugin ...
Panoramica
Vota per lezione
100
Valutazione
Risultato: Cari lettori! Non essere pigro per votare e lasciare un commento. Quindi, posso capire l'utilità delle lezioni e degli articoli e migliorare la loro qualità in futuro. Grazie in anticipo!
Uno dei compiti più comuni nella pratica è implementare la forma di feedback. Tobash Scrivere il suo codice HTML, progettandolo su CSS, creando uno script PHP che gestirebbe i dati ricevuti dall'utente e li ha inviati alla nostra posta, scrivando uno script JS che controllerebbe il modulo per immettere adeguatamente i dati di input, la protezione di L'adeguatezza della nostra spam per garantire che la nostra cassetta postale non cadasse da attacchi di robot.
Tutti i momenti di cui sopra saranno considerati nella nostra recensione e commentati in dettaglio.
Quindi, iniziamo a creare un modulo di feedback:
Html.
Prima di tutto, scriviamo il codice HTML, è impostato su campi che riempiranno l'utente. Continueranno a essere rilasciati. Il codice di codice è simile a questo:
< 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= "Spedire" />
E visivamente sembra questo:
Sono d'accordo, mentre tutto è brutto e niente è chiaro, ma abbiamo appena iniziato.
Considera il dettaglio del codice sopra:
< form method= "post" action= "mail.php" > …
Per creare un modulo, è necessario utilizzare il tag del modulo. È colui che determina l'inizio e la fine della forma per l'interprete del codice. Lui, come qualsiasi tag, ha un intero set di attributi, ma le forme obbligatorie costituiscono solo due, questo è un metodo (metodo di invio di una richiesta al server, per moduli utilizzare post) e l'azione (indica il percorso verso la maneggiamento del modulo Il file, in particolare in questo file conterrà uno script PHP, che invierà alla posta inserita dall'utente, nel nostro caso, vediamo che questo file è chiamato mail.php e si trova nella stessa directory del sito della pagina in questione ).< input maxlength= "30" type= "text" name= "name" />
Successivamente, seguiamo l'invece. Questo è il modulo di forma effettivo in cui gli utenti inseriranno le informazioni necessarie (tipo \u003d "testo" dice che sarà il testo). L'attributo MAXLength indica quanti caratteri possono inserire l'utente in questo modulo di campo. L'attributo più importante è il nome - Specifica il nome di un particolare campo. È su questi nomi in futuro lo script PHP elaborerà le informazioni in entrata in esso. Se lo desideri, è comunque possibile impostare l'attributo segnaposto, che visualizza il testo all'interno del campo scomparendo quando si installa il cursore al suo interno. Uno dei problemi di Playsholder è che non è supportato da alcuni vecchi browser.< label for = "name" > Nome:
Usato se abbiamo rifiutato segnaposto. La firma del campo usuale, l'attributo del modulo segnala ciò che specificamente il campo include questa firma. Il valore del campo di interesse per noi è indicato dal nome.< textarea rows= "7" cols= "50" name= "message" >
Inoltre, poiché l'ingresso è destinato ad essere somministrato dalle informazioni dell'utente, solo questa volta il campo viene affilato per i messaggi lunghi. Le righe specificano la dimensione del campo in stringhe, cols in caratteri. In generale, impostano l'altezza e la larghezza del nostro campo.< input type= "submit" value= "Spedire" />
Il fatto che questo è un pulsante per l'invio di un modulo ci dice tipo \u003d "Invia" e il valore imposta il testo che sarà all'interno di questo pulsante.< div class = "right" >
Utilizzato solo per ulteriore modulo di progettazione visiva.
CSS.
Affinché il nostro modulo di feedback sembri presentabile, deve essere rilasciato. Per ottenere il seguente risultato:
Abbiamo usato questo codice:
forma (sfondo: # F4F5F7; imbottitura: 20px;) modulo. A sinistra, forma. Destra (display: blocco in linea; verticale- allinea: superiore; larghezza: 458px;) modulo. Destra (imbottitura-sinistra: 20px;) etichetta (display: blocco; font- Dimensione: 18px; Text- Align: Center; Margine: 10 px 0px 0px 0px;) Ingresso, Textarea (Bordo: 1 PX Solido # 82858D; Imbottitura: 10 px; Carattere: 16 px; larghezza: 436px;) Textarea (altezza: 98px; margine inferiore: 32px;) Ingresso [tipo \u003d "Invia"] (Larghezza: 200px; galleggiante: destra; Bordo: nessuno; Sfondo: # 595B5F; Colore: #FFF; Testo- Trasforma: maiuscolo;)
In dettaglio per dipingere CSS non vedo il punto, attirerò la tua attenzione solo sui punti chiave:
- Non scrivere la registrazione per ogni tag nel modulo. Prova a costruire i tuoi selettori in modo che un paio di linee di codice faccia tutti gli articoli di cui hai bisogno.
- Non usare linee e creazione di rientri, tag extra per tipo < br>, < p> E così via, con queste attività, CSS sta affrontando perfettamente la proprietà del display: blocco e margine con imbottitura. Maggiori informazioni sul perché non usare < br> Nel layout puoi leggere nell'articolo TAG BR, ed è necessario? .
- Non utilizzare il layout della tabella per i moduli. Questo contraddice la semantica di questo tag e i motori di ricerca amano il codice semantico. Per formare una struttura del documento visivo, abbiamo abbastanza tag div e le proprietà del display impostate da esso in CSS: blocco in linea (Build Blocks in una riga) e allineati verticale: in alto (non consente loro di correre intorno al Schermo), chiediamo loro l'altezza e voilà necessaria, niente di superfluo e tutto è situato come abbiamo bisogno.
Per coloro che vogliono risparmiare tempo sul design del sito, posso consigliare utilizzando i framework CSS durante la creazione di siti, in particolare l'auto-scritto. La mia scelta in questo piano è Twitter Bootstrap. La lezione sulla progettazione di forme con il suo uso può essere vista.
PHP.
Bene, è il momento di fare il nostro modulo lavorabile.
Andiamo nella nostra directory principale del sito e creiamo un file mail.php lì, a cui abbiamo indicato in precedenza il percorso nell'attributo del modulo del tag del modulo.
In definitiva, il suo codice sarà simile a questo:
Il suo numero: "$ telefono".
La sua posta: "$ mail. "
Il suo messaggio: ". $ Messaggio,); Eco. "Il tuo messaggio è stato inviato con successo!
Riceverai la risposta presto
$ indietro "; Uscita; ) Altro (eco, uscita;)?\u003e
La discussione delle parti HTML e CSS di questo documento può essere saltata. In sostanza, questa è la solita pagina del sito che puoi organizzare a vostra richiesta e necessità. Considera la parte più importante dello script di elaborazione del modulo PHP:
$ indietro \u003d "
\\ "JavaScript: cronologia.back () \\"\u003e Torna indietro
" ;Creiamo un collegamento per questa stringa per tornare alla pagina precedente. Come non conosciamo in anticipo quale pagina l'utente cadrà su questo, è fatto con una piccola funzione JS. In futuro, faremo semplicemente riferimento a questa variabile per ritirarlo nei luoghi di cui abbiamo bisogno.
se (! vuoto ($ _post ["nome"]) e! vuoto ($ _post ["telefono"]) e! vuoto ($ _post ["mail"]) e! vuoto ($ _post ["messaggio"])) ( // parte entrobordo del gestore ) Altrimenti (eco "Per inviare un messaggio riempire tutti i campi! $ Indietro"; Uscita; )
Qui viviamo il controllo della forma sulla pienezza dei campi. Come hai indovinato, in termini di $ _post ["nome"] nelle citazioni, scriviamo il valore dell'attributo del nome del nostro incontro.
Se tutti i campi vengono riempiti, lo script inizierà l'elaborazione dei dati nella sua parte interna, ma se almeno un campo non è stato riempito, il messaggio verrà visualizzato con la richiesta per riempire tutti i campi del modulo Echo "per inviare un messaggio di riempimento Tutti i campi! $ Indietro "e riferimento per tornare alla pagina precedente, che abbiamo creato la prima stringa.
Dale inserire all'interno del gestore del modulo:
$ NAME \u003d Trim (Strip_tags ($ _Post ["Nome"])); $ Phone \u003d Trim (Strip_tags ($ _Post ["Telefono"])); $ Mail \u003d Trim (Strip_tags ($ _Post ["Mail"])); $ MESSAGE \u003d Trim (Strip_tags ($ _post ["Messaggio"]));
Pertanto, abbiamo ripulito i dati inseriti dall'utente dai tag HTML e dalle lacune non necessarie. Questo ci consente di proteggerti dall'ottenere un codice dannoso nei messaggi inviati a noi.
I controlli possono essere complicati, ma è già a vostra richiesta. La protezione minima sul lato server che abbiamo già impostato. Inoltre faremo sul lato client utilizzando JS.
Non è consigliabile rifiutare completamente di proteggere il modulo sul lato server a favore di JS, perché sebbene sia estremamente raro, ma gli unici sono trovati con il JS disconnesso nel browser.
Dopo aver pulito i tag, aggiungi invio di un messaggio:
posta "[email protected]",
"Lettera con indirizzo_iesight""Ti ho scritto:". $ NOME. "
Il suo numero: "$ telefono".
La sua posta: "$ mail. "
Il suo messaggio: ". $ Messaggio, "Content-Type: Text / HTML; charset \u003d windows-1251")
;
È questa linea ed è impegnata nella formazione e inviando un messaggio a noi. È riempito come segue:
- "[email protected]" - qui tra le citazioni Inserisci la tua posta
- "Lettera con l'indirizzo_name" è oggetto del messaggio che verrà alla posta. Puoi scrivere qualcosa qui.
- "Hai scritto:" $ NOME. " < br /> Il suo numero: "$ telefono". < br /> La sua posta: "$ mail." < br /> Il suo messaggio: "$ messaggio - formiamo il messaggio del messaggio stesso. $ NAME - Inserire le informazioni compilate dall'utente attraverso l'appello ai campi dal passaggio precedente, nelle virgolette descrivono ciò che significa questo campo, tag < br /> Facciamo il trasferimento della linea in modo che il messaggio sia generalmente leggibile.
- Content-Type: Text / HTML; CHARSET \u003d Windows-1251 - Alla fine c'è una chiara indicazione del tipo di dati di dati trasmessi nel messaggio e nella sua codifica.
IMPORTANTE!
Codifica specificata nella "testa" del documento ( < meta http- equiv= "Content-Type" content= "Testo / HTML, charset \u003d Windows-1251" /> ), codifica dal testo del contenuto: testo / messaggi html; charset \u003d windows-1251 e in generale, la codifica del file PHP deve corrispondere altrimenti "KrakoyArbra" verrà visualizzata invece di lettere russe o inglesi.
Molti non indicano la codifica del messaggio inviato esplicitamente, ma su alcuni client di posta, a causa di ciò, potrebbero esserci problemi nel futuro (le lettere illeggibili vengono all'ufficio postale), quindi lo consiglio di indicarlo.
Verifica della forma per dati adeguati
In modo che gli utenti non ridissano nei campi per la disattenzione e compilato tutto ciò che ha bisogno correttamente per verificare i dati di input.
Questo può essere fatto sia da PHP sul lato server che sul JS sul lato client. Io uso la seconda opzione, perché così una persona può scoprire immediatamente ciò che non ha correttamente e correggere l'errore senza apportare ulteriori transizioni sulle pagine.
Inserisci codice script nello stesso file, dove abbiamo una parte HTML del modulo. Per il nostro incidente, sarà simile a questo:
< script> Funzione check-forform (modulo) (nome var \u003d modulo. Nome. Valore; VAR N \u003d Nome. Match (/ ^ [A- Zaza-yay] * [A- ZA-ZA- I] + $ /); Se (! N) (Avviso ( "Il nome è inserito in modo errato, si prega di correggere l'errore"); Restituire false; ) Var Phone \u003d Modulo. Telefono. Valore; Var p \u003d telefono. Match (/ ^ [0 - 9 +] [0 - 9 -] * [0 - 9 -] + $ /); Se (! P) (Avviso ( "Il telefono è inserito in modo errato"); Restituire false; ) VAR Mail \u003d modulo. Posta. Valore; Var m \u003d mail. Match (/ ^ [A- ZA- Z0- 9] [A- ZA- Z0- 9 \\. _-] * [A- ZA- Z0- 9 _] * @ ([A- ZA- Z0- 9] + ([A- ZA- Z0- 9 -] * [A- ZA-Z0- 9] +) * \\.) + [A- ZA-Z] + $ /); Se (! m) (Avviso ( "E-mail inserita in modo errato, si prega di correggere l'errore"); Restituire false; ) Return True; )
Bene, ora l'analisi abituale:
Per, per fare clic sul pulsante Invia, abbiamo testato Nasconderemo il lancio del nostro script sul tag del modulo:
< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >
Ora, sui punti, prendiamo la composizione della verifica:
Come puoi notare che un mini assegno è scritto per ciascuno dei nostri campi. Un'ispezione su un campo che ho assegnato in uno screenshot con un quadrato rosso, in altri campi ha una struttura simile e se è necessario aggiungere un campo o rimuoverlo, ora è possibile farlo facilmente.
Modulo di feedback per il sitoTi mostrerò, in base all'uso della tecnologia AJAX. Ma non preoccuparti, non è necessario saperlo, tutto è già pronto, dovrà solo installare questo modulo e impostare solo per te!
Ragazzi - lo script è completamente obsoleto. Qualcuno funziona, qualcuno ha no. E capisco e tanto più aggiornamento - pigrizia. Pertanto, prova a tua discrezione.
Modulo di feedback PHP con l'invio di posta
Questo form Feedback sul sito Molto funzionale in sé, diversi plug-in sono collegati ad esso, che creano un aspetto attraente e controlla la validità (correttezza delle lettura) dei dati che hai inserito. Questi plugin funzionano su Great e Mighty! E ha chiamato questo:
1. Jqtransform. - Plugin che ti permette di rendere bello il nostro modulo di feedback!
2. formValidator. - E questo plugin controlla la forma di contatti sulla correttezza delle informazioni inserite e, nel qual caso i suggerimenti pop-up vengono visualizzati!
Per il pieno lavoro di questo modulo verrà utilizzato CLASSE - PHPMAILAILER. Considerato uno dei migliori!
Nota per il più intelligente:
Il modulo di feedback per il sito può essere effettuato su HTML! Ma inizierà a lavorare solo con PHP! E in nessun modo!
Questo sono io per coloro che cercano una forma di feedback solo su HTML. Fallo, ma non funzionerà!
Pertanto, il tuo deve supportare PHP e per questa forma di contatti, PHP non dovrebbe essere inferiore alla quinta versione. Spero che sia chiaro? Inoltre, ora, qualsiasi hosting normale supporta queste condizioni!
Ho scavato questa forma di feedback sul sito www.tutorialzine.com Il link conduce direttamente alla pagina originale, I.e. Sito web dell'autore di questo modulo!
Tutto è in inglese lì, quindi abbiamo avuto un po 'di bracciante con Sasha, in Russorificare questa forma di contatti e i plugin che sono collegati ad esso.
Confesso ad essere onesti, e con questo "muffa" c'erano due giorni, dal momento che sono cominciati vari secche per emergere e la forma di comunicazione inversa incompiuta fino alla fine, più bello, non volevo stendere! Quindi se sei un amatore per fare tutto te stesso, e il pensiero si adatterà alla tua testa di luce - me stesso a Russorificare questa forma, non limiterò un paio di consigli, dal momento che semplicemente la traduzione di frasi non sarà limitata a:
1. Questa forma di feedback viene affilata sotto la borghese, da lì ed è stata scaricata, quindi ti invierà invece dei normali personaggi russi - Krakoyablla. Osservare la codifica. E in generale, tutti i "sigilli" saranno associati ad esso!
2. Inizialmente lo script di convalida non capisce le nostre lettere, quindi dovranno registrarle!
3. Anche dopo queste azioni, se si specifica il tema della scrittura in russo, la lettera viene fornita con l'argomento - nessun oggetto (spero che abbia scritto correttamente), viene considerato se si specifica la codifica nel file di classe Phpmailer.
4. Nella forma originale, il testo nei campi di input premuto in basso, e non nel mezzo. Questo è un itch jqtransform plugin.
Bene, tutto sembrava dipingere e avvertito. Andiamo oltre!
In risposta a tali domande, la prima cosa che viene in mente è "conveniente e lavoratori". E questo è generalmente logico. Dopo tutto, altrimenti, qual è il punto in presenza di una bella forma di feedback che non utilizza? Ma prima le cose principali.
Molte forme - un obiettivo
Iniziamo con perché hai bisogno di moduli di feedback sul sito? Il proprietario del sito dovrebbe essere in grado di contattare i visitatori al suo sito. Le persone cercano di risparmiare tempo per trovare informazioni sui prodotti giusti, chiarire le loro qualità e caratteristiche, i prezzi e l'ordinamento adatto. Forme di feedback: un canale importante attraverso la quale la comunicazione tra il visitatore del sito e il suo proprietario, il venditore e l'acquirente si verifica. Se questo canale di comunicazione non funziona o risulta essere scomodo per un visitatore, può rifiutarsi di ricorrere a te, e quindi, dall'idea di diventare il tuo vero cliente.
Come utilizzare regolarmente e attivamente i moduli di feedback sul tuo sito parleranno del tuo sito senza peggiore delle visite di analisi.
Da qui implica logicamente la conclusione che è già stata espressa sopra - le forme di feedback devono essere convenienti e devono funzionare!
Vale la pena notare che la seconda parte di questa uscita dipende non solo dalla correttezza della programmazione. Dal lato tecnico, il modulo può funzionare perfettamente, ma l'operatore deve rispondere rapidamenteproveniente dal sito. Altrimenti, i moduli di feedback saranno inutili. Se l'operatore torna al visitatore in due giorni, la necessità di ordinare un prodotto o un servizio in una persona può semplicemente scomparire.
Le forme di feedback possono essere un grande set ("ordinare un callback", "Fai una domanda", "Lascia una recensione", "Compila il modulo d'ordine", "Contatta la testa", ecc.), E possono essere utilizzato per diversi compiti. Ma l'obiettivo di tutti sarà essenzialmente solo - per garantire la connessione del visitatore del sito e del suo amministratore o del proprietario, ottenere i contatti dei visitatori per interagire ulteriormente con esso.
Nota di sette punte
Ricordando alcune semplici regole che devono essere prese in considerazione durante lo sviluppo e il posizionamento di FOS sul sito.
La forma dovrebbe essere posizionata in modo che il visitatore sia conveniente per trovarlo.
Posiziona il modulo in un luogo di rilievo - ai visitatori del tuo sito non deve fare sforzi per trovare la forma di modulo di feedback tra molti elementi diversi sulla pagina o strofinare infinitamente la pagina verso il basso.
Tradizionalmente, gli stampi possono essere inseriti nell'intestazione del sito Web o nella pagina dei contatti.
Puoi, se necessario, i moduli chiave duplicati nel piè di pagina per non forzare i visitatori che hanno rivisto l'intera pagina, scorrendola di nuovo:
Se ci sono pagine con prodotti o servizi a cui un'offerta speciale e un visitatore possono ottenerlo attraverso un ordine online, posizionare un modulo di chiamata rapida o un design ordinare su questa pagina.
Inoltre, ti permetterà di "agganciare" un visitatore che è già interessato al prodotto o al servizio. Il visitatore ha esaminato la descrizione, la garanzia, i prezzi, ha deciso che il prodotto o il servizio era adatto per lui e ora lo offriamo immediatamente, senza lasciare questa pagina, lasciare una richiesta per ordinare questo servizio.
Il modulo dovrebbe essere visualizzato e utilizzare ugualmente correttamente su tutti i dispositivi e in tutti i browser.
O brevemente - Controlla i moduli di feedback del browser cross-browser e della piattaforma sul tuo sito. Il modulo può essere visibile e comodo da riempire da un computer portatile o da un computer stazionario, ma sul tablet, il campo di immissione dei dati potrebbe essere troppo stretto e scomodo per effettuare il testo sul touch screen. Il cliente cercherà quindi di provare a rendere le tue prove nel tempo per contattarti? La risposta è ovvia.
La forma deve essere breve e comprensibile.
Cosa significa? Il modulo non dovrebbe essere costituito da un gran numero di campi o fasi di riempimento. A meno che, ovviamente, non c'è bisogno difficile. Le persone si sforzano per semplicità, non vogliono trascorrere molto tempo per capire e riempire diecimila campi.
Se il servizio implica la ricezione di informazioni abbastanza dettagliate, semplificare l'attività al client (se è, ovviamente, forse). Seleziona più campi chiave da compilare:
Sembra più conveniente di, per esempio:
È meglio richiamare e verbalmente per chiarire tutto ciò di cui hai bisogno, ma per facilitare il visitatore per riempire il modulo. E aumentando così le possibilità di contattarti!
Continuando il tema della chiarezza, prestare attenzione al fatto che la forma ha un titolo: "Ordinare un callback", "ordine della chiamata di misurazione", "ordine della consultazione gratuita", ecc. Lo stesso titolo è meglio duplicare negli avvisi elettronici che verranno dal modulo alla tua posta. Quindi non solo il visitatore del tuo sito non confonde e non dimenticherà l'applicazione, che esattamente lo rende. Ma tu stesso ottieni dati chiari, quali informazioni erano interessate al visitatore che ha lasciato l'applicazione. Ciò contribuirà a navigare rapidamente con ulteriori comunicazioni con il visitatore e costruire correttamente un dialogo.
La forma deve avere un design piacevole e pratico.
Tutti i campi dovrebbero essere chiaramente visibili. Se ci sono molti colori quando crei un modulo di progettazione, vale la pena prestare attenzione a ciò non ci sono troppo da combinare e non eccessivamente luminosi. Un uomo che riempire la forma non dovrebbe sforzare la vista. Lo stesso vale per la selezione del colore per i messaggi di testo.
È meglio evitare la combinazione di buio al buio. Se, ad esempio, su uno sfondo blu scuro farete un'iscrizione verde scuro o verde scuro "il tuo messaggio inviato", semplicemente non sarà visibile.
Il modulo deve contenere una chiamata all'azione.
Un piccolo codice a barre che chiama il visitatore per creare o completare l'azione. Nel nostro caso, invia un messaggio dal sito!
Inoltre, è meglio evidenziare il pulsante con contrasto. Insieme a una chiamata all'azione, lo renderà evidente e attirerà l'attenzione del visitatore.
La forma deve essere facilmente piegata.
Quindi, la forma è facile da trovare, ha un design piacevole, conveniente per il riempimento. Cos'altro?
Non dimenticare di chiedere agli sviluppatori di aggiungere "croce" alla forma in modo da poterlo chiudere. O configurare il modulo di piegatura automatico dopo averlo riempito.
Sembra che una sciocchezza e l'immagine complessiva possa essere cantata.
Ad esempio, il visitatore ha lasciato un'applicazione sul sito e vuole tornare alla visualizzazione del sito. MA! La forma si blocca, non scompare come chiuderlo - non è chiaro. O un'altra opzione - il visitatore ha cambiato idea per scrivere una richiesta e ha deciso di chiamarti. Potrebbe essere spiacevole.
Configurazione di un messaggio di risposta.
Qualcosa del genere…
Una persona che ha inviato un messaggio vuole essere sicuro che il suo messaggio sarà ricevuto da te e rivisto. Tecnicamente, la configurazione automatica dell'avviso non richiede molto tempo, ma rafforzerà la fiducia del visitatore nel fatto che il suo messaggio non sarà lasciato senza risposta. Questo di solito viene utilizzato in quei moduli in cui è necessario specificare la tua email al momento del riempimento. Tuttavia, i servizi moderni consentono di personalizzare gli avvisi automatici e via SMS.
Riassumendo
Abbiamo un sacco di sottigliezze e altre parti: puoi sperimentare la forma e il design, è possibile disegnare pianificazione discreta sull'argomento, ecc. Ma i criteri di base non cambiano. A tutti i precedenti, voglio aggiungere uno grande, ma un desiderio importante - controllare periodicamente il funzionamento dei moduli di feedback sul sito. I fallimenti tecnici non dovrebbero essere un ostacolo alla tua attività!
