de.hideout-lastation.com
Paradies Für Designer Und Entwickler


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

Dieser Artikel ist Teil unserer "HTML5 / CSS3 Tutorials" -Serie - mit dem Ziel, Sie zu einem besseren Designer und / oder Entwickler zu machen. Klicken Sie hier, um mehr Artikel aus derselben Serie zu sehen.

Kontaktformular ist tödlich wichtig für jede Website, da es als Messenger fungiert, der die Meinung oder Anfragen von Besuchern an Webmaster weitergibt. Es gab unzählige Kontaktformulare im Web, aber die meisten von ihnen erklären Ihnen leider nicht die inneren Arbeitsteile. Daher folgt hier ein ausführliches Tutorial, das Ihnen beibringt, ein erweitertes Kontaktformular von Grund auf neu aufzubauen, basierend auf der Pop-Technologie, HTML5 und CSS3 .

In Anbetracht der Art eines webbasierten E-Mail-Kontaktformulars müssen wir auch in zwei separate Anwendungsbereiche eintauchen, nämlich den PHP-Backend-Code zum Senden von E-Mail- und jQuery-Funktionen für eine reichhaltige Benutzeroberfläche. Am Ende werden wir ein volldynamisches und funktionales Kontaktformular haben, das mit späterer Anpassung geschrieben wird.

Fangen Sie jetzt an, ein eigenes erweitertes Kontaktformular zu erstellen!

Abkürzung nach:

  • Demo - Erhalten Sie eine Vorschau von dem, was Sie bauen
  • Download - Alle Dateien herunterladen (php + css)

Strukturierung der Anwendung

Um zu beginnen, benötigen Sie eine Art von Webserver, um darüber zu arbeiten. Wenn Sie eine Windows-Maschine betreiben, ist WAMP wahrscheinlich die beste Wahl. Mac-Benutzer haben ein ähnliches Programm namens MAMP, das genauso einfach zu installieren ist.

Diese Pakete richten einen lokalen Server auf Ihrem Computer mit vollem Zugriff auf PHP ein. Alternativ können Sie, wenn Sie Serverraum besitzen oder vollen Serverzugriff auf einen entfernten Standort haben, diesen stattdessen verwenden. Wir werden keine MySQL-Datenbanken benötigen, die die Dinge ein wenig vereinfachen sollten.

Sobald Ihr Server eingerichtet ist, erstellen Sie einen neuen Ordner, in dem die Anwendung gespeichert werden soll . Sie können dies nennen, was auch immer Sie möchten, da es nicht schädlich oder sogar mit dem Endprodukt verwandt ist. Die Ordnerstruktur wird verwendet, wenn Sie auf Ihre Dateien in einem Webbrowser zugreifen. Ein einfaches Beispiel wäre http: //localhost/ajaxcontact/contact.php

Lass uns unsere Dateien erstellen!

Wir werden nur innerhalb von 2 Kerndateien arbeiten. Wir benötigen zuerst eine .php-Kerndatei, die nicht nur unsere Anwendungslogik enthält, sondern auch Frontend-HTML-Markup. Unten ist ein Beispielcode aus unserer Startdatei.

 HTML5 / CSS Ajax Kontaktformular mit jQuery 

Um zu beginnen haben wir einen einfachen Überschriftenabschnitt zu unserem Dokument geschrieben. Dies beinhaltet eine allgemeine Doctype-Deklaration für HTML5 und einige HTML / XML-Dokumentelemente. Diese sind nicht unbedingt erforderlich, erleichtern aber den Rendervorgang in älteren (und neueren) Browsern. Es tut auch nie weh, mehr Informationen anzubieten.

Ein bisschen weiter unten können wir zwei Zeilen sehen, kurz vor unserem Schlusskurs. Der erste enthält unser jQuery-Skript aus dem Online-Google-Code-Repository . Dies ist erforderlich, damit unsere dynamischen Seitenfehler funktionieren. Direkt darunter haben wir ein einfaches CSS-Dokument, das alle unsere Seitenstile enthält.

Innerhalb unseres Dokumentenkörpers haben wir einige Abteilungen, die ein Hauptkontaktformular zurückhalten. Darin befinden sich 3 Eingabeelemente für den Benutzernamen, die E-Mail-Adresse und die persönliche Nachricht . Das HTML-Markup ist ziemlich Standard und sollte den Verstand irgendeines Zwischenentwicklers nicht verblüffen.

Ihre E-Mail wurde gesendet. Hurra!

Hier haben wir einen grundlegenden PHP-Bedingungscode, der in einigen Seitencontainern verschachtelt ist. Dies überprüft den festgelegten Wert einer Variablen mit dem Namen $emailSent und wenn sie gleich true ist, wird eine Erfolgsmeldung angezeigt.

In unserem Formular HTML

Die Else- Anweisung wird beim Laden der ersten Seite ausgeführt, da zu Beginn keine Inhalte gesendet werden. Hier finden Sie eine kurze Sammlung von Formularelementen und einen Absenden-Button .

Fehler beim Senden des Formulars




Möglicherweise haben Sie bemerkt, dass sich direkt nach dem Startformular ein weiterer bedingter Block befindet . Dies prüft auf eine Variable mit dem Namen $hasError und zeigt bei der Bestätigung eine Fehlermeldung an. Diese Fallback-Methode wird nur verwendet, wenn JavaScript im Browser deaktiviert ist und daher keine dynamischen Fehler generieren kann.

Den ganzen Weg hinunter können wir einzelne PHP-Variablen finden, die überprüft werden. Die Statements regeln, ob das Formular bereits mit nur unvollständigen Dateneingaben eingereicht wurde. Dies ist ein weiteres Fallback-System, das den Inhalt bereits ausgefüllter Felder anzeigt - ein schöner Trick für die richtige Benutzererfahrung!

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

Öffnen von jQuery

Der einfachste Weg, um zu diesem Thema zu sprechen, wäre, direkt hineinzutauchen. Ich werde einzelne Blöcke Zeile für Zeile aufschlüsseln, damit Sie sehen können, wonach das Skript eigentlich sucht.

Wenn Sie jedoch verloren gehen, überprüfen Sie einfach die Projektcode-Dateien . Alle vollständigen Blöcke sind auf der jQuery-Website bereits beschrieben und gut dokumentiert. Um zu beginnen, öffnen wir unseren Code ähnlich wie andere:

Wenn Sie mit Rückrufen vertraut sind, stellen Sie möglicherweise fest, dass die Funktion post() über einen integrierten Parametersatz verfügt. Callbacks sind kleinere Funktionen, die auf die Antwort von Daten von einer anderen Funktion aufgerufen werden .

Wenn unsere jQuery.post() Funktion beispielsweise eine E-Mail erfolgreich erstellt, wird sie ihre eigene interne Funktion aufrufen, um die gleitende Animation anzuzeigen. All dieser Code könnte in einen eigenen Block geschrieben und an anderer Stelle verschoben werden. Für dieses Tutorial ist es jedoch viel einfacher, den Callback als Inline-Funktion zu schreiben.

Breaking vorbei an unserem PHP

Die letzte Hürde ist die Logik unseres PHP-Prozessors. Dies ist das Backend-System, das tatsächlich eine Mail-Funktion aufruft und die Nachricht versendet . Der gesamte in den folgenden Beispielen verwendete Code befindet sich direkt vor jeder HTML-Ausgabe oben in unserer .php-Hauptdatei .

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

Zu Beginn öffnen wir unsere PHP-Klausel und prüfen, ob das Formular überhaupt übergeben wurde . Die POST- Variable " submitted " war eigentlich ein verstecktes Eingabefeld am Ende des Formulars. Es ist eine nützliche Methode, um zu überprüfen, ob der Benutzer bereits etwas eingereicht hat, sodass keine Serverressourcen verschwendet werden.

Danach haben wir 3 separate if / else- Statement-Prüfungen, um zu sehen, ob jedes Eingabefeld ausgefüllt wurde . Ich werde hier nicht jede Logik einbeziehen, da sie alle sehr repetitiv sind. Um Ihnen jedoch ein kurzes Beispiel zu geben, habe ich die folgende E-Mail-Verifizierungsklausel eingefügt:

 // brauche eine gültige E-Mail-Adresse if (trim ($ _ POST ['email']) === '') {$ emailError = 'Ich habe deine E-Mail-Adresse vergessen.'; $ hasError = wahr; } sonst if (! preg_match ("/ ^ [[: alnum:]]] [a-z0-9 _.-] * @ [a-z0-9 .-] + \. [az] {2, 4} $ / i ", trim ($ _ POST ['email']))) {$ emailError = 'Sie haben eine ungültige E-Mail-Adresse eingegeben.'; $ hasError = wahr; } else {$ email = trimmen ($ _ POST ['email']); } 

PHP schneidet alle Leerzeichen aus dem Wert und überprüft, ob etwas übrig ist. Wenn ja, haben wir einen detaillierten Regulären 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() dieses Skript erstellt. Es ist eine nützliche Funktion, Regeln und Anforderungen für eine erfolgreiche Art von Daten zu bestimmen, aber befähigt erweiterte Programmierkenntnisse, um wirklich zu verstehen. In diesem Szenario stellen wir sicher, dass der Benutzer nur einige wenige Zeichen eingibt, ein @ -Symbol gefolgt von 2 bis 4 Zeichen, die eine Top-Level-Domain darstellen .

Nachdem all unsere Logik weitergegeben wurde und wir keine Fehler mehr melden, ist es Zeit, unsere Nachricht zu senden! Dieses Code-Bit setzt individuelle Variablen, um unsere E-Mail-Nachricht anzupassen und einige Mail-Header für den Prozess einzurichten.

 // Auf keinen Fehler Fehler lassen 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 \ nEmail: $ email \ n \ nKommentare: $ comments"; $ headers = 'Von:'. ' <'. $ emailTo.'> '. "\ r \ n". 'Antwort an: ' . $ email; mail ($ emailTo, $ subject, $ body, $ headers); // Setze unseren booleschen Abschlusswert auf TRUE $ emailSent = true; } 

Wenn Sie sich fragen, wie der Code Ihre E-Mail-Adresse herausfinden wird, müssen Sie diesen ausfüllen. Die erste Variable in unserem Set heißt $emailTo und sollte die E-Mail-Adresse enthalten, die Sie erhalten die Nachricht.

Innerhalb unserer $body Variablen nutzen wir den \n Begrenzer, um neue Zeilen in die Nachricht einzufügen. Dadurch werden kleine Placements für den Namen des Absenders und die E-Mail-Adresse hinzugefügt, gefolgt von einer Unterbrechung für den Nachrichteninhalt . Natürlich könnte man Zeit damit verbringen, das Display hübsch zu machen, aber diese Struktur funktioniert gut.

Fazit

Dies schließt unser Tutorial für ein erweitertes Kontaktformular. Wenn Sie Ihre Elemente in Relation zu meinen stylen möchten, können Sie sich mein Beispiel styles.css im Projektcode ansehen . Die Seite ist jedoch gut genug strukturiert, sodass Sie Ihr eigenes Look & Feel sehr einfach gestalten können.

Fühlen Sie sich frei, den Quellcode herunterzuladen und zu untersuchen, was ich ein bisschen näher getan habe. Es ist gut, einem Tutorial zu folgen, aber der direkte Zugriff auf die Projektquelle kann von unschätzbarem Wert sein. Ich habe auch ein kurzes Stylesheet hinzugefügt, um Anpassungen zu einem Kinderspiel zu machen, danke für deine Ansicht!

Sammeln Sie kostenloses Nutzerfeedback mit Cute Emojis

Sammeln Sie kostenloses Nutzerfeedback mit Cute Emojis

Wir alle wissen, dass Benutzerfeedback für den Designprozess wertvoll ist. Sie können lernen, was funktioniert, was nicht, und letztendlich was die Leute von Ihrer Website halten.Aber in unserer Smartphone-geladenen Welt gibt es eine obskure Feedback-Methode, die jetzt Sinn macht: emojis .Wenn Sie Feedback Emoji auf Ihrer Website installieren, können Sie direkt von Emoji-Symbolen Nutzerfeedback erhalten. S

(Tech- und Design-Tipps)

Frische Ressource für Web-Entwickler - April 2017

Frische Ressource für Web-Entwickler - April 2017

Seit Anfang des Jahres 2017 hat sich in der Welt der Web-Entwicklung vieles verändert. Jeden Tag kommen neue Apps und Ressourcen hinzu . Um mit dem Trend Schritt zu halten, teile ich Ihnen heute ein paar neue Webentwicklungsressourcen mit.Zu diesen Ressourcen gehören eine Web-App, mit der Sie das neue native CSS-Grid-Modul erlernen können, ein Kurs, um React von Anfang an zu lernen, eine Referenz zum Erlernen einiger PHP-Entwurfsmuster zur Verbesserung Ihrer PHP-Codes und einige mehr. L

(Tech- und Design-Tipps)