Ciao a tutti! In questo articolo imparerai come creare un modulo popup. feedback per siti html e wordpress. Innanzitutto, tali moduli saranno necessari per negozi online, landing page e semplici siti di biglietti da visita, poiché sono davvero convenienti per l'utente.

Ad esempio, un visitatore è arrivato al tuo sito, ha esaminato le informazioni di cui aveva bisogno, sembra essere pronto per ordinare il tuo prodotto o servizio, ma non vuole chiamare un'altra città e spendere un sacco di soldi. È in questi momenti che il modulo di feedback pop-up viene in soccorso.

Crea un modulo di contatto html

Quindi, supponiamo che tu abbia già un sito Web e desideri creare un modulo, durante la compilazione, l'utente sarà in grado di ricevere feedback da te. Per fare ciò, prima di tutto, viene creata la cornice stessa.

Incolla il seguente codice nel posto giusto sul sito:

Applicazione in linea

Facoltativamente, puoi aggiungere campi aggiuntivi per l'immissione di informazioni o rimuovere quelli esistenti. Sconsiglio vivamente di utilizzare captcha o altra protezione contro i bot in tali moduli, che renderanno difficile per l'utente compilare il modulo.

Il codice è inserito, cosa vediamo?

Il modulo è apparso, ma è necessario dargli un modulo. Per fare ciò, aggiungi i seguenti stili:

/* Modulo di contatto */ #inline ( margin-left:30px; width:80%; margin:0 auto; background:#fff; padding:10px 20px; ) .txt ( display:inline-block; color:#676767 ; width:190px; margin-bottom:10px; border:1px solid #ccc; padding:5px 9px; font-size:15px!important; line-height:1.4em; ) .txtarea ( display:inline-block; colore: # 676767; width:617px; margin-bottom:10px; border:1px solid #ccc; padding:5px 9px; font-size:15px!important; line-height:1.4em; height:80px; ) .txt:focus, . txtarea:focus (stile bordo:solido; colore bordo:#bababa; colore:#444; ) input.error, textarea.error (colore bordo:#973d3d; stile bordo:solido; sfondo:#f0bebe; colore :#a35959; ) input.error:focus, textarea.error:focus ( border-color:#973d3d; color:#a35959; ) #send ( color:#FFFFFF; display:block; cursor:pointer; padding:5px 11px ; font-size:1.2em; border:solid 1px #F9F9F9; border-radius:2px; background:#70C6B9; width:210px; margin-bottom:20px; ) #send:hover ( background:#9797 97; ) /* Modulo di feedback */

Già molto meglio. In ogni caso, dovrai adattare il modulo per adattarlo disegno generale sito, quindi il tuo finirà per essere diverso dal mio.

Si presenta così:

Che succede? Il visitatore fa clic sul campo e lo script gli sostituisce una maschera già pronta, con il prefisso internazionale. Abbastanza conveniente.

Per fare ciò, è necessario collegare lo script della maschera. Puoi scaricarlo alla fine dell'articolo insieme al codice sorgente.

Colleghiamo lo script prima del tag di chiusura. Non dimenticare di cambiare il percorso del file con il tuo. Ok, il modulo di feedback è stato creato, gli stili sono impostati, ora devi inserire un gestore in modo che le notifiche arrivino alla tua posta.

Per fare ciò, inserisci il seguente script prima del tag di chiusura:

Come funziona questo script?

1. Esegue la convalida dell'e-mail inserita.
2. Specifica i campi con cui lavorare.
3. Convalida questi campi per il completamento. Se i campi obbligatori non sono specificati, viene visualizzato un messaggio che indica che devono essere compilati.
4. Elabora le informazioni inserite e avvia l'invio di una notifica alla posta.
5. Invia un messaggio all'utente che la sua richiesta è stata accettata utilizzando Ajax.

L'ultima cosa che resta da fare è creare il file sendmessage.php e incollarvi quanto segue codice php e caricalo nella root del tuo sito.

Nuovo messaggio\r\n"; $msg .= "

Nome:".$nome utente."

\r\n"; $msg .= "

Numero di telefono:".$telefono."

\r\n"; $msg .= "

Posta:".$posta utente."

\r\n"; $msg .= "

Messaggio:".$contenuto."

\r\n"; $msg .= " "; // invia messaggio if(@mail($sendto, $subject, $msg, $headers)) ( echo "true"; ) else ( echo "false"; ) ?>

Questo è tutto, un semplice modulo di feedback per il sito html è pronto. Non dimenticare di cambiare semplicemente l'e-mail nel file sendmessage.php con la tua.

Aggiunta di un modulo di feedback pop-up al sito

Ci sono momenti in cui hai bisogno di un modulo pop-up che si apre quando fai clic su un pulsante. È molto facile farlo. Ad esempio, prendiamo il modulo che abbiamo creato in precedenza e lavoriamo con esso.

Per prima cosa dobbiamo connettere jqury fancybox, che puoi scaricare alla fine dell'articolo.

Aggiungi queste righe prima del tag body di chiusura, cambia semplicemente il percorso del file con il tuo.

E gli diamo stili.

Modalbox ( colore:#FFFFFF; display:blocco; cursore:puntatore; riempimento:10px 11px; dimensione carattere:1.2em; bordo:solido 1px #F9F9F9; raggio-bordo:2px; sfondo:#70C6B9; larghezza:210px; testo -decoration:none; text-align:center; margin:0 auto 20px; ) .modalbox:hover ( background:#979797; )

Si noti che il pulsante, una volta cliccato, farà apparire una finestra pop-up, deve essere assegnata la classe modalbox e il percorso href="#inline". Senza questo, il modulo popup non si aprirà sul sito.

Quindi nascondiamo il modulo che abbiamo creato in precedenza in modo che si apra in una finestra pop-up. Per fare ciò, è necessario sostituire gli stili #inline da quelli vecchi a quelli nuovi.

#inline ( display:none; margin-left:30px; width:80%; margin:0 auto; background:#fff; padding:10px 20px; )

Di conseguenza, otteniamo un tale pulsante.

Facendo clic su di esso si apre una finestra pop-up con feedback.

Anche in questo caso, gli stili, la disposizione dei campi e gli elementi possono essere modificati in base alle tue esigenze. Ad esempio, per una richiamata dal sito, sarà sufficiente lasciare solo 2 campi - nome e numero di telefono, e rimuovere il resto dei campi.

Non dimenticare che affinché il modulo funzioni, dovrai aggiungere il gestore che è pubblicato sopra alla fine del sito e caricare il file nella radice del sito sendmessage.php.

Modulo di feedback per wordpress

Se il tuo sito è alimentato da wordpress, puoi utilizzare plugin speciali per aggiungere un modulo di contatto. Uno di migliori plugin Modulo di Contatto 7. Puoi scaricarlo dal sito ufficiale o tramite il pannello di amministrazione nella sezione Plugin.

Dopo aver attivato il plugin, apparirà una nuova scheda nel menu a sinistra. Aprilo e fai clic su Aggiungi nuovo.

Inserisci un nome nuova forma, seleziona i campi che devono essere presenti nel modulo. Di solito bastano quelli standard, che vengono aggiunti automaticamente. Mantenersi in forma.

Dopo il salvataggio, sullo schermo apparirà uno shortcode, che dovrà essere inserito nella pagina in cui deve essere visualizzato il modulo di contatto, ad esempio nella pagina Contatti.

Copia questo codice, vai a pagina desiderata, seleziona il formato "Testo" nell'editor visivo, incolla questo shortcode e salva la pagina.

Quindi controlliamo se il modulo è visualizzato nella pagina e funziona correttamente. Per fare ciò, basterà andare alla pagina in cui è stato inserito il codice. Dovresti avere un modulo come questo:

Ora i visitatori del tuo sito potranno contattarti attraverso il modulo di contatto creato sul motore di wordpress.

Creazione di un modulo di feedback popup per wordpress

Io stesso non mi piace aggiungere plugin extra a questo motore, poiché caricano il sito, rallentandolo. Pertanto, per un modulo pop-up, di solito utilizzo 2 opzioni.

1. Fissiamo semplicemente il modulo pop-up descritto sopra nell'articolo non al sito html, ma al motore.
2. Un modulo creato con il plug-in popup Contact Form 7 con alcune modifiche minori.

Il primo metodo è già stato descritto sopra, quindi passiamo al secondo.

Innanzitutto, incolla il codice seguente subito dopo il tag body di apertura.

X

Vediamo cos'è cosa:

• Un collegamento con id="callme-open" quando viene cliccato, il nostro modulo si aprirà. Si prega di notare che questo collegamento non deve essere inserito dopo il tag aperto, ma nel punto in cui si desidera che si trovi questo pulsante. Di solito viene aggiunto nell'angolo destro dell'intestazione, accanto al numero di telefono della tua azienda.
• Il blocco bg-b creerà uno sfondo del sito oscurato quando viene aperto il modulo popup.
• Il blocco callme conterrà il modulo di feedback stesso.
• X - questa sarà la nostra croce nell'angolo del modulo, quando viene cliccato su cui il modulo si chiuderà.
• Bene, il codice php in cui verrà lanciato lo shortcode del plug-in Contact Form 7.

Tieni presente che il tuo ID e il nome del modulo potrebbero differire dal mio. Nuovo codice aggiunto, ora gli diamo stili.

Bg-b ( position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(51,51,51,0.55); z-index:1000; ) body ( position: relativo; ) .callme ( position:fixed; top:30%; left:50%; width:300px; margin-left:-150px; z-index:1100; background:#fff; padding:20px 20px 10px; border- raggio:4px; ) .callme piccolo (posizione:assoluta; destra:10px; alto:10px; dimensione carattere:15px; cursore:puntatore; )

Salva il codice e controlla. Il modulo ora dovrebbe essere posizionato al centro dello schermo, con uno sfondo scuro traslucido dietro di esso. Va tutto bene, ma resta da aggiungere l'ultima cosa: uno script che si aprirà e si nasconderà questa forma cliccando sui pulsanti desiderati.

Questo script deve essere inserito nel file footer, prima del tag body di chiusura.

Gli ultimi ritocchi sono lasciati e il modulo pop-up su wordpress sarà pronto. Assegna alle classi .callme e .bg-b lo stile display:none. Ciò è necessario affinché il modulo non appaia sullo schermo all'avvio del sito.

Abbiamo discusso con te diverse opzioni per creare un modulo di richiamata. Spero che non avrai problemi con l'implementazione del modulo sul tuo sito. In caso di problemi o domande, puoi sempre ottenere consigli nei commenti.

AGGIORNAMENTO 06/06/2018

A ultime versioni WordPress Gli script jQuery non funzionano con il simbolo $, quindi questo dovrebbe essere preso in considerazione e sostituire $ con jQuery

Abbastanza spesso c'è un tale problema in cui il modulo attraverso il sito smette di inviare a pagine interne. Per evitare che ciò accada, specifica il percorso completo del file sendmessage.php nel gestore. Ad esempio, in questo modo:

URL: "http://site.ru/sendmessage.php"

E puoi scaricare i codici sorgente dei primi due moduli da

AGGIORNAMENTO 07/04/2018

A grande richiesta, il modulo di feedback è stato aggiornato. Ora tiene conto della casella di controllo per il consenso all'invio dei dati in conformità con la legislazione della Federazione Russa n. 152-ФЗ "Sui dati personali", l'adattabilità a qualsiasi risoluzione dello schermo è stata migliorata, i file js e css sono stati compressi.

È ora possibile visualizzare l'esempio, nonché scaricare i sorgenti del modulo di feedback aggiornato e del modulo pop-up online, seguendo i collegamenti.

Sai che fino all'80% degli utenti lascia il tuo sito senza compilare una domanda perché il modulo di feedback sul tuo sito è tutt'altro che ideale? Oppure sei sicuro che il tuo modulo di domanda sia perfetto e abbia la massima conversione?

Sempre più spesso i nostri nuovi clienti che contattano il nostro studio, quando discutono della creazione e promozione del sito, si interrogano sulla conversione. Questa è assolutamente la domanda giusta quando noi stiamo parlando sul marketing su Internet, perché se il sito non porta clienti, non ha senso investire tempo e denaro in esso. Nel blog di oggi parleremo di uno dei fattori che influisce notevolmente sul numero di clienti del sito web dell'azienda. Questo fattore sono i moduli di feedback o, come vengono anche chiamati, "moduli di acquisizione". Qual è la forma ideale di feedback.

Notiamo subito che a seconda del segmento di attività, questo modulo può differire, perché ogni attività ha i suoi compiti, i suoi formati per interagire con i clienti. È il modulo che “comunica” con il cliente mentre il tuo manager chiama altri contatti e attende nuove applicazioni.

Il modulo di feedback sul sito è importante. Conduci l'acquirente a effettuare un acquisto o ordinare un servizio in modo discreto e discreto. Usa tutto ciò che puoi, da un'interfaccia intuitiva a condizioni di vendita eccellenti. Ma quando il cliente arriva al modulo d'ordine, se ne va. Tutto il lavoro è andato in malora. È improbabile che torni mai più da te. Questo può essere evitato semplicemente modificando il modulo di feedback.

A cosa serve il modulo di feedback?

Non solo per effettuare un ordine/acquisto. Usando il modulo di feedback, scopri dagli utenti cosa gli piace / non gli piace, quali "stipiti" ci sono nel lavoro dell'azienda e ricevi persino consigli pronti su come migliorarlo. La conversazione con gli utenti è:

a) aumentare la fedeltà alla tua azienda;

b) la capacità di rispondere rapidamente a una richiesta, ridurre il negativo e fidelizzare il cliente;

c) l'opportunità di migliorare il prodotto o servizio;

d) un modo per aumentare le vendite.

L'errore principale commesso dai proprietari di siti inesperti è un modulo di feedback sovraccarico. Gli utenti sono scoraggiati dall'ampio insieme di campi che devono essere compilati per fare una richiesta alla tua azienda. Non vogliono fornire informazioni non necessarie su se stessi, anche se prometti loro la riservatezza. Abbiamo raccolto per te alcune regole per la progettazione della forma ideale.

Regola numero 1. Mantieni il tuo modulo il più semplice possibile

Quale di questi moduli preferiresti compilare?

O così

Lascia solo i campi più importanti. Ai visitatori della maggior parte dei siti non piace compilare un gran numero di campi

Se viene seguita la regola di semplificazione dei moduli, dovremmo aspettarci un aumento della conversione del 30-60%.

Consiglio. Rimuovi tutto ciò che non è necessario, lascia 2-3 campi o anche 1. Di solito questo è "Nome", "Numero di telefono o e-mail". Se hai un negozio online e stai effettuando un modulo d'ordine, ci saranno alcuni campi in più: "Nome", "Numero di telefono o e-mail", "Opzione di consegna", "Quantità di merce", "Indirizzo" . Guarda per quali scopi stai creando un modulo di feedback e semplificalo il più possibile.

Regola numero 2. Il modulo deve essere visibile

Il feedback o il modulo di richiesta dal sito deve essere evidente, altrimenti il ​​visitatore potrebbe semplicemente non notarlo e non compilarlo. Puoi persino posizionare una sorta di elemento animato che ti consentirà di concentrarti ulteriormente.

Regola numero 3. Minimo "campi obbligatori"

Un campo obbligatorio: telefono

Spesso sui siti web delle aziende si può osservare non solo un form sovraccaricato di campi extra, ma anche l'obbligo di compilare questi campi. La dicitura "campo obbligatorio" è presente nel 99% dei siti. Vuoi aumentare la conversione? Rimuovere la compilazione obbligatoria di tutti i campi, ad eccezione del numero di telefono. Se una persona vuole, compilerà lui stesso i campi che ritiene necessari, ma il campo principale è il numero di telefono, che consentirà di richiamare il cliente e chiarire tutte le altre informazioni. La cosa principale è non dimenticare di scrivere gli script giusti per i manager.

In quali casi cade la conversione da modulistica:

• 3% di calo delle conversioni se richiedi un campo di età
• Cadono le conversioni 10% se devi inserire il tuo nome completo
• Cadono le conversioni 2% se sei interessato alla località in cui vive il visitatore
• Cadono le conversioni 4% se devi inserire l'indirizzo di residenza

Se nel negozio online sono presenti i campi relativi alla consegna, all'indirizzo e al nome completo, l'utente, ovviamente, li compila e ciò non influisce sulla conversione. Ma se vuoi che inserisca i dati per inviarti una domanda, la conversione cadrà sicuramente.

Regola numero 4. Link nel form (condizioni di contatto)

Se è necessario inviare un visitatore a leggere i termini di contatto, l'elaborazione delle domande, gli ordini, ecc., effettuare questi collegamenti direttamente nel blocco modulo. Quando si fa clic su tale collegamento, è meglio mostrare una finestra pop-up con informazioni facili da chiudere e procedere alla compilazione del modulo.

Un esempio di tale modulo:

Cerca di ridurre al minimo la quantità di testo e le condizioni nel modulo, perché l'utente sarà troppo pigro per rileggere tutto e chiuderà semplicemente il modulo senza inviarti i suoi dati. Errori anche in questo modulo: troppi campi obbligatori.

Regola numero 5. Consenso al trattamento dei dati

Anche se i dati nel modulo possono essere inseriti in modo errato e non essere dati personali, questa casella di controllo deve essere selezionata. Ci sono già stati ricorrenti in tribunale per i quali gli imputati hanno dovuto pagare una multa per inadempienza questo requisito Legislazione.

Regola numero 6. Gli elenchi a discesa non dovrebbero essere

Se il tuo modulo è una calcolatrice, l'elenco a discesa è accettabile. Ma se costringi una persona a scegliere a quale dipartimento della tua azienda desidera candidarsi, ciò ridurrà la conversione, perché gli utenti vogliono compilare il modulo rapidamente senza pensare a informazioni non necessarie.

Regola numero 7. Rimuovere il captcha dal modulo

L'inserimento di un captcha può ridurre le conversioni fino al 40%. Ciò è dovuto al fatto che spesso il captcha non viene letto affatto o quando si inseriscono i dati segnala l'immissione di caratteri errati. Se il captcha precedente era giustificato dal fatto che senza di esso potrebbe arrivare molto spam, ora ci sono tecnologie che proteggono il modulo dall'immissione di dati da parte di robot spam senza inserire il captcha.

Nello studio artcell utilizziamo proprio una tale tecnologia. Come puoi vedere, non ci sono captcha nei nostri moduli e non riceviamo SPAM.

Regola numero 8. Notifica automatica che il modulo è stato inviato

Dopo aver compilato e inviato il modulo, deve apparire un messaggio in cui si informa che i dati sono stati inviati e il gestore ti richiamerà il prima possibile. In assenza di tale notifica, l'utente non capisce se i dati sono stati inviati o meno, se aspettarsi una chiamata dall'azienda o meno. Questa notifica ti salverà dalla duplicazione delle applicazioni dello stesso utente.

Regola numero 9. Notifica SMS

Invia una notifica automatica al numero del visitatore se il tuo modulo ha un campo per inserire un numero di telefono. Ciò ti consentirà di personalizzare il tuo messaggio e all'utente verrà nuovamente ricordato il nome della tua azienda.

Qual è quindi la forma ideale di feedback?

Evidenziato in una cornice o colore, che gli consente di essere più evidente sullo sfondo del resto delle informazioni sul sito

Campi minimi da compilare

Uno o due campi obbligatori

Campi a discesa mancanti

La presenza di una casella di spunta per il consenso al trattamento dei dati ricevuti

La presenza di link e condizioni aggiuntive immediatamente nel form senza inutili transizioni ad altre pagine del sito

Nessun captcha

Hai un modulo di domanda ideale, ma ancora pochi clienti? Leggi questo blog nella nostra rivista e troverai la risposta alla tua domanda. Se il tuo sito non sta andando bene in motori di ricerca allora queste informazioni ti saranno utili.

Se non sei in grado di rendere ideale il modulo di contatto e desideri chiedere aiuto a professionisti, compila la domanda di seguito e il nostro manager ti richiamerà il prima possibile.

10.08.2019 Viktar Haurylavets

Per fornire feedback ai visitatori del sito, vengono utilizzati vari tipi di moduli per inviare informazioni di contatto all'amministrazione del sito. Può essere un numero di telefono, un indirizzo e-mail o solo un messaggio.

Principi di base dell'organizzazione del feedback

Il feedback può essere implementato utilizzando varie tecnologie, ma il principio di base rimane lo stesso. Sul diagramma a blocchi sembra così.

Schema di organizzazione del feedback sul sito.

Ci soffermeremo solo su punti teorici, potete trovare l'implementazione in altri articoli sul nostro sito, il link è sopra.

Il modulo

La forma stessa è parte documento HTML, quindi per l'utente devi solo mostrare il modulo appropriato ed è più facile farlo nei tag

, che contengono il pulsante Invia o Fai una richiesta, cliccando sul quale il modulo verrà ulteriormente elaborato.

È molto importante indicare correttamente e chiaramente i campi obbligatori, che spesso sono indicati dal simbolo * . In linea di principio, è possibile scrivere il modulo stesso in tag

, ma c'è una differenza. Se una

genera una richiesta POST specificata nell'attributo action, che è comodo da usare per ulteriori elaborazioni sul server con usando PHP, Python, Java e così via, quindi nel caso di div è necessario utilizzare JavaScript. Inoltre, utilizzando JavaScript, puoi inviare dati tramite richieste Ajax, nel qual caso la pagina non verrà aggiornata nella riga del browser.

Tuttavia, il principio è lo stesso: inviamo alcuni dati al server.

Quali dati devono essere richiesti?

Questo è un numero di telefono per una richiamata o E-mail per feedback. A volte il campo del nome è reso obbligatorio, ma l'obiettivo è ottenere le informazioni di contatto per la comunicazione?

Elaborazione di una richiesta sul server

L'implementazione finale dipende dalla tecnologia e dal linguaggio di programmazione utilizzati. Puoi inviare una lettera in cui è stata visualizzata una nuova applicazione dal modulo di feedback o creare un lead in CRM (sistema di gestione delle relazioni con i clienti, in cui sono registrati tutti i clienti dell'azienda). Tuttavia, è necessario assicurarsi che le lettere vengano inviate dal server e consegnate tempestivamente.

Risposta dal server

Dopo l'elaborazione sul server, inviamo una risposta, se è stato possibile inviare una lettera o è stata registrata una richiesta, in modo che l'utente sappia di aspettare che risponda o meno. Di norma, viene implementato tramite una finestra pop-up con un messaggio oppure viene reindirizzato a una pagina separata con un messaggio sull'invio riuscito della richiesta.

Per un'analisi diretta del codice in HTML e PHP, vedere.

1. Plugin per la creazione di moduli online "jFormer"

Creazione moduli di contatto: feedback, commenti, form di login, form di registrazione con verifica della correttezza delle informazioni inserite.

2. Modulo di registrazione passo dopo passo utilizzando jQuery

Modulo pulito con riempimento passo dopo passo. Di seguito è riportato un indicatore del completamento del modulo.

3. Modulo passo dopo passo

Compilazione del modulo in più passaggi con verifica della correttezza della compilazione.

4. Modulo di contatto per il sito

La verifica della correttezza delle informazioni di input viene eseguita "al volo" prima di inviare un messaggio utilizzando javascript.

5. Passaggio animato tra i moduli su jQuery

Passaggio animato tramite jQuery tra il form di login, il form di registrazione e il campo di recupero password. Nella pagina demo, fare clic sul collegamento giallo per vedere l'effetto.

6. Modulo di contatto PHP pop-up

Tale soluzione può essere utilizzata per dare al visitatore la possibilità di contattare rapidamente il proprietario del sito da qualsiasi pagina. Nella pagina demo, fare clic sulla freccia in basso per aprire il modulo.

7. Modulo di registrazione PHP utilizzando jQuery e CSS3

Modulo con convalida delle informazioni inserite.

8. Modulo di registrazione PHP in stile Facebook

Bel modulo di registrazione implementato con CSS, PHP e jQuery.

9. Modulo di contatto jQuery "SheepIt".

Implementata la possibilità di aggiungere nuovi campi prima di inviare un messaggio.

10. Modulo di contatto AJAX di fantasia

carino pulito modulo PHP feedback con verifica della correttezza delle informazioni inserite. Tecnologie: CSS, PHP, jQuery.

11. Sistema di autorizzazione/registrazione al sito

12. Modulo di presentazione

Con verifica della correttezza del riempimento.

13. Plugin jQuery "Contattabile".

Per implementare un modulo di feedback in uscita per inviare rapidamente un messaggio.

Qualsiasi sito dovrebbe avere un modulo di feedback, quindi prima o poi ognuno di noi pensa al suo sviluppo. Ci sono molte opzioni sulla rete, qualcuno usa plugin popolari, qualcuno ha la propria esperienza personale, ma la maggior parte è alla ricerca di soluzioni già pronte. In ogni caso il ns modulo di feedback del sito web sarà funzionante e funzionante, e tutto questo in ordine.

HTML

Quindi, iniziamo, come sempre, con il solito blank - html. Per prima cosa abbiamo bisogno di un modulo con diversi campi. Prenderemo 3 campi per chiarezza e standard di tutti i moduli. Quelli. sarà Nome, Email e Telefono.

Ogni input che abbiamo ha il suo nome univoco, ne avremo bisogno in seguito per inviare messaggi. Puoi anche aggiungere liberamente i tuoi campi e non solo inserire, ma anche selezionare, textarea. Basta non dimenticare di dare a ciascuno di loro il proprio nome, che utilizzeremo quando invieremo informazioni per posta. Per comodità, ho aggiunto a ciascun campo attributo richiesto, grazie al quale il browser non consentirà all'utente di inviare valori vuoti e di avvisarlo della necessità di riempirli.

css

Quando il modulo è pronto, puoi modificarlo leggermente. Tutto dipende anche dalle tue esigenze e fantasie. Per chiarezza, ho abbozzato alcuni stili per ogni elemento in modo che tutto non sembri così piatto. Ma se sei troppo pigro o non sai come farlo, allora puoi usare la mia versione:

Form( max-width: 400px; width: 100%; margin: 0 auto; ) input( box-sizing: border-box; display: block; border: nessuno; box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.11); padding: 10px 20px; larghezza: 100%; margine: 10px 0; contorno: nessuno; ) input( sfondo: rosso; bordo: nessuno; box-ombra: 0px 2px 0 1px #C50909; bordo- raggio: 5px; colore: bianco; trasformazione del testo: maiuscolo; peso del carattere: 600; larghezza: 200px; cursore: puntatore; transizione: 0.3s; ) input:hover( sfondo: nero; box-ombra: 0px 2px 0 1px Nero;)

Dalla parte del cliente

Qui vale già la pena capire più in dettaglio, è più accurato scegliere l'opzione appropriata per te stesso. Per inviare messaggi alla posta, dobbiamo utilizzare il linguaggio php, ad es. creare file separato, a cui trasferiremo tutti questi dati. Ma noi questo metodo non lo considereremo qui, poiché è molto più bello quando tutto accade senza ricaricare la pagina. Pertanto, prenderemo in considerazione l'invio di dati tramite ajax .

Se vuoi fare le cose alla vecchia maniera, dovrai modificare un po 'l'html superiore e impostare il valore dell'attributo del metodo del modulo (post o get). Tutto dipende da come vuoi inviare i dati dal modulo. Inoltre, non dimenticare di scrivere action , che indicherà il percorso del file php.

E andremo con un metodo più avanzato e invieremo i dati senza ricaricare la pagina e, ricevendo una risposta dal server, daremo all'utente un messaggio su un'operazione riuscita o un errore. Tuttavia, abbiamo anche bisogno di 2 file, diciamo contact.php e custom.js.

Prima di tutto, non dimenticare di includere la libreria Jquery, con il suo aiuto accorceremo più volte il codice e saremo in grado di eseguire facilmente qualsiasi azione utilizzando soluzioni già pronte.

$(".form").submit(function() ( var str = $(this).serialize(); $.ajax(( type: "POST", url: "contact.php", data: str, success : function(msg) ( if(msg == "ok") ( alert("Email inviata"); ) else ( alert("Errore! Potresti aver compilato i campi in modo errato."); ) ) )); return falso; ) );

Ora diamo un'occhiata allo schema delle azioni e perché abbiamo bisogno di tutte queste librerie e file. Quando l'utente fa clic sul pulsante di invio, abbiamo un evento di invio, che scriveremo in custom.js e, in base al quale, riceveremo tutti i dati dal modulo e lo passeremo al file contact.php. Qui controlliamo ancora una volta se i campi sono vuoti (per evitare un'altra possibilità di spam), inviamo un messaggio all'e-mail e informiamo l'utente dei risultati, che vengono passati come risposta a custom.js.

If (trim($_POST["mfbPhone"]) == "") ( echo "false"; ) else ( $txtname = trim($_POST["mfbName"]); $txtemail = trim($_POST["mfbMail "]); $txtphone = trim($_POST["mfbPhone"]); // da cui $fromMail = " [email protetta]"; // Inserisci qui la tua email $emailTo = " [email protetta]"; $oggetto = "Feedback"; $oggetto = "=?utf-8?b?". base64_encode($oggetto) ."?="; $headers = "Da: esempio di modulo<$fromMail>\n"; $headers .= "Tipo di contenuto: testo/normale; charset="utf-8"\r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Data: ". date("D, d M Y h:i:s O") ."\r\n"; // message body $body = "Un'email ricevuta dal sito ".$site." \n\nNome: ".$txtname."\nTelefono: ".$txtphone."\ne-mail: ".$txtemail."\nMessaggio: ".$txtmessage; mail($emailTo, $subject, $body, $headers); echo "ok"; )

Questo è l'esempio più elementare di come funziona un modulo di contatto. Ci sono molte opzioni su come modificare il file di controllo php, creare le tue classi, ecc. Ma il nostro compito era quello di creare un esempio semplice e funzionante che puoi utilizzare sul tuo sito.

demo

File

Plugin pronti

Dato che sei acceso blog WordPress, allora probabilmente sei pronto e desideroso di utilizzare tutti i tipi di plugin, specialmente se sei un completo sfigato nella programmazione e nel layout. E non ti biasimo per questo, e posso anche portarne uno alla tua attenzione per chiarezza. Lo scopo di questo paragrafo non è una raccomandazione, ma solo un esempio, visto che ho usato il plugin Modulo di contatto 7 in diversi progetti.

È molto facile da configurare e funziona quasi sempre perfettamente. Se hai bisogno di creare il tuo design unico, puoi farlo. Basta aggiungere i campi necessari nel costruttore, tradurre e modificare le notifiche su errori e invio riuscito a modo tuo e il gioco è fatto. Quindi copia lo shortcode e incollalo nel posto giusto dell'output del modulo.

Non ho mai avuto problemi con il plugin e se hai bisogno di una soluzione rapida e pronta, allora è proprio questo. Se hai i tuoi requisiti per il modulo in termini di funzionalità e design, è meglio utilizzare la prima opzione, che richiede conoscenze in questo settore.