Modulo di feedback personalizzabile: come creare online? Come realizzare un bellissimo modulo di feedback pop -up html e php con un telefono e inviare un ordine di e -mail?

Istruzioni per la creazione di un modulo di feedback su HTML e CSS, nonché una raccolta di forme e manuali pronti per la loro connessione e configurazione.

Oggi, qualsiasi persona che non abbia nemmeno abilità di programmazione può facilmente creare il proprio sito scaricando un modello pronto per la rete e installandolo sul motore utilizzato.

Tuttavia, non tutti i modelli realizzati pronti sono in grado di soddisfare i requisiti dell'utente. Molti di essi sono rappresentati in una forma di "formaggio" e non hanno sezioni e funzioni così importanti come, ad esempio, una forma di feedback.

Questo blocco del sito è estremamente importante per i proprietari di negozi online e grandi portali di informazione. Nel nostro articolo troverai informazioni su come creare in modo indipendente un modulo di feedback, dove scaricare un modello finito e come installarlo sul tuo sito Web.

Figura 1. Che cos'è un modulo di feedback e perché è così necessario?

Cos'è un modulo di feedback e perché è così necessario?

• Una delle funzioni più importanti di qualsiasi sito decente è il modulo di feedback. Serve per l'interazione tra il visitatore e l'amministrazione delle risorse. Quindi, con il suo aiuto, puoi scrivere un appello al supporto tecnico o inviare i dati necessari alle amministrazioni. Ad esempio, i dettagli di pagamento nei negozi online o il nome della merce ordinata. Si consiglia vivamente di avere una tale forma sul tuo portale, poiché un contatto costante con i suoi visitatori e clienti è la chiave per il suo sviluppo di successo.

Il modulo di feedback è una pagina o un blocco separato (dipartimento), costituito da diversi campi di iscrizione del testo e del pulsante "Invia". Di norma, il modulo standard ha i seguenti campi:

• Nome e cognome
• E-mail (indirizzo e-mail)
• Numero di cellulare
• Gli indirizzi del tuo sito
• Campo per immettere il messaggio di testo

Tuttavia, i campi possono essere tanto quanto vuoi e possono essere firmati come preferisci. Tutto dipende dalle tue esigenze e dall'immaginazione.

Figura 2. Che cos'è un modulo di feedback e perché è così necessario?

• Inoltre, alcuni proprietari aggiungono schede Google o Yandex al modulo di feedback, forme di inserimento nel sito utilizzando i social network "Vkontakte", "Facebook", "Google+" e così via. Ma parleremo della creazione della forma di feedback più semplice, per la quale avrai bisogno di conoscenza esclusiva delle basi del linguaggio di marcatura Html e niente di più.

Come creare il modulo di feedback più semplice per il sito su HTML e PHP?

Per non trasformare l'articolo in un libro di testo noioso completo, procederemo dal fatto che hai già familiarità con le basi del linguaggio di marcatura Html E hai un'idea generale di come funziona. Se non hai tali abilità, prima di assumere la creazione di una forma, si consiglia vivamente di stringere un po 'le tue conoscenze su una risorsa gratuita htmlbook.ru. Altrimenti, non puoi solo abbandonare questa impresa, ma anche rovinare il codice del tuo sito.

Per ricreare la forma di lavoro di feedback, sono necessari tre elementi importanti, uno dei quali è responsabile della marcatura e della struttura della forma ( Html), il secondo per il suo design esterno ( CSS) e il terzo per l'elaborazione e la trasmissione dei dati ( PHP). Cominciamo in ordine:

Scrivere un codice HTML per feedback

• Passo 1. Per indicare la forma in Html Il tag viene utilizzato ‹Modulo› ‹/forma›. All'interno saranno presenti dimensioni, stili e altre proprietà vitali della forma. Quando si registra il tag stesso, deve impostare una classe per indicare, che aiuterà ulteriormente a installare per il modulo CSS Stili.

Figura 1. Come creare il modulo di feedback più semplice per il sito su HTML e PHP?

• Passo 2. Inoltre per creare il primo campo della nostra forma all'interno del tag \u003cModulo\u003e Devi scrivere tag a blocchi \u003cP\u003eche è responsabile della creazione di una nuova linea.

Figura 2. Come creare il modulo di feedback più semplice per il sito su HTML e PHP?

• Passaggio 3. All'interno del tag \u003cP\u003e Dalla nuova riga inseriamo il seguente tag: ‹Etichetta per \u003d" Nome "›Nome \u003c/Etichetta\u003e. È responsabile dei nomi del futuro campo della forma.

Figura 3. Come creare il modulo di feedback più semplice per il sito su HTML e PHP?

• Passaggio 4. Nella nuova riga, tutto è nello stesso tag \u003cP\u003e Prescriviamo il tag di creazione di un campo con i seguenti valori: ‹Input type \u003d" text »name \u003d" name "Placeholder \u003d"Inserisci il tuo nome "Necessario \\\u003e. Parametro " type \u003d "text"" Imposta il tipo di campo di testo e il parametro " placeholder \u003d "Inserisci il tuo nome «» Imposta il testo iniziale in questo campo di testo. Parametro " necessario»Rende chiaro al visitatore del sito che questo campo è obbligatorio per la compilazione. Di conseguenza, dovresti ottenere un modulo con un campo, come mostrato nello screenshot seguente.

Figura 4. Come creare il modulo di feedback più semplice per il sito su HTML e PHP?

• Passaggio 5. Nell'esempio sopra, aggiungi i campi rimanenti necessari, ogni volta a partire dal tag \u003cP\u003e. Per installare un campo con un messaggio di testo, utilizzare il tag ‹TextErea name \u003d" Message "Cols \u003d" 50 ″ Rows \u003d "6 ″ richiesto› ‹/textrea›. Opzioni " cols" E " file»Sono responsabili della larghezza e dell'altezza del campo di testo. Puoi impostare i parametri che ti piacciono di più. Dovresti ottenere qualcosa del genere mostrato nello screenshot qui sotto.

Figura 5. Come creare il modulo di feedback più semplice per il sito su HTML e PHP?

• Passaggio 6. Per proteggerti dai robot, che oggi sono molto su Internet, crea un'altra linea con tag ‹Input name \u003d" bezspama "type \u003d" text "style \u003d" display: nessuna "value \u003d" " /›. A causa del parametro " style \u003d "display: nessuno"»Questo campo non sarà visibile da semplici mortali, ma i robot verranno riempiti automaticamente. Pertanto, puoi sempre distinguere una persona vivente dal programma.

Figura 6. Come creare il modulo di feedback più semplice per il sito su HTML e PHP?

• Passaggio 7. La fase finale della marcatura sarà la creazione del pulsante di invio. Il tag viene utilizzato per questo \u003cPulsante\u003e. Crea un nuovo blocco \u003cP\u003e E al suo interno, inserisci il codice del pulsante con i seguenti parametri: ‹Button class \u003d" Invia "type \u003d" Invia "›mandare un messaggio \u003c/Pulsante\u003e. Un risultato simile dovrebbe rivelarsi, come mostrato nello screenshot.

Figura 7. Come creare il modulo di feedback più semplice per il sito su HTML e PHP?

Lavorare con gli stili a cascata (CSS)

• Come hai già notato nel processo di marcatura, abbiamo scoperto qualcosa di molto storto, incredibile e disgustoso. Per dare il feedback del modulo un aspetto più o meno pulito, una lingua Html Non sarà abbastanza. A tale scopo, dovrai ricorrere all'uso di stili CSS.
• Nel caso in cui tu abbia approfittato dei consigli per stringere le tue competenze di base sulla risorsa htmlbook.ru, quindi impostare determinati parametri di progettazione per tutte le parti del modulo utilizzando CSS Non sarà difficile per te. Se non hai il desiderio o il tempo di scherzare con tutto questo, allora ti forniremo un codice pronto e ti diremo e ti diremo come collegarlo.

Figura 8. Come creare il modulo di feedback più semplice per il sito su HTML e PHP?

Connetti gli stili CSS A Html Puoi due modi:

• Copia il codice dalla nostra tabella a cascata in fondo al file style.cssche è presente all'hosting del sito
• Sposta il nostro file Styles sul tuo hosting e collegalo

File style.css Si collega all'interno del tag ‹Head› ‹/Head› Usando uno script ‹Link rel \u003d" Stylesheet "Media \u003d" Screen "href \u003d" style.css "›. Nel caso in cui un file con stili non sia nella stessa cartella del file HTML principale, è necessario specificare il percorso. Nel nostro file con stili, ogni elemento ha una designazione. Se lo desideri, puoi cambiare i parametri per te stesso, guidato solo da abilità di programmazione di base.

Connessione file php e impostarla

Come accennato in precedenza, script PHP è responsabile dell'esecuzione del modulo di feedback. Tuttavia, al fine di comprendere più o meno il principio del lavoro linguistico PHP, devi leggere un grande volume di letteratura e spendere un numero decente di ore per la pratica. Pertanto, come nel caso di CSS, Ti forniremo un file pronto per uno script PHP che rimane solo per allegare al documento con il modulo.

A differenza del file style.css, un file con uno script PHP è allegato nelle proprietà del modulo stesso. Cominciamo in ordine:

• Passo 1. Apri il codice precedentemente scritto e trova una riga con un tag del modulo aperto. Aggiungi proprietà ad esso " action \u003d "Contact-Form.php"" E " method \u003d "post"". Guarda un esempio nello screenshot.

Figura 9. Come creare il modulo di feedback più semplice per il sito su HTML e PHP?

• Passo 2. Scarica il nostro file PHP e posizionalo sull'hosting nella stessa cartella in cui si trova il documento HTML. Pertanto, i file PHP e HTML interagiranno tra loro.

Figura 10. Come creare il modulo di feedback più semplice per il sito su HTML e PHP?

• Passaggio 3. Successivamente, devi configurare lo script per te stesso. Apri il file e imposta le variabili, assegnando loro gli stessi nomi dello script HTML. Se hai aggiunto ulteriori campi al modulo, aggiungili nello script PHP esattamente come mostrato nello screenshot.

Figura 11. Come creare il modulo di feedback più semplice per il sito su HTML e PHP?

• Passaggio 4. Successivamente, è necessario aggiungere altre due variabili con l'indirizzo della tua e -mail e l'argomento della lettera che verrà visualizzata nella tua casella. In linea con una variabile " $ Indirizzo"Indicare e-mail e nella riga" $ sub»Il tema della lettera è mostrato nello screenshot.

Figura 12. Come creare il modulo di feedback più semplice per il sito su HTML e PHP?

• Passaggio 5. In linea con una variabile " $ ms»Il formato della lettera che riceverai per posta è configurato. Puoi riscriverlo invariato o modificare i tuoi gusti.

Figura 13 Come creare il modulo di feedback più semplice per il sito su HTML e PHP?

• Passaggio 6. Tutte le altre righe sono responsabili per l'invio del messaggio e contengono le impostazioni di protezione dai robot, quindi devono essere lasciate invariate. Di conseguenza, il codice completo dovrebbe assomigliare a quello mostrato nello screenshot seguente.

Figura 14. Come creare il modulo di feedback più semplice per il sito su HTML e PHP?

Scarica file CSS e PHP per feedback

Dopo aver eseguito tutte le azioni all'uscita, riceverai un modulo di feedback così semplice

Figura 15. Come creare il modulo di feedback più semplice per il sito su HTML e PHP?

Una selezione di bellissime forme di feedback di design su HTML e CSS per scopi diversi

• Sulla base delle istruzioni di cui sopra, è possibile "disegnare" facilmente il modulo di feedback a tuo gusto. Tuttavia, se non hai tempo o desideri di creare in modo indipendente un modulo da zero, puoi trovare forme di progettazione fatte pronte su Internet e avere competenze di base Html modificali per te stesso.

Figura 1. Una selezione di bellissime forme di design di feedback su HTML e CSS per scopi diversi

• Avendo cercato un po ', abbiamo trovato per te una selezione di 35 Belle forme di feedback del design pop -up, che sono scritte Html E CSS. Queste forme sono adatte a motori come WordPress E JoomlaHanno un'impostazione semplice e facile dal pannello di controllo e sono anche perfetti per i siti senza motore.

Scarica una selezione di forme di feedback di design per i siti

VIDEO: ReadPress Refigurato feedback feedback Feedback