Hoe een op Ajax gebaseerd HTML5 / CSS3-contactformulier te maken
Contactformulier is essentieel voor elke website, aangezien het fungeert als een boodschapper die de mening of vragen van bezoekers aan de webmaster doorgeeft. Er zijn talloze contactformulieren op het web geweest maar helaas leggen de meeste van hen je niet de innerlijke werkonderdelen uit, dus hier komt een gedetailleerde tutorial om je te leren een geavanceerd contactformulier helemaal zelf te bouwen op basis van de poptechnologie, HTML5 en CSS3.
Gezien de aard van een webgebaseerd e-mailcontactformulier, moeten we ook in twee afzonderlijke toepassingsvelden duiken, namelijk de PHP-backendcode voor het verzenden van e-mail- en jQuery-functies voor een rijke gebruikersinterface. Tegen het einde blijven we achter met een volledig dynamisch en functioneel contactformulier geschreven met latere aanpassingen in gedachten.
Ga nu aan de slag om uw eigen geavanceerd contactformulier te maken!
Snelkoppeling naar:
- Demo - Krijg een voorbeeld van wat je aan het bouwen bent
- Downloaden - Alle bestanden downloaden (php + css)
De applicatie structureren
Om aan de slag te gaan, hebt u een bepaald type webserver nodig om over te werken. Als u een Windows-computer gebruikt, is WAMP waarschijnlijk de beste optie. Mac-gebruikers hebben een soortgelijk programma met de naam MAMP dat net zo gemakkelijk te installeren is.
Deze pakketten zullen een lokale server op uw machine opzetten met volledige toegang tot PHP. Als u echter over serverruimte beschikt of volledige servertoegang tot een externe locatie hebt, kunt u die in plaats daarvan gebruiken. We hebben geen MySQL-databases nodig, wat de zaken een beetje zou vereenvoudigen.
Zodra uw server is ingesteld maak een nieuwe map om de applicatie te huisvesten. U kunt dit noemen wat u maar wilt, omdat het niet schadelijk is of zelfs verband houdt met het eindproduct. De mappenstructuur wordt gebruikt wanneer u uw bestanden opent in een webbrowser. Een eenvoudig voorbeeld zou zijn http: //localhost/ajaxcontact/contact.php
Laten we onze bestanden samenstellen!
We werken alleen binnen 2 kernbestanden. We hebben eerst een kern nodig .php bestand niet alleen onze applicatie logica, maar ook front-end HTML markup. Hieronder is voorbeeldcode uit ons startbestand.
HTML5 / CSS Ajax Contactformulier met jQuery
Om te beginnen hebben we een eenvoudig kopje naar ons document geschreven. Dit omvat een generaal Doctype-declaratie voor HTML5 en enkele HTML / XML-documentelementen. Deze zijn niet precies vereist, maar vereenvoudigen het weergaveproces in oudere (en nieuwere) browsers. Het doet ook nooit pijn om meer informatie te bieden.
Iets verderop kunnen we 2 regels zien vlak voor onze afsluitende heading-tag. De eerste omvat onze jQuery-script uit de online Google Code Repository. Dit is nodig om onze dynamische paginafouten te laten werken. Direct daaronder hebben we de toevoeging van een basis CSS-document bevat al onze paginastijlen.
In ons document hebben we er een paar met divisies een hoofdcontactformulier onthouden. Dit bevat 3 invoerelementen voor de gebruikersnaam, e-mailadres, en persoonlijk bericht. De HTML-opmaak is redelijk standaard en moet de geest van een tussenontwikkelaar niet verbazen.
Uw e-mail is verzonden Huzzah!
Hier hebben we een basis Voorwaardelijke PHP-code genest binnen enkele pagina-containers. Dit controleert de ingestelde waarde van een variabele met de naam
$ emailSenten als deze gelijk is aan true, geeft het een succesbericht weer.In onze formulier-HTML
De anders verklaring is wat wordt uitgevoerd bij het laden van de eerste pagina, omdat er in eerste instantie geen inhoud wordt verzonden. Hierbinnen zullen we een korte verzameling van formulierelementen en een verzendknop.
Fout bij het indienen van het formulier
Je hebt misschien gemerkt dat er een andere is voorwaardelijk blok direct na het startformulier. Hiermee wordt gecontroleerd op een variabele met de naam $ hasError en geeft een foutmelding na bevestiging. Deze fallback-methode is alleen gebruikt als JavaScript is uitgeschakeld in de browser en dus geen dynamische fouten kunnen genereren.
Helemaal naar beneden kunnen we vinden individuele PHP-variabelen gecontroleerd worden. De uitspraken regelen of het formulier al is ingediend met slechts gedeeltelijke hoeveelheden ingevulde gegevens. Dit is een ander fallback-systeem dat de inhoud van reeds ingevulde velden weergeeft - een leuke truc voor de juiste gebruikerservaring!
Direct nadat ons formulier is ingevuld, zijn er een paar jQuery-functies we hebben geschreven. We zullen hier eerst over praten omdat ze de standaardimplementatie op pageload zijn. Als de browser echter geen JavaScript accepteert, kunnen we standaard op onze PHP-code vertrouwen.
Opening naar jQuery
De gemakkelijkste manier om te beginnen met praten over dit onderwerp zou zijn om er meteen in te duiken. Ik zal individuele blokken regel voor regel afbreken zodat je kunt zien waar het script eigenlijk naar zoekt.
Maar als je gewoon verdwaalt bekijk de projectcodebestanden. Alle volledige blokken zijn vooraf geschreven en goed gedocumenteerd in de jQuery-website. Om aan de slag te gaan, openen we onze code vergelijkbaar met andere:
Als u bekend bent met callbacks je zult de post() functie heeft een ingebouwde set parameters. Terugbellen zijn kleinere functies die worden aangeroepen op de reactie van gegevens van een andere functie.
Dus bijvoorbeeld wanneer onze jQuery.post () functioneert met succes een e-mail, hij noemt het zijn eigen interne functie om de glijdende animatie weer te geven. Al deze code kan in zijn eigen blok worden geschreven en ergens anders naartoe worden verplaatst. Voor deze tutorial is het echter veel eenvoudiger om de callback te schrijven als een inline-functie.
We breken voorbij onze PHP
De laatste hindernis om te vermelden is de logica achter onze PHP-processor. Dit is het backend-systeem dat feitelijk zal werken bel een e-mailfunctie en stuur het bericht. Alle code die in de onderstaande voorbeelden wordt gebruikt, vindt u direct bovenaan onze hoofdpagina .php bestand, vóór enige HTML-uitvoer.
Er zijn ook enkele interne stijlen die de pagina opfrissen. Er is niets specifiek nieuws hier, dus we zullen niet ingaan op een van de details. Echter, de styles.css document is opgenomen in de projectcode en bevat rudimentaire CSS3-technieken.
Om te beginnen openen we onze PHP-clausule en controleren als het formulier zelfs is ingediend. De POST veranderlijk “ingediend” was eigenlijk een verborgen invoerveld toegevoegd aan het einde van ons formulier. Het is een handige manier om controleer of de gebruiker iets heeft ingediend toch verspillen we geen serverresources.
Hierna hebben we er 3 gescheiden if / else verklaring controleren om te zien als elk invoerveld is ingevuld. Ik zal hier niet elk stukje logica opnemen, omdat ze allemaal erg repetitief van aard zijn. Om u een kort voorbeeld te geven, heb ik de onderstaande e-mailverificatie-clausule opgenomen:
// heeft een geldig e-mailadres nodig (trim ($ _ POST ['email']) === ") $ emailError = 'Vergeten om uw e-mailadres in te voeren.'; $ hasError = true; else if (! preg_match ("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[az]2,4$/i", trim ($ _POST ['email']))) $ emailError = 'Je hebt een ongeldig e-mailadres ingevoerd.'; $ HasError = true; else $ email = trim ($ _ POST ['email']);PHP trimt alle witruimten van de waarde en controleert of er nog iets over is. Als dat het geval is, hebben we een gedetailleerde beschrijving Reguliere expressie (Regex) om te zien of de invoerreeks van onze gebruiker overeenkomt met een e-mailpatroon.
Je hoeft zeker niet te begrijpen hoe
preg_match ()werkt om dit script te bouwen. Het is een nuttige functie om regels en vereisten bepalen voor een succesvol type gegevens, maar commandeert geavanceerde programmeerkennis om echt te begrijpen. In dit scenario zorgen we ervoor dat de gebruiker slechts een beperkt aantal tekens invoert, inclusief een @ symbool gevolgd door 2-4 tekens vertegenwoordigend a Top-level domein.Nadat al onze logica is verwerkt en we geen fouten teruggeven, is het tijd om onze boodschap te verzenden! Dit stukje code stelt individuele variabelen in om ons e-mailbericht aan te passen en sommige in te stellen mail headers voor het proces.
// bij geen fouten laten we nu een e-mail sturen! if (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'Ingezonden bericht van'. $ naam; $ sendCopy = trim ($ _ POST ['sendCopy']); $ body = "Naam: $ naam \ n \ nE-mail: $ email \ n \ nComments: $ comments"; $ headers = 'Van:'. ' <'.$emailTo.'>'. "\ r \ n". 'Antwoord aan: ' . $ E-mail; mail ($ emailTo, $ subject, $ body, $ headers); // stel onze booleaanse voltooiingswaarde in op TRUE $ emailSent = true;Als je je afvroeg hoe de code je e-mailadres zou achterhalen, dan is dit het gedeelte dat je moet invullen. De eerste variabele in onze set is getiteld
$ emailToen zou wat dan ook moeten bevatten e-mailadres, dat het bericht zal ontvangen.In onze
$ lichaamvariabele maken we gebruik van de\ nscheidingsteken om nieuwe regels toe te voegen aan het bericht. Dit voegt kleine plaatsingen toe voor de Naam afzender, e-mailadres, gevolgd door een pauze voor hun berichtinhoud. Natuurlijk zou je tijd kunnen besteden aan het mooier maken van het scherm, maar deze structuur werkt prima.Conclusie
Dit sluit onze tutorial voor een geavanceerd contactformulier. Als u uw elementen wilt stijlen ten opzichte van de mijne, kunt u mijn voorbeeld bekijken styles.css binnen de projectcode. De pagina is echter goed genoeg gestructureerd zodat u uw eigen look & feel heel gemakkelijk kunt ontwerpen.
Download de broncode en onderzoek wat ik wat dichterbij heb gedaan. Het is goed om een zelfstudie te volgen, maar directe toegang tot de projectbron kan van onschatbare waarde zijn. Ik heb ook een korte stylesheet toegevoegd om aanpassingen een fluitje van een cent te maken, bedankt voor uw mening!
