Disposizione dei moduli. Un esempio di layout del modulo di feedback. Modulo di feedback busta HTML5 e CSS3 Modulo di feedback php Html5

Struttura del modulo HTML

Ogni riga viene inserita in un contenitore DIV, quindi è molto più conveniente posizionare le etichette accanto al campo di input. L'intero modulo viene inserito in un DIV largo 660 px al centro della pagina.

Scrivere una lettera!

*I campi contrassegnati da un asterisco sono obbligatori

Il tuo nome *

Indirizzo e-mail *

Soggetto *

Messaggio *

Struttura del modulo CSS

Tutte le animazioni sono realizzate con le nuove proprietà CSS 3. Tutti gli sfondi sono realizzati con gradienti ordinari. Presta attenzione all'animazione del pulsante. Le ombre al passaggio del mouse vengono eseguite anche in CSS3.

/* stili del modulo */
form.riga(
blocco di visualizzazione;
imbottitura: 7px 8px;
margine inferiore: 7px;
}
forma .row:hover (
sfondo: #f1f7fa;
}

Etichetta modulo (
visualizzazione: blocco in linea;
dimensione carattere: 1,2 em;
peso carattere: grassetto;
larghezza: 120px;
imbottitura: 6px 0;
colore: #464646;
allineamento verticale: in alto;
}
modulo .req ( colore: #ca5354; )

Nota modulo(
dimensione carattere: 1,2 em;
altezza della linea: 1,33 em;
peso carattere: normale;
imbottitura: 2px 7px;
margine inferiore: 10px;
}

Modulo input:focus, modulo textarea:focus ( contorno: none; )

/* stili segnaposto: http://stackoverflow.com/a/2610741/477958 */
::-webkit-input-placeholder ( colore: #aaafbd; stile carattere: corsivo; ) /* WebKit */
:-moz-placeholder ( colore: #aaafbd; stile carattere: corsivo; ) /* Mozilla Firefox da 4 a 18 */
::-moz-placeholder ( colore: #aaafbd; stile carattere: corsivo; ) /* Mozilla Firefox 19+ */
:-ms-input-placeholder ( colore: #aaafbd; stile carattere: corsivo; ) /* Internet Explorer 10+ */

Modulo.txt(
visualizzazione: blocco in linea;
imbottitura: 8px 9px;
imbottitura a destra: 30px;
larghezza: 240px;
famiglia di caratteri: "Oxygen", sans-serif;
dimensione carattere: 1,35 em;
peso carattere: normale;
colore: #898989;
}

In conclusione, vorrei dire che con lo sviluppo di CSS3 e HTML5, creando un modulo di feedback con animazioni, ombre, ecc. non è diventato un compito così difficile. Spero che questa lezione ti aiuti a creare i tuoi moduli per il tuo sito web.

Questo è l'aspetto finale del modulo di feedback

Diamo subito un'occhiata a tutti i campi che saranno a tua disposizione in questo modulo.

Struttura dei campi del modulo di feedback

Nome del mittente
indirizzo di posta
telefono
azienda mittente
sito web del mittente
prodotto (direzione)
elenco dei servizi richiesti
Informazioni aggiuntive
protezione antispam/robot

Caratteristiche e capacità

bloccando il pulsante “invia” fino al verificarsi delle condizioni necessarie
semplice selettore per il controllo e la protezione dai robot
pulsante aggiuntivo “cancella tutti i campi”

Cosa è incluso nel modulo di feedback?

Markup HTML (creazione del layout)
Applicazione di stili ai campi del modulo con CSS/SCSS
jQuery+js
Gestore PHP

Creazione di markup HTML

Quindi, diamo un'occhiata al markup del modulo:

Presentati: * Indica la tua email: * Indica il tuo numero di telefono: * Scrivi da quale azienda provieni: Indica il tuo sito web: Prodotto: Seleziona un servizio: Nessun servizio selezionato Servizio_ Servizio_ Servizio_ Servizio_ Servizio_ Servizio_ Servizio_ Servizio_ Aggiuntivo. Informazioni: Sono un Robot Sono un essere umano Cancella I campi contrassegnati da un asterisco * sono obbligatori.

Ci sono i primi tre campi che hanno un id e un certo evento js onkeyup="checkParams()" (ne avremo bisogno in seguito). Essi saranno soggetti a verifica obbligatoria della correttezza dell'inserimento dei dati. L'attributo obbligatorio è responsabile di ciò. Se devi rimuovere o rendere obbligatorio un altro campo, rimuovi/aggiungi semplicemente questo attributo.

Diversi campi aggiuntivi che non sono obbligatori.

Selettore per la selezione dei servizi forniti seleziona .

Campo informativo aggiuntivo textarea .

Selettore per la verifica dell'“umanità” - Lavoro | Sono umano.

Due pulsanti: Invia e Cancella informazioni nei campi compilati.

In senso buono, manca ancora una casella per confermare il consenso al trattamento dei dati, ma aggiungerla, spero, non ti causerà alcuna difficoltà.

Stile del modulo CSS/SCSS

Tutti i campi del modulo hanno uno stile utilizzando CSS flexbox (Flexible Box Layout Module) e divisi in gruppi con classi aggiuntive. Naturalmente puoi creare i tuoi stili. Se conosci i CSS, puoi impostare il design per tutti gli elementi del modulo senza problemi, non hai nemmeno bisogno del mio aiuto.

Modulo ( input, input, input, textarea, select ( display: blocco; riempimento: 12px 15px; altezza linea: 1,5; larghezza: 100%; dimensione carattere: 16px; bordo: 1px solido #ced4da; raggio bordo: . 25rem; clip di sfondo: riquadro di riempimento; colore di sfondo: #fff; ombra di riquadro: 0 1px 0 0 rgba(255, 255, 255, .05), inset 0 1px 2px 0 rgba(0, 0, 0, .05); &:focus ( contorno: none; ) .form-row ( display: flex; flex-wrap: wrap; giustifica-contenuto: spazio-tra; .form-group:nth-child(1) ( input ( larghezza: 95%; ) ) .col-6 ( posizione: relativa; flex: 0 0 50%; larghezza massima: 50%; ) .pt-3 ( imbottitura-top: 1rem; ) .form-group ( margine- fondo: 1rem; etichetta (altezza riga: 1,7; spaziatura lettere: .3px; trasformazione testo: maiuscolo; dimensione carattere: 14px; peso carattere: 900;) textarea (altezza minima: 110px; ridimensionamento: verticale; ) ) )

Impostazione del codice PHP

Passiamo ora al gestore del modulo, dove tutte le azioni iniziano a seconda del selettore selezionato: Bot/Umano.

Cosa c'è qui?

header("Aggiorna: 5; URL=https://www.site.ru"); — dopo aver compilato il modulo da parte del bot, lo invia alla pagina di notifica e dopo 5 secondi ritorna a quella specificata nel campo.
mail, nome, telefono, ... - impostazione della corrispondenza dei campi html. Qui devi fornire tutti i nomi rilevanti="" nel modulo di feedback. Pertanto, nel campo servizi è necessario specificare esattamente lo stesso ordine di opzioni del markup html.
$mess è il corpo del messaggio che arriverà nella lettera. Puoi scambiarli, cambiare i loro nomi o semplicemente eliminare/commentare quelli che non ti servono.
$headers è una riga obbligatoria che indica la codifica della lettera. Se cancelli o modifichi accidentalmente charset=utf-8, tutte le tue parole si trasformeranno in geroglifici.
intestazione: dopo aver fatto clic con successo sul pulsante, il visitatore verrà inviato a una pagina di notifica e dopo 5 secondi verrà reindirizzato alla pagina specificata. Oppure (riceverà una notifica di errore.

Ulteriori vantaggi per js e jQuery

In precedenza, abbiamo esaminato un modello di modulo html, in cui abbiamo visto ID e funzioni aggiunti per tre campi obbligatori. È tempo di capire perché sono stati aggiunti.

Guarda il codice js. Si tratta di un blocco pulsanti che, quando disabilitato, impedisce al visitatore di cliccarlo prima che i campi necessari siano compilati.

function checkParams() ( var name = $("#name").val(); var email = $("#email").val(); var phone = $("#phone").val(); if (nome.lunghezza != 0 && email.lunghezza >= 6 && telefono.lunghezza >= 10) ( $("#submit").removeAttr("disabled"); ) else ( $("#submit"). attr("disabilitato", "disabilitato"); ) )

Inseriamo id nei campi obbligatori e disabilitiamo nel pulsante per associarli a questo script. Puoi modificarne i nomi e la quantità aggiungendo/rimuovendo le righe var necessarie. Ma se li aggiungi o rimuovi, non dimenticare di modificare le condizioni nella riga if (name.length != 0 && email.length >= 6 && phone.length >= 10) ( .

Come funziona questa linea?

Tutto dipende dal numero di caratteri nel campo specificato, ad es. la sua lunghezza.

if (nome.lunghezza!= 0 - indica che il campo non deve essere vuoto. Leggi come - "se il numero di caratteri nel campo non è zero, allora ..."
&& - combina le condizioni (e)
email.length >= 6 — il numero di caratteri deve essere maggiore o uguale a 6. Perché sei? Ho indicato questo numero perché l'indirizzo postale minimo è di 6 caratteri. Controlliamo? @bk.ru - 6 caratteri.
phone.length >= 10 - maggiore o uguale a dieci caratteri. Perché 10 e non 11? Nel compilare questo campo il visitatore può indicare il proprio numero di telefono sia con +7 che con 8. Pertanto è meglio indicare 10.

È tutto. Collega il modulo, prova e utilizza.

Se avete domande scrivete nei commenti e non siate avari nel valutare l’articolo. Grazie in anticipo :)

Oggi il modulo di feedback può essere ovunque. Per attirare l'attenzione dei visitatori, avrai bisogno di un modulo che, quando un visitatore lo guarderà, avrà il desiderio di compilarlo.

In questo articolo imparerai come creare un modulo di contatto interamente in HTML5 e CSS3.

(Clicca sull'immagine per vedere il modulo a grandezza intera)

Con CSS3 puoi creare un'infinita varietà di moduli di feedback. Questo articolo spiega come creare un modulo di feedback sulla busta.

Nome: Email: Messaggio:

Abbiamo bisogno del wrapper del modulo e dei contenitori interni del modulo per applicare loro determinate regole di stile.

Invece di aggiungere classi a ciascun elemento del modulo, potresti voler utilizzare selettori di attributi, come input . Ma per il mio esempio, ho deciso di assicurarmi che il modulo non fluttuasse nel browser IE6. Se stai ignorando i browser più vecchi come IE6, sentiti libero di semplificare il codice HTML e CSS.

Utilizzo l'attributo for del tag label perché migliora l'usabilità. L'attributo for associa l'elemento label al campo del modulo corrispondente; Il valore dell'attributo è l'ID del campo.

HTML5

In HTML5, puoi aggiungere un attributo segnaposto ai campi del modulo.

attributo segnaposto: imposta il testo segnaposto. Il testo appare grigio nel campo modulo e scompare quando il campo viene focalizzato.

Contenitori

Utilizzando la proprietà box-shadow e i gradienti CSS3, creeremo un modulo di feedback a forma di busta. Di seguito puoi vedere lo stile CSS iniziale:

#form-wrapper ( larghezza: 700px; altezza: 400px; margine: 0 automatico; riempimento: 20px; posizione: relativa; bordo: 1px solido #ddd; colore di sfondo: #fff; immagine di sfondo: -moz-repeating-linear -gradient(135deg,#844049,#844049, #fff 50px, #fff 150px, #3e4996 100px, #3e4996, #fff 200px, #fff 300px); immagine di sfondo: -webkit-gradient(lineare, sinistra in alto, destra in basso, arresto colore(5%, #fff), arresto colore(5%, #fff), arresto colore(15%, #844049), arresto colore(15%, #fff), arresto colore( 25%, #fff), arresto colore (25%, #fff), arresto colore (35%, #3E4996), arresto colore (35%, #fff), arresto colore (45%, #fff) , arresto colore(45%, #fff), arresto colore(55%, #844049), arresto colore(55%, #fff), arresto colore(65%, #fff), arresto colore(65 %, #fff), arresto colore(75%, #3E4996), arresto colore(75%, #fff), arresto colore(85%, #fff), arresto colore(85%, #fff), color-stop(95%, #844049), color-stop(95%, #fff)); immagine di sfondo: -webkit-repeating-linear-gradient(135deg,#844049,#844049, #fff 50px, #fff 150px, #3e4996 100px, #3e4996, #fff 200px, #fff 300px); immagine di sfondo: -o-repeating-linear-gradient(135deg,#844049,#844049, #fff 50px, #fff 150px, #3e4996 100px , #3e4996, #fff 200px, #fff 300px); immagine di sfondo: -ms-repeating-linear-gradient(135deg,#844049,#844049, #fff 50px, #fff 150px, #3e4996 100px, #3e4996, #fff 200px, #fff 300px); immagine di sfondo: gradiente lineare ripetuto (135deg,#844049,#844049, #fff 50px, #fff 150px, #3e4996 100px, #3e4996, #fff 200px, #fff 300px); ) #form-wrapper:prima, #form-wrapper:dopo ( z-index: -1; posizione: assoluta; contenuto: ""; inferiore: 15px; sinistra: 10px; larghezza: 50%; superiore: 80%; max -larghezza: 300px; sfondo: rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7); -moz-box-shadow: 0 15px 10px rgba (0, 0, 0, 0.7); box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform: ruota(-3deg); -moz-transform: ruota(-3deg); -o-transform: ruota (-3 gradi); -ms-transform: ruota (-3 gradi); trasforma: ruota (-3 gradi); ) #form-wrapper:dopo ( -webkit-transform: ruota (3 gradi); -moz -transform: ruota (3 gradi); -o-transform: ruota (3 gradi); -ms-transform: ruota (3 gradi); trasforma: ruota (3 gradi); destra: 10px; sinistra: auto; )

Pulsante

Di seguito abbiamo dei bellissimi pulsanti CSS3 senza immagini, come probabilmente avrai intuito.

#form-wrapper .button ( float: destra; margine: 10px 0 0 0; imbottitura: 7px 15px; cursore: puntatore; colore: #fff; font: grassetto 13px Tahoma, Verdana, Arial; trasformazione testo: maiuscolo; overflow: visibile; /* correzione IE6/7 */ border: 0; background-color: #7089b3; background-image: -moz-linear-gradient(#a5b8da, #7089b3); background-image: -webkit-gradient(linear, in alto a sinistra, in basso a sinistra, da(#a5b8da), a(#7089b3)); immagine di sfondo: -webkit-linear-gradient(#a5b8da, #7089b3); immagine di sfondo: -o-linear-gradient(#a5b8da , #7089b3); immagine di sfondo: -ms-linear-gradient(#a5b8da, #7089b3); immagine di sfondo: linear-gradient(#a5b8da, #7089b3); filtro: progid:DXImageTransform.Microsoft.gradient(startColorStr= "#a5b8da", EndColorStr="#7089b3"); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; text-shadow: 0 1px 0 rgba(0,0, 0,.3); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7); box-ombra: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0 , 0, 0, 0,7); ) #form-wrapper .button:hover ( background-color: #a5b8da; background-image: -moz-linear-gradient(#7089b3, #a5b8da); background-image: -webkit-gradient(linear, left top, left in basso, da(#7089b3), a(#a5b8da)); immagine di sfondo: -webkit-linear-gradient(#7089b3, #a5b8da); immagine di sfondo: -o-linear-gradient(#7089b3, #a5b8da) ; immagine di sfondo: -ms-linear-gradient(#7089b3, #a5b8da); immagine di sfondo: linear-gradient(#7089b3, #a5b8da); filtro: progid:DXImageTransform.Microsoft.gradient(startColorStr="#7089b3" , EndColorStr="#a5b8da"); ) #form-wrapper .button:active ( sfondo: #64799e; posizione: relativa; superiore: 2px; -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inserito; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inserito; box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inserito; )

Aggiornamento

Di seguito sono riportate informazioni su come modificare il modulo di feedback per far funzionare il modulo.

Incolla lo script PHP http://jsfiddle.net/catalinred/3hLKP/ in un file, ad esempio sendemail.php.
Ovviamente dovrai sostituirlo [e-mail protetta] alla tua email (dove desideri ricevere i messaggi).
Il tuo codice HTML dovrà essere modificato in:

Quindi, stiamo completando la serie di lezioni sulla creazione di un sito Web da zero con design piatto. Lascia che ti ricordi che abbiamo progettato l'intestazione del sito web. On: una sezione con un'immagine sull'intero schermo. Ecco una gallery con i lavori portfolio. On: layout a tre colonne. E come fase finale, oggi stiamo realizzando il layout del modulo di feedback e del piè di pagina.

Questo è ciò che dovremmo ottenere.

Non mostrerò tutto il codice qui, è troppo lungo. Puoi vedere l'intero codice e il risultato finale su jsfiddle.

Il mio compito è mostrarti i principi del layout, la logica, per così dire, di come pensa un progettista di layout quando guarda un layout. Innanzitutto, suddivide mentalmente l'intero layout in grandi sezioni. Quindi ogni sezione all'interno è divisa in piccoli blocchi. Guarda lo screenshot qui sotto.

Il modulo di feedback stesso viene inserito in un tag div con la classe part_2_of_3 e occupa due terzi della larghezza del genitore.

Poi arriva il secondo blocco nel tag div con la classe part_1_of_3 . La larghezza che occupa è corrispondentemente un terzo del blocco genitore.

Negli stili CSS:

Contro(
blocco di visualizzazione;
galleggiante:sinistra;
margine: 3% 0 3% 1,5%;
}
.con:primo-figlio(
margine sinistro: 0; /* premendo il blocco con il form verso il bordo sinistro */
}
.parte_2_di_3 (
larghezza: 66%; /* larghezza del blocco con la forma */
}
.parte_1_di_3 (
larghezza: 32%; /* larghezza del blocco informazioni */
}
.cont-forma(
fondo imbottito: 25px; /* rientro inferiore dalla forma del blocco */
}
.cont-formato div(
imbottitura: 5px 0 15px;
}
input .cont-form, input .cont-form, area testo .cont-form(
larghezza: 42%; /* larghezza dei campi per l'inserimento di testo ed email */
imbottitura: 15px;
blocco di visualizzazione;
contorno: nessuno;
colore di sfondo: #fff; /* colore delle celle del modulo */
colore: #888282; /* colore del testo inserito nel modulo */
dimensione carattere: 0,8 em; /* dimensione del carattere del testo inserito nel modulo */
galleggiante:sinistra;
margine destro: 2em; /* rientro destro */

stile carattere: corsivo; /* inserisci il testo in corsivo */
bordo: 2px solido #cacaca; /* bordo delle celle del modulo */
}
.cont-form input(
margine destro: 0em; /* rientro destro */
}
.cont-form textarea( /* valori per l'area di testo del form */
imbottitura: 18px; /* tutti i campi nell'area di testo */
blocco di visualizzazione;
larghezza: 93%; /* larghezza della forma dell'area di testo */
altezza: 180px; /* altezza della forma dell'area di testo */
colore di sfondo: #fff; /* wdtn dello sfondo dell'area di testo */
contorno: nessuno;
colore: #888282; /* colore del testo inserito nell'area testo */
dimensione carattere: 0,8 em; /* dimensione del carattere dell'area di testo */
stile carattere: corsivo; /* corsivo per l'area di testo del modulo */
bordo:2px solido #cacaca;
margine inferiore: 2em;
}
.cont-form input (
famiglia di caratteri: Verdana, sans-serif;
dimensione carattere: 1em;
colore:#fff;
imbottitura: 0,7em 1,4em;
margine destro: 2%;
colore di sfondo: #a97b7b;
bordo:nessuno;
blocco di visualizzazione;
cursore: puntatore;
contorno: nessuno;
trasformazione del testo: maiuscolo; /* trasforma in maiuscolo */
galleggiante: giusto;
}
.comp_add(
dimensione carattere: 0,8 em;
colore:#525252;
altezza della linea: 1,8 em;
margine inferiore: 2%;
}
.comp_add a(
dimensione carattere: 1,1 em;
colore:#525252;
altezza della linea: 1,8 em;
margine inferiore: 2%;
}
.list2 li img(
margine superiore: 4px;
galleggiante:sinistra;
}
.list2 li .icona(
galleggiante:sinistra;
imbottitura sinistra: 1em;
}

Disposizione del seminterrato

Con la disposizione del seminterrato la situazione è molto più semplice. All'interno del tag footer c'è un blocco div con copyright e un collegamento.

1. Plugin per la creazione di moduli online “jFormer”

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

2. Modulo di registrazione passo passo utilizzando jQuery

Un modulo accurato con riempimento passo dopo passo. Di seguito è riportato un indicatore di completamento del modulo.

3. Modulo passo passo

Compilando il modulo in più passaggi e controllando che sia compilato correttamente.

4. Modulo di contatto per il sito

La verifica della correttezza delle informazioni inserite viene effettuata al volo prima dell'invio del messaggio tramite javascript.

5. Passaggio animato tra moduli utilizzando jQuery

Passaggio animato utilizzando jQuery tra il modulo di accesso al sito, il modulo di registrazione e il campo di recupero della password. Nella pagina demo, fai clic sul collegamento giallo per vedere l'effetto.

6. Modulo di feedback PHP per la partenza

Una soluzione simile può essere utilizzata per dare al visitatore l'opportunità 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 verifica della correttezza delle informazioni inserite.

8. Modulo di registrazione PHP in stile Facebook

Un bel modulo di registrazione implementato utilizzando CSS, PHP e jQuery.

9. Modulo di contatto jQuery “SheepIt”

È stata implementata la possibilità di aggiungere nuovi campi prima di inviare un messaggio.

10. Modulo di contatto AJAX fantasia

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

11. Sistema di autorizzazione/registrazione al sito 12. Modulo di invio dati

Con verifica del corretto riempimento.

13. Plugin jQuery "Contattabile".

Implementare un modulo di feedback in uscita per inviare rapidamente un messaggio.