So erstellen Sie ein Ajax-basiertes HTML5 / CSS3-Kontaktformular

 
 
  
Ihre E-Mail wurde gesendet. Huzzah!
  

  
Fehler beim Senden des Formulars
  
 
 Name   
  
 
 Email   
  
 
 Botschaft <?php if(isset($_POST['comments']))  if(function_exists('stripslashes'))  echo stripslashes($_POST['comments']);  else  echo $_POST['comments'];   ?>  
  
 Schick uns Post!  
 
  

Sie haben vielleicht bemerkt, dass es noch einen gibt Bedingter Block direkt nach dem Startformular. Dadurch wird nach einer Variablen mit dem Namen gesucht $ hasError und zeigt nach Bestätigung eine Fehlermeldung an. Diese Rückfallmethode ist Wird nur verwendet, wenn JavaScript deaktiviert ist im Browser und kann daher keine dynamischen Fehler erzeugen.

Den ganzen Weg nach unten können wir finden einzelne PHP-Variablen geprüft werden. Die Aussagen regeln, wenn das Formular bereits mit nur teilweise eingegebenen Datenmengen übermittelt wurde. Dies ist ein weiteres Fallback-System, das den Inhalt der bereits ausgefüllten Felder anzeigt - ein guter Trick für die richtige Benutzererfahrung!

Direkt nach dem Ausfüllen des Formulars sind die wenigen jQuery-Funktionen wir haben geschrieben Wir werden zuerst über diese sprechen, da sie die Standardimplementierung auf pageload sind. Wenn der Browser jedoch kein JavaScript akzeptiert, können wir uns standardmäßig auf unseren PHP-Code verlassen.

Eröffnung für jQuery

Der einfachste Weg, um über dieses Thema zu sprechen, besteht darin, direkt einzutauchen. Ich zerlege einzelne Blöcke Zeile für Zeile, damit Sie sehen können, wonach das Skript eigentlich sucht.

Allerdings, wenn Sie nur verloren gehen Überprüfen Sie die Projektcodedateien. Alle vollständigen Blöcke sind auf der jQuery-Website beschrieben und gut dokumentiert. Um zu beginnen, öffnen wir unseren Code ähnlich wie alle anderen:

Wenn Sie mit Rückrufe Sie können das bemerken Post() Funktion verfügt über einen integrierten Parametersatz. Callbacks sind kleinere Funktionen, die aufgerufen werden auf die Antwort von Daten einer anderen Funktion.

So zum Beispiel, wenn unser jQuery.post () Mit der Funktion wird eine E-Mail erfolgreich aufgenommen. Sie ruft eine eigene interne Funktion zum Anzeigen der gleitenden Animation auf. Der gesamte Code könnte in einen eigenen Block geschrieben und an einen anderen Ort verschoben werden. Im Interesse dieses Tutorials ist es jedoch viel einfacher, den Callback als Inline-Funktion zu schreiben.

Vorbei an unserem PHP

Die letzte Hürde zu erwähnen ist die Logik hinter unserem PHP-Prozessor. Dies ist das Backend-System, das eigentlich wird eine Mailfunktion aufrufen und Senden Sie die Nachricht. Der gesamte Code, der in den folgenden Beispielen verwendet wird, befindet sich direkt oben in unserem Hauptfenster .php Datei vor einer HTML-Ausgabe.

Es gibt auch einige interne Stile, die die Seite auffrischen. Es gibt hier nichts speziell Neues, so dass wir nicht auf die Details eingehen. Jedoch die styles.css Das Dokument ist im Projektcode enthalten und enthält rudimentäre CSS3-Techniken.

 
Zu Beginn öffnen wir unsere PHP-Klausel und überprüfen sie wenn das Formular überhaupt eingereicht wurde. Das POST Variable “übermittelt” war ein verstecktes Eingabefeld am Ende unseres Formulars. Es ist ein nützlicher Weg zu Prüfen Sie, ob der Benutzer etwas gesendet hat Aber wir verschwenden keine Server-Ressourcen.
 
Danach haben wir 3 separate ansonsten Anweisung zu überprüfen wenn jedes Eingabefeld ausgefüllt wurde. Ich werde hier nicht auf jedes Stück Logik eingehen, da sie alle sehr repetitiv sind. Um Ihnen jedoch ein kurzes Beispiel zu geben, habe ich die E-Mail-Überprüfungsklausel unten eingefügt:
 
// Sie benötigen eine gültige E-Mail-Adresse, wenn (Trim ($ _ POST ['email'])) === ") $ emailError = 'Die Eingabe Ihrer E-Mail-Adresse wurde vergessen.'; $ hasError = true; else if (! preg_match ("/^[[: alnum:" ""), trim ($) _POST ['email']))) $ emailError = 'Sie haben eine ungültige E-Mail-Adresse eingegeben.'; $ HasError = true; else $ email = trim ($ _ POST ['email']); 
 
PHP schneidet alle Leerzeichen vom Wert ab und prüft, ob noch etwas übrig ist. Wenn ja, haben wir eine detaillierte Regulärer Ausdruck (Regex) um zu sehen, ob die Eingabezeichenfolge unseres Benutzers mit einem E-Mail-Muster übereinstimmt.
 
Sie müssen sicherlich nicht verstehen, wie preg_match () funktioniert, um dieses Skript zu erstellen. Es ist eine nützliche Funktion für Regeln und Anforderungen für einen erfolgreichen Datentyp festlegen, aber befiehlt fortgeschrittenes Programmierwissen, um wirklich zu verstehen. In diesem Szenario stellen wir sicher, dass der Benutzer nur einige ausgewählte Zeichen (einschließlich) eintippt @ Symbol gefolgt von 2-4 Zeichen vertritt a Top-Level-Domain.
 
Nachdem alle unsere Logik durchläuft und keine Fehler zurückgegeben werden, ist es Zeit, unsere Nachricht zu senden! Mit diesem Code werden individuelle Variablen festgelegt, um die E-Mail-Nachricht anzupassen und einige einzurichten Mail-Header für den Prozess.
 
// Wenn keine Fehler aufgetreten sind, senden Sie uns jetzt eine E-Mail! if (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'Übermittelte Nachricht von'. $ name; $ sendCopy = Trimmen ($ _ POST ['sendCopy']); $ body = "Name: $ name \ n \ nE-Mail: $ email \ n \ nKommentare: $ Kommentare"; $ headers = 'From:'. ' <'.$emailTo.'>'. "\ r \ n". 'Antwort an: ' . $ email; mail ($ emailTo, $ subject, $ body, $ headers); // Setzt unseren booleschen Beendigungswert auf TRUE $ emailSent = true;  
 
Wenn Sie sich fragen, wie der Code Ihre E-Mail-Adresse ermitteln soll, müssen Sie diesen Teil ausfüllen. Die erste Variable in unserem Set trägt den Titel $ emailTo und sollte was enthalten E-Mail-Adresse, die die Nachricht erhalten soll.
 
In unserem $ body Variable nutzen wir die \ n Trennzeichen, um der Nachricht neue Zeilen hinzuzufügen. Dies fügt kleine Platzierungen für das hinzu Name des Absenders, E-Mail-Addresse, gefolgt von einer Pause für ihre Nachrichteninhalt. Natürlich könnten Sie etwas Zeit damit verbringen, das Display zu verschönern, aber diese Struktur funktioniert gut.
 
Fazit
 
Dies schließt unser Tutorial für ein erweitertes Kontaktformular. Wenn Sie Ihre Elemente im Verhältnis zu meinen gestalten möchten, können Sie mein Beispiel überprüfen styles.css innerhalb des Projektcodes. Die Seite ist jedoch so strukturiert, dass Sie Ihr eigenes Look & Feel sehr leicht gestalten können.
 
Fühlen Sie sich frei, den Quellcode herunterzuladen und zu überprüfen, was ich ein bisschen näher gebracht habe. Es ist gut, einem Tutorial zu folgen, aber einen direkten Zugriff auf die Projektquelle zu haben, kann von unschätzbarem Wert sein. Ich habe auch ein kurzes Stylesheet beigelegt, um Anpassungen zu einem Kinderspiel zu machen. Vielen Dank für Ihre Ansicht!