Het feedbackformulier, of, op een andere manier, een van de belangrijkste elementen van een site. En natuurlijk, net als alle andere elementen van de gebruikersinterface, moet contact op de een of andere manier extern worden gestileerd en ingericht om de aandacht van gebruikers te trekken en communicatie aan te moedigen.
Ik bied u ter beoordeling een aantal opties aan voor de stijlen van feedbackformulieren, uitsluitend door middel van 3, zonder gebruik te maken van extra afbeeldingen in het ontwerp. Niets meer, alleen korte code snippets (snippets) voor contactformulieren, gemaakt in lichte en donkere kleuren.
1. Contactformulier in donkere kleuren
Afhankelijk van de kleur van de hoofdachtergrond van de pagina, zal de basiskleur van de achtergrond van het formulier zelf visueel veranderen. De grootte van het formulier is afhankelijk van de grootte van de container waarin het formulier zal worden geplaatst.
Html-formulierframe is standaard, de vereiste invoervelden en de knop "Verzenden", voor koppeling met CSS, elk element van het formulier krijgt een bepaalde klasse toegewezen, niets ingewikkelds, het zal niet moeilijk zijn om erachter te komen.
| < form> < input name= "name" placeholder= "Vul je naam in!" class = "naam" vereist />< input name= "emailaddress" placeholder= "Vul uw e-mail in!" class = "e-mail" type = "e-mail" vereist />< textarea rows= "4" cols= "50" name= "subject" placeholder= "Voer uw bericht in:" class = "bericht" vereist> < input name= "submit" class = "btn" type= "submit" value= "versturen" /> |
CSS
Ik zal niets schilderen, vooral niet in termen van stijlen, ik zal slechts één ding opmerken, in het ontwerp heb ik enkele CSS3-eigenschappen, lineair verloop, schaduweffect, licht afgeronde hoeken, enz. deze eigenschappen, maar in oudere versies van browsers zal het formulier er iets anders uitzien ((.
| / * Basisstijl van het formulier * / formulier (marge: 0 auto; max- breedte: 95%; opvulling: 30px 30px 6px 30px; border: 1px solid rgba (0, 0, 0, .2); - moz- border- radius: 5px; - webkit- border - radius: 5px; border-radius: 5px; - moz-background-clip: padding; - webkit-background-clip: padding-box; background-clip: padding-box; achtergrond: rgba (0, 0, 0, 0.5 ); - moz- box- shadow: 0 0 13px 3px rgba (0, 0, 0, .5); - webkit- box- shadow: 0 0 13px 3px rgba (0, 0, 0, .5); box- schaduw: 0 0 13px 3px rgba (0, 0, 0, .5); overloop: verborgen;) / * Berichtveld * / textarea (achtergrond: rgba (255, 255, 255, 0.4); breedte: 100%; hoogte: 110px; rand: 1px effen rgba (255, 255, 255, .6); - moz- grens- straal: 4px; - webkit- border-radius: 4px; border-radius: 4px; - moz- background- clip: padding; - webkit- background- clip: padding- box; background- clip: padding- box; display: block; fontfamilie: "Open Sans", schreefloos; lettergrootte: 18px; lettergewicht: 300; kleur: #fff; opvulling links: 25px; opvulling rechts: 20px; opvulling boven: 12px; marge onder: 20px; overflow: hidden ;) / * Invoervelden * / input (breedte: 100%; hoogte: 48px; border: 1px solid rgba (255, 255, 255, .4); - moz- border- radius: 4px; - webkit- border-radius: 4px; border-radius: 4px; - moz-background-clip: padding; - webkit-background-clip: padding-box; background-clip: padding-box; display: block; font-familie: "Open Sans ", schreefloos; lettergrootte: 18px; font- gewicht hoogte: 300; kleur: #fff; opvulling - links: 20px; opvulling - rechts: 20px; marge-onder: 20px; ) invoer [type = indienen] (cursor: aanwijzer;) invoer. naam (achtergrond: rgba (255, 255, 255, 0.4); padding- left: 25px;) invoer. e-mail (achtergrond: rgba (255, 255, 255, 0.4); padding- links: 25px;) invoer. bericht (achtergrond: rgba (255, 255, 255, 0.4); padding- left: 25px;) :: - webkit- input- placeholder (kleur: #fff;): - moz- placeholder (kleur: #fff;): : - moz- placeholder (kleur: #fff;): - ms- input- placeholder (kleur: #fff;) input: focus, textarea: focus (achtergrondkleur: rgba (0, 0, 0, 0.2); - moz- box- shadow: 0 0 5px 1px rgba (255, 255, 255, .5); - webkit- box- shadow: 0 0 5px 1px rgba (255, 255, 255, .5); box- shadow: 0 0 5px 1px rgba (255, 255, 255, .5); overloop: verborgen;) / * Stijlen voor de verzendknop * / ... btn (breedte: 138px; hoogte: 44px; - moz- grens- straal: 4px; - webkit- grens- straal: 4px; grens- straal: 4px; zwevend: rechts; rand: 1px vast # 253737; achtergrond: # 416b68; achtergrond: - webkit- verloop (lineair, links boven, links onder, van (# 6da5a3), tot (# 416b68)); achtergrond: - webkit- lineair- verloop (boven, # 6da5a3, # 416b68); achtergrond: - moz - lineair- verloop (top, # 6da5a3, # 416b68); achtergrond: - ms- lineair- verloop (top, # 6da5a3, # 416b68); achtergrond: - o- lineair- verloop (top, # 6da5a3, # 416b68); achtergrond- afbeelding: - ms- lineair- verloop (top, # 6da5a3 0%, # 416b68 100%); opvulling: 10. 5px 21px; - webkit- grens- straal: 6px; - moz- grens- straal: 6px; rand - straal: 6px; - webkit-box-shadow: rgba (255, 255, 255, 0.1) 0 1px 0, inzet rgba (255, 255, 255, 0.7) 0 1px 0; - moz-box-shadow: rgba ( 255, 255, 255, 0.1) 0 1px 0, inzet rgba (255, 255, 255, 0.7) 0 1px 0; box-schaduw: rgba (255, 255, 255 , 0.1) 0 1px 0, inzet rgba (255, 255, 255, 0.7) 0 1px 0; tekst-schaduw: # 333333 0 1px 0; kleur: # e1e1e1; ). btn: hover (rand: 1px effen # 253737; tekst-schaduw: # 333333 0 1px 0; achtergrond: # 416b68; achtergrond: - webkit- verloop (lineair, links boven, links onder, van (# 77b2b0), tot (# 416b68)); achtergrond: - webkit- lineair- verloop (top, # 77b2b0, # 416b68); achtergrond: - moz- lineair- verloop (top, # 77b2b0, # 416b68); achtergrond: - ms- lineair- verloop (top , # 77b2b0, # 416b68); achtergrond: - o- lineair- gradiënt (top, # 77b2b0, # 416b68); achtergrond- afbeelding: - ms- lineair- gradiënt (top, # 77b2b0 0%, # 416b68 100%); kleur: #fff ;). btn: active (margin-top: 1px; text-shadow: # 333333 0 -1px 0; border: 1px solid # 333333; background: # ffCC00; background: - webkit-gradient (lineair, left top, left bottom, from ( # ffCC00), tot (# ff6600)); achtergrond: - webkit- lineair- verloop (top, # ffcc00, # ff6600); achtergrond: - moz- lineair- verloop (top, # ffcc00, # ff6600); achtergrond: - ms- lineair- verloop (top, # ffcc00, # ff6600); achtergrond: - o- lineair- verloop (top, # ffcc00, # ff6600); achtergrond- afbeelding: - ms- lineair- verloop (top, # ffcc00 0% , # ff6600 100%); kleur: #fff; - webkit-box- schaduw: rgba (255, 255, 255, 0) 0 1px 0, inzet rgba (255, 255, 255, 0.7) 0 1px 0; - moz - box-schaduw: rgba (255, 255, 255, 0) 0 1px 0, inzet rgba (255, 255, 255, 0.7) 0 1px 0; box-schaduw: rgba (255, 255, 255, 0) 0 1px 0, inzet rgba (255, 255, 255, 0. 7) 0 1px 0; overzicht: geen; ) |
/ * Basisstijl van het formulier * / formulier (marge: 0 auto; max-width: 95%; padding: 30px 30px 6px 30px; border: 1px solid rgba (0,0,0, .2); -moz-border -radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; achtergrond: rgba (0, 0, 0, 0.5); -moz-box-shadow: 0 0 13px 3px rgba (0,0,0, .5); -webkit-box-shadow: 0 0 13px 3px rgba (0,0 ,0 , .5); box-shadow: 0 0 13px 3px rgba (0,0,0, .5); overflow: hidden;) / * Berichtveld * / textarea (achtergrond: rgba (255, 255, 255, 0.4); breedte: 100%; hoogte: 110px; rand: 1px effen rgba (255,255,255, .6); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz -background -clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; display: block; font-familie: "Open Sans", schreefloos; lettergrootte: 18px; lettertype -gewicht: 300; kleur: #fff; padding-links: 25px; padding-rechts: 20px; padding-top: 12px; margin-bottom : 20px; overloop verborgen; ) / * Invoervelden * / invoer (breedte: 100%; hoogte: 48px; rand: 1px solid rgba (255,255,255, .4); -moz-border-radius: 4px; -webkit-border-radius: 4px; border- radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; display: block; font-familie: "Open Sans", schreefloos; lettertype -size: 18px; font-weight: 300; color: #fff; padding-left: 20px; padding-right: 20px; margin-bottom: 20px;) input (cursor: pointer;) input.name (achtergrond: rgba ( 255, 255, 255, 0.4); padding-left: 25px;) input.email (achtergrond: rgba (255, 255, 255, 0.4); padding-left: 25px;) input.message (achtergrond: rgba (255, 255, 255, 0.4); padding-left: 25px;) :: - webkit-input-placeholder (kleur: #fff;): -moz-placeholder (kleur: #fff;) :: - moz-placeholder (kleur: #fff;): -ms-input-placeholder (kleur: #fff;) input: focus, textarea: focus (achtergrondkleur: rgba (0, 0, 0, 0.2); -moz-box-shadow: 0 0 5px 1px rgba (255,255,255, .5); -webkit-box-schaduw: 0 0 5px 1px rgba (255,255,255, .5); box-schaduw: 0 0 5px 1px rgba (255,255,255, .5); overloop verborgen; ) / * Stijlen voor de verzendknop * / .btn (breedte: 138px; hoogte: 44px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; float: rechts; border : 1px effen # 253737; achtergrond: # 416b68; achtergrond: -webkit-gradient (lineair, links boven, links onder, van (# 6da5a3), tot (# 416b68)); achtergrond: -webkit-linear-gradient (top, # 6da5a3, # 416b68); achtergrond: -moz-lineair-gradiënt (top, # 6da5a3, # 416b68); achtergrond: -ms-linear-gradient (top, # 6da5a3, # 416b68); achtergrond: -o-lineair- verloop (top, # 6da5a3, # 416b68); achtergrondafbeelding: -ms-linear-gradient (top, # 6da5a3 0%, # 416b68 100%); opvulling: 10. 5px 21px; -webkit-grens-radius: 6px; -moz-grens-radius: 6px; grensradius: 6px; -webkit-box-schaduw: rgba (255,255,255,0.1) 0 1px 0, inzet rgba (255,255,255,0.7) 0 1px 0; -moz-box-schaduw: rgba (255,255,255,0.1) 0 1px 0, inzet rgba (255,255,255,0.7) 0 1px 0; box-schaduw: rgba (255,255,255,0.1) 0 1px 0, inzet rgba (255,255,255,0.7) 0 1px 0; tekstschaduw: # 333333 0 1px 0; kleur: # e1e1e1; ) .btn: hover (rand: 1px solide # 253737; tekst-schaduw: # 333333 0 1px 0; achtergrond: # 416b68; achtergrond: -webkit-gradient (lineair, links boven, links onder, van (# 77b2b0), naar (# 416b68)); achtergrond: -webkit-lineair verloop (top, # 77b2b0, # 416b68); achtergrond: -moz-lineair verloop (top, # 77b2b0, # 416b68); achtergrond: -ms-lineair verloop (top, # 77b2b0, # 416b68); achtergrond: -o-lineair-gradiënt (top, # 77b2b0, # 416b68); achtergrond-afbeelding: -ms-linear-gradient (top, # 77b2b0 0%, # 416b68 100% ); kleur: #fff;) .btn: actief (marge-top: 1px; tekst-schaduw: # 333333 0 -1px 0; rand: 1px vast # 333333; achtergrond: # ffCC00; achtergrond: -webkit-gradiënt (lineair , linksboven, linksonder, van (# ffCC00), tot (# ff6600)); achtergrond: -webkit-lineair verloop (top, # ffcc00, # ff6600); achtergrond: -moz-lineair verloop (boven, # ffcc00, # ff6600); achtergrond: -ms-lineair verloop (top, # ffcc00, # ff6600); achtergrond: -o-lineair verloop (top, # ffcc00, # ff6600); achtergrondafbeelding: -ms-lineair -gradiënt (boven, # ffcc00 0%, #ff 6600 100%); kleur: #fff; -webkit-box-schaduw: rgba (255,255,255,0) 0 1px 0, inzet rgba (255,255,255,0.7) 0 1px 0; -moz-box-shadow: rgba (255,255,255,0) 0 1px 0, inzet rgba (255,255,255,0.7) 0 1px 0; box-schaduw: rgba (255,255,255,0) 0 1px 0, inzet rgba (255,255,255,0.7) 0 1px 0; overzicht: geen; )
Misschien is dit interessant voor u:
2. Contactformulier in lichte kleuren
De tweede versie van het ontwerp van het feedbackformulier wordt gepresenteerd in lichte kleuren, de afmetingen van het formulier (breedte, hoogte), zoals in de eerste versie, zijn niet vast en passen gemakkelijk in de afmetingen van de container waar dit formulier zal worden gevestigd.
HTML
Net als in de eerste versie is de Html-structuur van het contactformulier standaard, formulierelementen met bepaalde klassen die overeenkomen met de klassen in CSS.
| < form> < input name= "name" placeholder= "Vul je naam in!" class = "tekstvak" vereist />< input name= "emailaddress" placeholder= "Vul uw e-mail in!" class = "textbox" type = "e-mail" vereist />< textarea rows= "4" cols= "50" name= "subject" placeholder= "Voer uw bericht in:" class = "bericht" vereist> < input name= "submit" class = "button" type= "submit" value= "versturen" /> |
CSS
Bij het vormen van de basisformaten van formulieren en interne elementen, heb ik percentagewaarden voor de breedte gebruikt, waardoor het formulier zich gemakkelijk aanpast aan de grootte van de container waarin het zich zal bevinden. Het kleurenschema van de knop "Verzenden", de grootte en locatie, kan eenvoudig worden gewijzigd, het volstaat om met bepaalde waarden te experimenteren.
| / * Basisvormstijlen * / formulier (marge: 0 auto; max- breedte: 95%; box-sizing: border-box; padding: 40px; border-radius: 5px; achtergrond: RGBA (255, 255, 255, 1); - webkit-box- schaduw: 0px 0px 15px 0px rgba (0, 0, 0, .45); box-schaduw: 0px 0px 15px 0px rgba (0, 0, 0, .45);) / * Stijlen van invoervelden * /... tekstvak (hoogte: 50px; breedte: 100%; randradius: 3px; rand: rgba (0, 0, 0, .3) 2px vast; vakgrootte: grensvak; lettertypefamilie: "Open Sans", schreefloos; lettergrootte: 18px; opvulling: 10px; margin-bottom : 30px ; } . bericht : focus , . tekstveld : focus { schetsen : geen ; grens : rgba (24 , 149 , 215 , 1 ) 2px vast ; kleur : rgba (24 , 149 , 215 , 1 ) ; } / * Stijlen van het tekstvak * / . bericht { achtergrond : rgba (255 , 255 , 255 , 0.4 ) ; breedte : 100 %; hoogte : 120px ; grens : rgba (0 , 0 , 0 , .3 ) 2px vast ; doos - maatvoering : grens - doos ; - moz - grens - straal : 3px ; lettertype - maat : 18px ; lettertype - familie : "Open zonder", zonder - schreef ; - webkit - grens - straal : 3px ; grens - straal : 3px ; Scherm : blok ; opvulling : 10px ; marge - onderkant : 30px ; overloop : verborgen ; } / * Basis knopstijlen * / . knop { hoogte : 50px ; breedte : 100 %; grens - straal : 3px ; grens : rgba (0 , 0 , 0 , .3 ) 0px vast ; doos - maatvoering : grens - doos ; opvulling : 10px ; achtergrond : # 90c843; kleur : #FFF; lettertype - familie : "Open zonder", zonder - schreef ; lettertype - gewicht : 400 ; lettertype - maat : 16pt ; overgang : achtergrond . 4s ; cursor : wijzer ; } / * Verander de achtergrond van de knop bij hover * / . knop : zweven { achtergrond : # 80b438;} |
/ * Basisformulierstijlen * / formulier (marge: 0 auto; max-width: 95%; box-sizing: border-box; opvulling: 40px; border-radius: 5px; achtergrond: RGBA (255,255,255,1); -webkit -box-shadow: 0px 0px 15px 0px rgba (0, 0, 0, .45); box-shadow: 0px 0px 15px 0px rgba (0, 0, 0, .45);) / * Invoerveldstijlen * /. textbox (hoogte: 50px; breedte: 100%; border-radius: 3px; border: rgba (0,0,0, .3) 2px solid; box-sizing: border-box; font-familie: "Open Sans", schreefloos; font-size: 18px; padding: 10px; margin-bottom: 30px;) .message: focus, .textbox: focus (outline: none; border: rgba (24,149,215,1) 2px solid; kleur: rgba ( 24,149,215,1);) / * Tekstvakstijlen * / .message (achtergrond: rgba (255, 255, 255, 0.4); breedte: 100%; hoogte: 120px; rand: rgba (0,0,0, .3) 2px vol; box-sizing: border-box; -moz-border-radius: 3px; font-size: 18px; font-family: "Open Sans", schreefloos; -webkit-border-radius: 3px; border - radius: 3px; display: block; padding: 10px; margin-bottom: 30px; overflow: hidden;) / * Basisboekstijlen opki * / .button (hoogte: 50px; breedte: 100%; grensradius: 3px; rand: rgba (0,0,0, .3) 0px solide; box-sizing: border-box; opvulling: 10px; achtergrond: # 90c843; kleur: #FFF; font-familie: "Open Sans", schreefloos; lettergewicht: 400; lettergrootte: 16pt; overgang: achtergrond .4s; cursor: aanwijzer; ) / * Verander de achtergrond van de knop bij hover * / .button: hover (achtergrond: # 80b438;)
Er zijn veel ontwerpopties voor contactformulieren, het belangrijkste is om een beetje fantasie en basiskennis van CSS te hebben. Op de pagina's van mijn blog vind je andere en voorbeelden van de stijl van feedbackformulieren.
Voor degenen die bijzonder onoplettend zijn, wil ik voor de zoveelste keer verduidelijken: de formulieren die in het artikel worden gepresenteerd, zijn slechts een externe shell, zodat de formulieren daadwerkelijk hun functies vervullen, je moet er een scripthandler aan koppelen, die zijn volledig verspreid op internet, dus overtuigend schrijf alsjeblieft niet in de opmerkingen dat de formulieren niet werken, enz., Alles werkt goed, je moet alleen begrijpen wat, waar en waarom))).
Met alle respect, André.
Een van de meest voorkomende taken in de praktijk is de implementatie van het feedbackformulier. Je schrijft de HTML-code, versiert deze in CSS, maakt een PHP-script dat de gegevens die van de gebruiker zijn ontvangen zou verwerken en naar onze e-mail zou sturen, een JS-script zou schrijven dat het formulier zou controleren op de geschiktheid van de invoergegevens, onze geesteskind van spam, zodat onze mailbox niet instortte door botaanvallen.
Alle bovenstaande punten zullen in onze beoordeling worden overwogen en in detail worden becommentarieerd.
Laten we beginnen met het maken van een feedbackformulier:
HTML
Allereerst schrijven we HTML-code, het stelt de velden in die de gebruiker zal invullen. Deze zullen in de toekomst worden uitgegeven. De formuliercode ziet er als volgt uit:
< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" >Naam: < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" >Telefoon: < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" >E-mailadres: < input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" >Bericht: < textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "versturen" />
En visueel ziet het er nu zo uit:
Ik ben het ermee eens, tot nu toe is alles lelijk en niets is duidelijk, maar we zijn net begonnen.
Overweeg de bovenstaande code in detail:
< form method= "post" action= "mail.php" > …
om een formulier te maken, moet u de formuliertag gebruiken. Hij is het die het begin en einde van het formulier voor de code-interpreter bepaalt. Het heeft, zoals elke tag, een hele reeks attributen, maar er zijn er maar twee nodig om het formulier te laten werken, dit zijn methode (de methode om een verzoek naar de server te sturen, voor formulieren gebruiken ze post als standaard) en actie ( specificeert het pad naar de bestandshandler van het formulier, precies in dit bestand zal een script in PHP bevatten, dat vervolgens de waarden die door de gebruiker zijn ingevoerd naar onze mail zal sturen, in ons geval zien we dat dit bestand mail heet .php en het ligt in dezelfde map van de site als de pagina die we overwegen).< input maxlength= "30" type= "text" name= "name" />
Vervolgens hebben we ingangen. Dit zijn de daadwerkelijke formuliervelden waarin gebruikers de informatie invoeren die we nodig hebben (type = "tekst" betekent dat het tekst zal zijn). Het kenmerk maxlength geeft aan hoeveel tekens een gebruiker in een bepaald formulierveld kan invoeren. Het belangrijkste attribuut is naam - het specificeert de naam van een bepaald veld. Het is door deze namen dat in de toekomst het PHP-script de informatie zal verwerken die erin wordt ingevoerd. Indien gewenst kunt u ook het placeholder-attribuut instellen, dat tekst in het veld weergeeft die verdwijnt wanneer de cursor erin wordt geplaatst. Een van de problemen met de tijdelijke aanduiding is dat deze door sommige oudere browsers niet wordt ondersteund.< label for = "name" >Naam:
Gebruikt voor het geval we tijdelijke aanduidingen hebben verlaten. De gebruikelijke handtekening van een veld, het for-attribuut vertelt bij welk specifiek veld deze handtekening hoort. De waarde specificeert de naam van het interessegebied.< textarea rows= "7" cols= "50" name= "message" >
Net zoals de invoer bedoeld is voor de gebruiker om informatie in te voeren, is dit keer het veld aangescherpt voor lange berichten. Rijen geeft de grootte van het veld in rijen aan, cols in tekens. Over het algemeen bepalen ze de hoogte en breedte van onze doos.< input type= "submit" value= "versturen" />
Type = "verzenden" vertelt ons dat dit een knop is om een formulier in te dienen, en waarde bepaalt de tekst die binnen deze knop komt te staan.< div class = "right" >
alleen gebruikt voor verdere visuele vormgeving van het formulier.
CSS
Om ons feedbackformulier er representatief uit te laten zien, moet u het ordenen. Om het volgende resultaat te krijgen:
We gebruikten de gegeven code:
formulier (achtergrond: # f4f5f7; opvulling: 20px;) formulier. links, vorm. rechts (display: inline-block; vertical-align: top; width: 458px;) formulier. rechts (opvulling- links: 20px;) label (weergave: blok; lettergrootte: 18px; tekst- uitlijning: midden; marge: 10px 0px 0px 0px;) invoer, tekstgebied (rand: 1px vast # 82858D; opvulling: 10px; lettergrootte: 16px; breedte: 436px;) tekstgebied (hoogte: 98px; marge-bodem: 32px;) invoer [type = "submit"] (breedte: 200px; zwevend: rechts; rand: geen; achtergrond: # 595B5F; kleur: #fff; teksttransformatie: hoofdletters;)
Ik zie het nut er niet van in om de CSS in detail te beschrijven, ik zal uw aandacht alleen vestigen op de belangrijkste punten:
- Je moet niet voor elke tag in het formulier een ontwerp schrijven. Probeer je selectors zo te bouwen dat je alle elementen die je nodig hebt kunt stylen met een paar regels code.
- Gebruik geen extra tags per type voor regeleinden en inspringen < br>, < p> enzovoort, CSS doet geweldig werk met het display: blokeigenschap en marge met opvulling. Meer over waarom niet gebruiken < br> in de lay-out kun je over het algemeen de tag br in het artikel lezen, maar is het echt nodig? ...
- Gebruik geen lay-outs in tabelvorm. Dit is in strijd met de semantiek van deze tag, en zoekmachines houden van semantische code. Om de visuele structuur van het document te vormen, hebben we alleen de div-tags nodig, en de display: inline-block (rangschikt de blokken in een rij) en vertical-align: top (voorkomt dat ze over het scherm verspreid worden) eigenschappenset door ze in CSS, stel ze de gewenste hoogte in en voila, niets meer en alles staat zoals we het nodig hebben.
Voor degenen die tijd willen besparen op het ontwerpen van websites, kan ik je aanraden om CSS-frameworks te gebruiken bij het maken van websites, vooral zelfgeschreven. Mijn keuze voor dit abonnement is Twitter Bootstrap. U kunt een les bekijken over het ontwerpen van formulieren ermee.
PHP
Welnu, nu is het tijd om ons formulier werkbaar te maken.
We gaan naar de hoofdmap van onze site en maken daar een mail.php-bestand aan, waarnaar we eerder het pad hebben aangegeven in het actieattribuut van de formuliertag.
Uiteindelijk zal zijn code er als volgt uitzien:
Zijn nummer is ". $ Telefoon."
Zijn mail: ". $ Mail. "
Zijn boodschap: "... $ bericht,); echo "Je bericht is succesvol verzonden!
U ontvangt spoedig een antwoord.
$ terug "; Uitgang; ) else (echo; exit ;)?>
De bespreking van het HTML- en CSS-gedeelte van dit document kan worden overgeslagen. In de kern is dit een gewone pagina van de site, die u naar wens en behoefte kunt ontwerpen. Laten we eens kijken naar het belangrijkste onderdeel ervan - het PHP-script voor het verwerken van het formulier:
$ terug = "
\ "javascript: history.back () \"> Ga terug
" ;Met deze regel creëren we een link om terug te keren naar de vorige pagina. Omdat we niet van tevoren weten vanaf welke pagina de gebruiker op deze pagina komt, gebeurt dit met een kleine JS-functie. In de toekomst zullen we gewoon naar deze variabele verwijzen om deze weer te geven op de plaatsen die we nodig hebben.
if (! leeg ($ _POST ["naam"]) en! leeg ($ _POST ["telefoon"]) en! leeg ($ _POST ["mail"]) en! leeg ($ _POST ["bericht"])) ( // binnenste deel van de handler) anders (echo "Vul alle velden in om uw bericht te verzenden! $ Terug"; Uitgang; )
Hier hechten we de controle van het formulier op de volheid van de velden. Zoals je misschien al geraden hebt, schrijven we in het $ _POST ["name"]-gedeelte, tussen aanhalingstekens, de waarde van het name-attribuut van onze invoer.
Als alle velden zijn ingevuld, begint het script met het verwerken van gegevens in het interne gedeelte, als ten minste één veld niet is ingevuld, wordt er een bericht op het scherm van de gebruiker weergegeven met het verzoek om alle velden van het formulier echo "Om een bericht te verzenden, vul alle velden in! $ Terug" en een link om terug te keren naar de vorige pagina die we op de allereerste regel hebben gemaakt.
Vervolgens voegen we in het binnenste deel van de formulierhandler in:
$ naam = trim (strip_tags ($ _POST ["naam"])); $ telefoon = trim (strip_tags ($ _POST ["telefoon"])); $ mail = trim (strip_tags ($ _POST ["mail"])); $ bericht = trim (strip_tags ($ _POST ["bericht"]));
We hebben dus de gebruikersinvoer van html-tags en extra spaties gewist. Hierdoor kunnen we onszelf beschermen tegen het ontvangen van kwaadaardige code in berichten die naar ons worden verzonden.
De controles kunnen ingewikkeld zijn, maar dit is al op uw verzoek. We hebben de minimale beveiliging al aan de serverzijde geïnstalleerd. Verder zullen we aan de klantzijde doen met JS.
Ik raad niet aan om formulierbeveiliging aan de serverkant volledig te verlaten ten gunste van JS, omdat, hoewel het uiterst zeldzaam is, er unieke zijn waarbij JS in de browser is uitgeschakeld.
Voeg na het opschonen van de tags het verzenden van een bericht toe:
post ( "[email protected]",
"Brief van uw_site_adres", "Ik heb je geschreven:" $ naam. "
Zijn nummer is ". $ Telefoon."
Zijn mail: ". $ Mail. "
Zijn boodschap: "... $ bericht, "Inhoudstype: tekst / html; charset = windows-1251")
;
Het is deze lijn die zich bezighoudt met het vormen en verzenden van een bericht naar ons. Het wordt als volgt ingevuld:
- "[email protected]" - plaats uw e-mail hier tussen de aanhalingstekens
- "Brief van uw_site_adres" is het onderwerp van het bericht dat in de e-mail zal aankomen. Je kunt hier alles schrijven.
- "Ik schreef je:". $ Naam. " < br /> Zijn nummer is ". $ Telefoon." < br /> Zijn post: ". $ Mail." < br /> Het bericht: ". $ Bericht - we vormen de tekst van het bericht zelf. $ Naam - we voegen de informatie in die door de gebruiker is ingevuld door te verwijzen naar de velden uit de vorige stap, tussen aanhalingstekens beschrijven we wat dit veld betekent, met de label < br /> we maken een regeleinde zodat het bericht als geheel leesbaar is.
- Inhoudstype: tekst / html; charset = windows-1251 - aan het einde is er een expliciete indicatie van het gegevenstype dat in het bericht wordt verzonden en de codering ervan.
BELANGRIJK!
De codering gespecificeerd in de "kop" van het document ( < meta http- equiv= "Content-Type" content= "tekst / html; tekenset = windows-1251" /> ), de codering van het bericht Inhoudstype: tekst / html; charset = windows-1251 en, in het algemeen, de codering van het PHP-bestand moet overeenkomen, anders zullen berichten die per e-mail worden ontvangen "krakozyabry" weergeven in plaats van Russisch of Engels brieven.
Velen geven niet expliciet de codering aan van het bericht dat wordt verzonden, maar op sommige e-mailclients kan dit in de toekomst problemen veroorzaken (onleesbare brieven komen naar de e-mail), dus ik raad aan om het allemaal hetzelfde te specificeren.
Het formulier controleren op de juistheid van de ingevulde gegevens
Om ervoor te zorgen dat gebruikers de velden niet door onoplettendheid missen en alles correct invullen, is het de moeite waard om de ingevoerde gegevens te controleren.
Dit kan zowel in PHP aan de serverzijde als in JS aan de clientzijde. Ik gebruik de tweede optie, omdat een persoon op deze manier onmiddellijk kan achterhalen wat hij verkeerd heeft gedaan en de fout kan corrigeren zonder extra overgangen door de pagina's te maken.
Voeg de scriptcode in hetzelfde bestand in waar het HTML-gedeelte van het formulier zich bevindt. Voor ons geval ziet het er als volgt uit:
< script>function checkForm (form) (var name = form. name. value; var n = name. match (/ ^ [A- Za- zA- Ya- z] * [A- Za- zA- Ya- z] + $ / ); als (! n) (waarschuwing ( "De naam is onjuist ingevoerd, corrigeer de fout."); onwaar retourneren; ) var telefoon = formulier. telefoon. waarde; var p = telefoon. overeenkomen (/ ^ [0 - 9 +] [0 - 9 -] * [0 - 9 -] + $ /); als (! p) (waarschuwing ( "Telefoon verkeerd ingevoerd"); onwaar retourneren; ) var mail = formulier. mail. waarde; var m = e-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] + $ /); als (! m) (waarschuwing ( "E-mailadres verkeerd ingevoerd, corrigeer de fout"); onwaar retourneren; ) retourneer waar; )
Nou, nu de gebruikelijke ontleding:
Voor, zodat wanneer u op de verzendknop van het formulier klikt, we het hebben gecontroleerd we hangen de lancering van ons script op de formuliertag:
< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >
Nu nemen we punt voor punt de samenstelling van de cheque:
Zoals u kunt zien, wordt voor elk van onze velden zo'n minicheque geschreven. Ik heb de controle voor één veld in de schermafbeelding gemarkeerd met een rood vierkant, voor andere velden heeft het een vergelijkbare structuur en als het nodig is om een veld toe te voegen of te verwijderen, kun je dat nu eenvoudig doen.
Hallo jongens. Seryoga neemt contact op. Ik weet dat ik al heel lang niet meer heb geschreven - zaken, zaken ... En nu, om eerlijk te zijn, is er absoluut geen tijd. En we zullen de vorm niet volgens mijn les maken, maar volgens de lessen van mijn vriend - Krotova Romana.
Maak een feedbackformulier voor de site we zullen consequent zijn. Daarom wordt dit artikel opgesplitst in 3 lessen.
We zetten het gewoon in HTML en maken een PHP-handler voor het verzenden van e-mails. Alles zal consistent zijn, van het begin tot het resultaat. Zodat u alles begrijpt en de benodigde velden zelf kunt insluiten.
Roma laat je zien hoe je Ajax kunt laden. Dat wil zeggen, gegevens van het formulier verzenden zonder de pagina opnieuw te laden. Wat, ziet u, erg handig en modern is.
Nou, in de derde (de les wordt voorbereid - later volgt hier een link), zullen we een validatiecontrole inline uitvoeren. Niet via een browser, maar met behulp van speciale scripts.
Video 1. Een feedbackformulier voor de site maken.
Opletten! Om het formulier te laten werken, moet je hosting PHP ondersteunen.
Als u vragen heeft over onduidelijke punten bij het schrijven van een formulier voor het verzenden van brieven, aarzel dan niet om ze in de opmerkingen te stellen.
Code uit de les over het maken van een feedbackformulier
Dit is wat er in het bestand index.php is beland
Ik herinner je eraan wat er in zit eenvoudig feedbackformulier... Zonder registratie en andere toeters en bellen. Om u niet te belasten met onnodige informatie.
Inhoud van bestand submit.php:
Hier wordt een basiscontrole van het formulier uitgevoerd om geen lege berichten te versturen. Als alles "goed" is, wordt de brief verzonden. En er is een doorverwijzing naar de meldingspagina over het succesvol verzenden van de brief.
If (! Leeg ($ _ POST ["naam"]) AND! Leeg ($ _ POST ["e-mail"]) AND! Leeg ($ _ POST ["bericht"])) ($ headers = "Van: Roman Krotov ." Antwoorden op: [e-mail beveiligd]"." X-Mailer: PHP / ". Phpversion (); $ theme =" Nieuw bericht van site "; $ letter =" Berichtdetails: "; $ letter. =" "; $ Letter. =" Naam: ". $ _POST ["naam"]; $ letter. = "E-mail:". $ _ POST ["e-mail"]; $ letter. = "Telefoon:". $ _ POST ["telefoon"]; $ letter. = "Bericht :" . $ _ POST ["bericht"]; if (mail (" [e-mail beveiligd]", $ thema, $ letter, $ headers)) (header (" Locatie: /testform/thankyou.php ");) else (header (" Locatie: / testform ");)) else (header (" Locatie: / testformulier ");)
Nou, ik zie geen reden om de meldingspagina zelf hier te plaatsen. Er is de basisstructuur van een HTML-document en slechts één regel tekst.
Feedbackformulier voor de site die ik je laat zien, is gebaseerd op het gebruik van Ajax-technologie. Maar maak je geen zorgen, je hoeft dit niet te weten, alles is klaar, je hoeft alleen dit formulier te installeren en het voor jezelf aan te passen!
Jongens - het script is al lang achterhaald. Iemand werkt, iemand niet. En ik ben te lui om erachter te komen en nog meer om te updaten. Test daarom naar eigen inzicht.
PHP-feedbackformulier met verzenden naar e-mail
Dit feedbackformulier naar de site op zich erg functioneel, er zijn meerdere plug-ins aan verbonden die een aantrekkelijk uiterlijk creëren en de geldigheid (lees juistheid) van de ingevoerde gegevens controleren. Deze plug-ins werken op de groten en machtigen! En ze heten zo:
1. JQTransform- een plug-in waarmee u ons feedbackformulier mooi kunt maken!
2. formulierValidator- en deze plug-in controleert het contactformulier op de juistheid van de ingevoerde informatie en geeft in dat geval tooltips weer!
Voor het volwaardige werk van dit formulier wordt de klasse PHPMailer gebruikt. Beschouwd als een van de beste!
Een opmerking voor de slimsten:
Het feedbackformulier voor de site kan in HTML worden gemaakt! Maar het begint pas te werken met PHP! En niets anders!
Dit ben ik voor degenen die op zoek zijn naar een feedbackformulier alleen in HTML. Je zult het doen, maar het zal niet werken!
Daarom moet die van jou PHP ondersteunen en voor dit contactformulier moet PHP minimaal versie 5 zijn. Ik hoop dat ik het duidelijk maak? Bovendien ondersteunt nu elke normale hosting deze voorwaarden!
Ik heb dit feedbackformulier op de website www.tutorialzine.com opgegraven, de link leidt rechtstreeks naar de originele pagina, d.w.z. site van de auteur van dit formulier!
Alles is in het Engels, dus Sasha en ik moesten een beetje sleutelen om dit contactformulier en de plug-ins zelf die ermee verbonden zijn te russificeren.
Om eerlijk te zijn, we hebben twee dagen met dit "formulier" doorgebracht, terwijl verschillende stijlen begonnen te verschijnen, en ik wilde het onvoltooide feedbackformulier niet plaatsen, des te mooier! Dus als je een fan bent van alles zelf doen, en de gedachte past in je slimste hoofd - om deze vorm zelf te russificeren, zal ik een paar tips geven, omdat je niet beperkt bent tot het eenvoudig vertalen van zinnen:
1. Dit feedbackformulier is op maat gemaakt voor de bourgeoisie en van daaruit gedownload, dus het stuurt je in plaats van normale Russische symbolen - krakerig. Begrijp de codering. Hoe dan ook, alle "zegels" zullen hiermee worden geassocieerd!
2. Het validatiescript begrijpt onze brieven in eerste instantie niet, dus ze zullen daar moeten worden geschreven!
3. Zelfs na deze acties, als u het onderwerp van de brief in het Russisch specificeert, wordt de brief geleverd met een onderwerp - Geen onderwerp (ik hoop dat ik het correct heb geschreven), dit wordt behandeld als u de codering opgeeft in het PHPMailer-klassebestand.
4. In de originele vorm was de tekst in de invoervelden naar beneden gedrukt, niet in het midden. Dit is een storing in de JQTransform-plug-in.
Hij lijkt alles opgeschreven te hebben en me gewaarschuwd. Laten we verder gaan!
