Så här skapar du en Ajax-baserad HTML5 / CSS3-kontaktformulär

 
 
  
Din e-post skickades. Huzzah!
  

  
Fel vid inlämning av formuläret
  
 
 namn   
  
 
 E-post   
  
 
 Meddelande <?php if(isset($_POST['comments']))  if(function_exists('stripslashes'))  echo stripslashes($_POST['comments']);  else  echo $_POST['comments'];   ?>  
  
 Skicka oss Mail!  
 
  

Du kanske har märkt att det finns en annan villkorligt block direkt efter startformen. Detta kontrollerar för en variabel som heter $ hasError och kommer att visa ett felmeddelande vid bekräftelse. Denna återgångsmetod är Används endast om JavaScript är avaktiverat i webbläsaren och kan därför inte generera dynamiska fel.

Hela vägen kan vi hitta enskilda PHP-variabler kontrolleras. Uttalandena reglerar om formuläret redan har lämnats in med endast delar av uppgifter som fyllts i. Detta är ett annat fallback-system som visar innehållet i fält som redan fyllts i - ett bra knep för rätt användarupplevelse!

Direkt efter vår blankett är de få jQuery-funktioner vi har skrivit Vi kommer att prata över dessa först eftersom de är standard implementering på pageload. Men om webbläsaren inte accepterar JavaScript, kan vi som standard lita på vår PHP-kod.

Öppnande till jQuery

Det enklaste sättet att komma igång med att prata om det här ämnet skulle vara att dyka rätt in. Jag bryter ned enskilda block i rad så att du kan se vad manuset faktiskt söker efter.

Men om du bara går vilse granska projektkodsfilerna. Alla de fullständiga blocken är förskrivna och väl dokumenterade på jQuery-webbplatsen. För att komma igång öppnar vi vår kod som liknar alla andra:

Om du är bekant med återanrop du kanske märker posta() funktionen har en inbyggd uppsättning parametrar. Återuppringningar är mindre funktioner som kallas på svaret av data från en annan funktion.

Så till exempel när vår jQuery.post () funktionen lyckas skott ett e-postmeddelande det kommer att kalla sin egen interna funktion för att visa glidande animering. All denna kod kan skrivas i eget block och flyttas på annat håll. Men för denna tutorials skull är det mycket enklare att skriva återuppringningen som en inline-funktion.

Bryta förbi vårt PHP

Den sista hindren att nämna är logik bakom vår PHP-processor. Detta är backend-systemet som faktiskt kommer att göra ringa en postfunktion och skicka meddelandet ut. Hela koden som används i exemplen nedan kan hittas direkt ovanpå vår huvudsida .php filen innan någon HTML-utmatning.

Det finns också några interna stilar som fräschar upp sidan. Det finns inte något särskilt nytt här så vi kommer inte att gå in i någon av detaljerna. Men styles.css Dokumentet ingår i projektkoden och innehåller rudimentära CSS3-tekniker.

 
För att starta öppnar vi vår PHP-klausul och kontrollerar om formuläret till och med lämnades in. De POSTA variabel “lämnats” Det var faktiskt ett dolt inmatningsfält som lagts till i slutet av vår blankett. Det är ett bra sätt att kolla om användaren har skickat in något men så slösar vi inte bort serverns resurser.
 
Efter detta har vi 3 separata om annat uttalande checkar för att se om varje inmatningsfält har fyllts i. Jag kommer inte att inkludera varje logik här eftersom de är alla mycket repetitiva i naturen. Men för att ge dig ett kort exempel har jag inkluderat e-postbekräftelsesklausulen nedan:
 
// behöver giltig e-post om (trimma ($ _ POST ['email']) === ") $ emailError = 'Glömt att ange din e-postadress.'; $ hasError = true; annars om (! preg_match ("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[az]2,4$/i", trim ($ _POST ['email']))) $ emailError = 'Du har angett en ogiltig e-postadress.'; $ HasError = true; else $ email = trim ($ _ POST ['email']); 
 
PHP kommer att trimma all whitespace från värdet och kontrollera om något är kvar. Om så har vi en detaljerad beskrivning Regelbunden uttryck (Regex) för att se om vår användares inmatningssträng matchar ett e-postmönster.
 
Du behöver verkligen inte förstå hur preg_match () arbetar för att bygga det här skriptet. Det är en användbar funktion att bestämma regler och krav för en lyckad typ av data, men befaller avancerad programmeringskunskap för att verkligen förstå. I detta scenario ser vi till att användaren bara matar in några få tecken, inklusive en @ symbol följd av 2-4 tecken representerar a Toppdomän.
 
Efter alla våra logikpass och vi återkommer inga fel är det dags att skicka vårt meddelande! Denna bit av kod kommer att ställa in enskilda variabler för att anpassa vårt e-postmeddelande och konfigurera några postrubriker för processen.
 
// om inga felfel låt oss maila nu! om (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'Inlämnat meddelande från'. $ name; $ sendCopy = trim ($ _ POST ['sendCopy']); $ body = "Namn: $ name \ n \ nEmail: $ email \ n \ nComments: $ comments"; $ headers = 'From:'. ' <'.$emailTo.'>'. "\ r \ n". 'Svara till: ' . $ E-post; post ($ emailTo, $ subject, $ body, $ headers); // Ange vårt booleska slutföringsvärde till TRUE $ emailSent = true;  
 
Om du undrade hur koden skulle räkna ut din e-postadress är detta den del som ska fyllas i. Den första variabeln i vårt set heter $ Emailto och bör innehålla vilken som helst e-postadress, som kommer att få meddelandet.
 
Inuti vårt $ kropp variabel vi utnyttjar \ n avgränsare för att lägga till nya rader i meddelandet. Detta lägger till små placeringar för avsändarens namn, e-postadress, följt av en paus för deras meddelandeinnehåll. Naturligtvis kan du spendera tid på att pryda upp skärmen, men den här strukturen fungerar bra.
 
Slutsats
 
Detta stänger vår handledning för en avancerad kontaktformulär. Om du vill stila dina element i förhållande till minen kan du kolla in mitt exempel styles.css inom projektkoden. Sidan är dock strukturerad tillräckligt bra att du kan utforma ditt eget utseende och känna väldigt enkelt.
 
Känn dig fri att ladda ner källkoden och undersöka vad jag har gjort lite närmare. Det är bra att följa en handledning, men det är ovärderligt att ha direkt tillgång till projektkällan. Jag har också tagit med ett kort stilark för att göra anpassningar en vind, tack för din syn!