Wir erstellen ein Feedback-Formular in PHP. Qualitätskontrollabteilung Aufruf des Formulars in einem modalen Fenster

Hallo Freunde! Ich möchte Ihnen ein universelles Skript zum Senden von Daten aus Formularen an E-Mail vorstellen. Das Skript eignet sich ideal für Websites wie Landing Pages, Visitenkartenseiten usw. Unser Skript „Feedback-Formulare“ hebt sich von der Masse der anderen Skripte im Internet dadurch ab, dass es eine unbegrenzte Anzahl von Formularen mit unterschiedlichen Feldern auf einer Seite verbinden und Briefe an mehrere Empfänger senden kann.

Also. Lass uns anfangen. Beginnen wir mit den Fähigkeiten des Skripts.

Verbinden Sie eine unbegrenzte Anzahl von Formularen auf einer Seite.

Überprüfen Sie, ob die Felder korrekt ausgefüllt sind.

Benachrichtigungen einrichten.

Möglichkeit, Buchstaben für jedes Formular zu verwenden.

Buchstabentyp – (wenn HTML-Tags verwendet werden)

Senden an eine unbegrenzte Anzahl von Adressen.

Individuelle Anpassung jedes Formulars.

Das Skript läuft weiter, ohne die Seite neu zu laden.

Schutz vor Spam-Bots.

Ersteinrichtung.
Das Skript basiert auf der Bibliothek, daher müssen wir es zunächst verbinden. Dazu empfehle ich die Verwendung von Google Hosted Libraries.

Lassen Sie uns ausführlicher über die verbleibenden Dateien sprechen:

feedback.js ist die Hauptskriptdatei, die für die Übermittlung von AJAX-Formularen verantwortlich ist.
jquery.arcticmodal.js,
jquery.arcticmodal. - Bereitstellung der Möglichkeit, Formulare in einem modalen Fenster anzuzeigen.
jquery.jgrowl.js,
jquery.jgrowl.css – ermöglicht die Anzeige von Benachrichtigungen auf der Seite (Blöcke in der oberen Ecke der Seite).

HTML und erforderliche Attribute.
Ein erforderliches Attribut für alle Formularelemente ist das name=""-Attribut – notwendig für die spätere Formularanpassung.
Für eine Schaltfläche (type="button") müssen Sie class="feedback" angeben. Ich möchte Sie auch darauf aufmerksam machen, dass jedes HTML-Tag mit der Klasse „Feedback“ als Schaltfläche fungieren kann. Aufruf eines Formulars in einem modalen Fenster Um ein Formular in einem modalen Fenster aufzurufen, müssen Sie zunächst eine Aktion definieren zum Klicken auf ein beliebiges Tag, zum Beispiel ein Div mit der Klasse modal_btn
Aufrufen eines Formulars in einem modalen Fenster $(document).ready(function() ( $(document).on("click", ".modal_btn", function())( $("#small-modal").arcticmodal (); )); ));
Da das Formular nur im modalen Fenster sichtbar sein sollte, muss es ausgeblendet werden, indem es in einem Div mit dem Attribut style="display: none;" platziert und außerdem in ein paar Standard-Divs eingeschlossen wird, um das modale Fenster zu formatieren.
X

Wir haben also die Grundeinstellungen für die Anbindung unseres Skripts zum Senden von Formularen per E-Mail herausgefunden. Werfen wir nun einen Blick ins Innere und finden wir heraus, wie man Felder, Benachrichtigungen und alles andere, was dort ist, konfiguriert.

Beispiel für Einstellungen für ein Formular. Einstellungen für alle Formulare werden in der Datei feedback\index.php gespeichert
$form["form-1"] = array("fields" => array("name" => array("title" => "Name", "validate" => array("preg" => "%% ", "minlength" => "3", "maxlength" => "35",), "messages" => array("preg" => "Feld [ %1$s ] kann einen Fehler enthalten", "minlength " => „Minimale Feldlänge [ %1$s ] ist kleiner als zulässig – %2$s“, „maxlength“ => „Maximale Feldlänge [ %1$s ] ist größer als zulässig – %2$s“, )), "tell " => array("title" => "Phone", "validate" => array("preg" => "/^((8|\+)[\- ]?)?(\ (?\d( 3)\)?[\- ]?)?[\d\- ](5,10)$/", "minlength" => "5",), "messages" => array( „preg“ => „Feld [ %1$s ] kann einen Fehler enthalten“, „minlength“ => „Die Mindestlänge von Feld [ %1$s ] ist kleiner als die zulässige Länge – %2$s“,) ),), "cfg" => array(" charset" => "utf-8", "subject" => "Betreff der E-Mail", "title" => "Überschrift im Text der E-Mail", " ajax“ => true, „validate“ => true, „from_email“ = > „ [email protected]", "from_name" => "noreply", "to_email" => " [email protected], [email protected]", "to_name" => "noreply1, noreply2", "geoip" => true, "referer" => true, "type" => "html", "tpl" => true, "antispam" => "email77 ", "antispamjs" => "address77", "okay" => "Nachricht gesendet - OK", "fuck" => "Nachricht gesendet - FEHLER", "spam" => "Spam-Roboter", "notify" => "color-modal-textbox", "usepresuf" => false)); // Nächstes Formular $form["form-2"] = array("fields" => array(.....
Um Einstellungen für ein neues Formular hinzuzufügen, müssen Sie dem Beispiel des Arrays $form["form-1"] folgen, um ein neues Array $form[""] zu erstellen.

Erinnern Sie sich, was ich über das erforderliche name=""-Attribut gesagt habe?

Ein erforderliches Attribut für alle Formularelemente ist das name=""-Attribut – notwendig für die spätere Formularanpassung.
Es ist also an der Zeit, Ihnen zu sagen, warum es immer noch benötigt wird.
name="" ist der alphanumerische Schlüssel für das Array und muss für das Array $form[""] eindeutig sein

Beispiel-HTML-Code zur Verdeutlichung

Lassen Sie uns nun Arrays verstehen und wissen, wofür sie benötigt werden.

$form["form-1"] = array();
$form["form-2"] = array(); usw.
Dies sind die Hauptarrays für jedes neue Formular, die Folgendes enthalten:

"Felder" => array(); - Eine Reihe von Einstellungen für Formularelemente.

• "name" => array(); – Ein Array von Formularelementeinstellungen (zum Beispiel input name="name" type="text"), das eine Reihe von Einstellungen enthält.
  • „title“ => „Ihr Name“ – der Name des Formularelements, wird bei Fehlern oder in der Vorlage angezeigt
  • "validieren" => array(); - Array, enthält Validierungsregeln für Formularelemente
    • „preg“ => „%%“ – regulärer Ausdruck
    • „minlength“ => „3“ – minimale Feldgröße
    • „maxlength“ => „35“ – maximale Feldgröße
    • „substr“ => „35“ – immer auf N Zeichen schneiden
  • "Nachrichten" => array(); – ein Array mit Validierungsnachrichten, nämlich:
    • „preg“ => „Das Formularelement stimmt nicht mit dem regulären Ausdruck überein“
    • „minlength“ => „Die Mindestlänge des Feldes [ %1$s ] ist kleiner als akzeptabel – %2$s“ – Validierungsfehler, Schlüssel (preg) stimmt nicht mit dem Validierungsschlüssel überein
    • „maxlength“ => „Die maximale Länge des Feldes [ %1$s ] überschreitet den zulässigen Grenzwert – %2$s“ – Validierungsfehler, Schlüssel (preg) stimmt nicht mit dem Validierungsschlüssel überein

"cfg" => array(); - Eine Reihe von Formulareinstellungen.

• „charset“ => „utf-8“ – Kodierung
• „subject“ => „Betreff des Briefes“, – Betreff des Briefes
• „title“ => „Titel im Hauptteil des Briefes“, – Titel im Hauptteil des Briefes
• „ajax“ => true, – dies ist das Ajax-TODO-Formular (falls nicht erforderlich, setzen Sie es auf false)
• „validate“ => true, – (true), wenn wir das Formular auf dem Server validieren möchten, ersetzt die js-Validierung durch „ajax“ => true. Wenn diese Option deaktiviert ist (false), müssen Sie die Validierungsfeldeinstellungen nicht festlegen. MACHEN
• „from_email“ => „myemail“, – Absender, geben Sie den Feldnamen an (name = „myemail“), und wenn Sie keine E-Mail vom Benutzer benötigen, dann einen Stub [email protected]
• „from_name“ => „myname“, – Absender, geben Sie den Feldnamen (name="myname") an, und wenn Sie keinen Benutzernamen benötigen, dann den No-Reply-Stub
• "to_email" => " [email protected]", - E-Mail des Empfängers. Um an mehrere Adressen zu senden, listen Sie diese durch Kommas getrennt auf. Beispiel ("to_email" => " [email protected], [email protected], [email protected]",)
• „to_name“ => „noreply1“, – Empfängername. Wenn Sie an mehrere Adressen senden, geben Sie die Namen der Empfänger durch Kommas getrennt an. Beispiel („to_name“ => „noreply1, noreply2, noreply3“)
• „geoip“ => true, – Standort mithilfe des TODO-Typs ermitteln
• „referer“ => false, – Fügen Sie die URL der Seite hinzu, von der das Formular gesendet wurde
• „type“ => „plain“, – Buchstabentyp – plain, html (wenn HTML-Tags verwendet werden)
• „tpl“ => false, – eine Briefvorlage verwenden. Wenn wahr, dann wird die Vorlagendatei entsprechend dem Formularnamen (name="form-1") aus dem Ordner verbunden und die Datei (feedback/tpl/form-1.tpl) verarbeitet, andernfalls wird alles verarbeitet wird so wie es ist gesendet, jedes Feld in einer neuen Zeile
• „antispam“ => „email77“, – Anti-Spam, die Methode basiert auf einem versteckten (display:none) Feld, das nur der Roboter automatisch ausfüllt und sich dadurch verrät.
• „antispamjs“ => „address77“, – Anti-Spam-Methode basiert auf einem versteckten (display:none) Feld, das anfänglich ausgefüllt ist und automatisch Javascript löscht, wenn die Seite geladen wird, selbst ein intelligenter Roboter kann dies nicht vorhersehen, und dann passiert es verstopft.
• „okay“ => „Nachricht an den Benutzer“, – Eine Nachricht an den Benutzer wird angezeigt, wenn das Formular erfolgreich gesendet wurde. Sie können HTML-Tags verwenden.
• „fuck“ => „Nachricht an den Benutzer“, – Eine Nachricht an den Benutzer, die angezeigt wird, wenn beim Absenden des Formulars ein Fehler auftritt. Sie können HTML-Tags verwenden.
• „spam“ => „Nachricht an Benutzer“, – Nachricht an den Benutzer, angezeigt bei Verdacht auf einen Spam-Roboter, Sie können HTML-Tags verwenden.
• „notify“ => „color-modal“, – welche Art von Benachrichtigungen angezeigt werden sollen, Textfeld – Blöcke in der oberen Ecke der Seite, Farbe – farbliche Hervorhebung im Formular, modal – modales Fenster in der Mitte der Seite, keine - deaktivieren. Sie können beispielsweise Folgendes kombinieren: Farbmodal – Fehler beim Ausfüllen von Feldern mit Hervorhebung und Textsendestatus im TODO-Modalfenster
• „usepresuf“ => false – Ob ein benutzerdefinierter Zusatz zum Betreff oder zum Titel des Briefes verwendet wird, im Falle einer kleinen Änderung können Sie beispielsweise %%cfg.title.suffix%% angeben, dafür muss es vorhanden sein ein verstecktes Feld im Formular, weitere Einzelheiten finden Sie unter f -qiu presuf()

Briefvorlagen einrichten So. Schauen wir uns nun das Thema unserer Nachrichten an.
Damit das Formular in einer Vorlage gesendet werden kann, müssen Sie zunächst in den Formulareinstellungen die Verwendung einer Vorlagendatei aktivieren – „tpl“ => true ,
Zweitens müssen Sie im Ordner (feedback/tpl/) eine Vorlagendatei mit der Erweiterung *.tpl entsprechend dem Namen des Formulars (name="form-1" ) erstellen.

Beispiel: (feedback/tpl/form-1.tpl)

Überschrift im Hauptteil des Briefes
%%nenne den Titel%%	%%name.value%%
%%tell.title%%	%%tell.value%%

benennen, erzählen usw. – Dies sind die Attribute (name="") der Felder, die der Benutzer ausfüllt.
title – Der Name des Formularelements, der im Array mit den Formularelementeinstellungen festgelegt ist.
value – Der Wert des Formularelements.

Das ist alles für heute, aber das Skript ist sicherlich nicht perfekt, daher sind Kommentare und Beschreibungen von Fehlern willkommen und werden in zukünftigen Versionen korrigiert.

P.S. Das Drehbuch wurde vom Team entwickelt

Für die Entwicklung eines Webprojekts ist es sehr wichtig, Feedback von Besuchern zu erhalten. Leider ist die Möglichkeit, eine Nachricht an Entwickler zu senden, auf vielen Websites entweder gar nicht oder nur mit erheblichen Schwierigkeiten verbunden.

Heute werden wir eine einfache Lösung für dieses Problem finden. Mithilfe von jQuery, PHP und der PHPMailer-Klasse sendet das Formular den Vorschlag des Benutzers direkt an Ihren Posteingang.

HTML

Beginnen wir mit dem HTML-Markup. Stile werden oben im Dokument eingefügt und JavaScript-Dateien werden unten eingefügt. Dadurch wird der Seitenladevorgang optimiert, sodass die Skripte zuletzt geladen werden, sodass der Benutzer den Seiteninhalt sehen kann.

demo.html

Feedback-Formular mit PHP und jQuery | Demo für die Website Website Feedback

Bitte geben Sie Ihre Kontaktinformationen an, wenn Sie eine Antwort wünschen.

Schicken

Innen Körper gelegen div#Rückmeldung. Es wird unten rechts im Fenster mit einer festen Positionierung platziert, die im CSS-Abschnitt des Tutorials zu sehen ist.

Darin drin div Fünf farbige Elemente werden platziert Spanne. Jeder von ihnen hat eine Breite von 20 % und ist nach links versetzt. Dadurch werden sie über die gesamte Breite exakt platziert. div#Rückmeldung.

Als nächstes kommt der .section-Container, der den Titel, den Textbereich und die Schaltfläche enthält.

CSS

Fahren wir mit dem Festlegen von Stilen für das Formular fort. Lassen Sie uns zunächst ein paar Worte dazu sagen, woraus die Struktur eines Stylesheets besteht. Wenn Sie sich die folgenden CSS-Definitionen ansehen, werden Sie feststellen, dass jede Regel mit #feedback beginnt. Dadurch wird ein ähnlicher Namespace im CSS erstellt, wodurch es einfacher wird, Code ohne Konflikte zu einer vorhandenen Website hinzuzufügen.

styles.css – Teil 1

#feedback( Hintergrundfarbe:#9db09f; Breite:310px; Höhe:330px; Position:fest; unten:0; rechts:120px; Rand unten:-270px; Z-Index:10000; ) #feedback .section( Hintergrund :url("img/bg.png") repeat-x oben links; border:1px solid #808f81; border-bottom:none; padding:10px 25px 25px; ) #feedback .color( float:left; height:4px; width:20%; overflow:hidden; ) #feedback .color-1( Hintergrundfarbe:#d3b112;) #feedback .color-2( Hintergrundfarbe:#12b6d3;) #feedback .color-3( Hintergrundfarbe :#8fd317;) #feedback .color-4( Hintergrundfarbe:#ca57df;) #feedback .color-5( Hintergrundfarbe:#8ecbe7;) #feedback h6( Hintergrund:url("img/feedback.png" ) keine Wiederholung; Höhe:38px; Rand:5px 0 12px; Texteinzug:-99999px; Cursor:Zeiger; ) #feedback textarea( Hintergrundfarbe:#fff; Rand: keine; Farbe: #666666; Schriftart: 13 Pixel „Lucida Sans“,Arial,sans-serif; Höhe:100px; Polsterung:10px; Breite:236px; Größe ändern:keine; Umriss:keine; Überlauf:auto; -moz-box-shadow:4px 4px 0 #8a9b8c; -webkit -box-shadow:4px 4px 0 #8a9b8c; box-shadow:4px 4px 0 #8a9b8c; )

Das erste zu gestaltende Element ist div#Rückmeldung. Es wird eine feste Position zugewiesen und im Browserfenster verankert. Danach folgt die Definition für div .Abschnitt und fünf farbige Elemente Spanne. Diese Elemente unterscheiden sich lediglich in der Hintergrundfarbe, die für jede Klasse separat vergeben wird.

Ganz unten im dargestellten Teil der CSS-Datei werden die Regeln für die Darstellung des Textbereichs definiert.

style.css – Teil 2

#feedback a.submit( background:url("img/submit.png") no-repeat; border:none; display:block; height:34px; margin:20px auto 0; text-decoration:none; text-indent: -99999px; Breite:91px; ) #feedback a.submit:hover( Hintergrundposition:links unten; ) #Feedback a.submit.working( Hintergrundposition:oben rechts !important; Cursor:default; ) #feedback .message ( Schriftfamilie:Corbel,Arial,serifenlos; Farbe:#5a665b; Textschatten:1px 1px 0 #b3c2b5; Rand unten:20px; ) #feedback .arrow( Hintergrund:url("img/arrows.png ") no-repeat; float:right; width:23px; height:18px; position:relative; top:10px; ) #feedback .arrow.down( background-position:left top;) #feedback h6:hover .down( Hintergrundposition:links unten;) #feedback .arrow.up( Hintergrundposition:rechts oben;) #feedback h6:hover .up( Hintergrundposition:rechts unten;) #feedback .response( Schriftgröße:21px; margin-top:70px; text-align:center; text-shadow:2px 2px 0 #889889; color:#FCFCFC; display:block; )

Der zweite Teil des Stylesheets definiert das Aussehen der Senden-Schaltfläche. Beachten Sie, dass es drei Schaltflächenzustände gibt, deren Bilder in einer Datei für das Hintergrundbild enthalten sind: einreichen.png. Sie werden nur bei Bedarf angezeigt.

jQuery

Das Feedback-Formular hat zwei Zustände – minimiert und maximal. Beim Booten wird der Standardzustand auf den minimierten Zustand unten rechts auf dem Bildschirm gesetzt. Und jQuery bringt das Formular in seinen maximalen Zustand, wenn der Benutzer auf die Kopfzeile klickt. Diese Funktionalität wird durch das Binden eines Ereignisses und das Durchführen einfacher Animationen erreicht.

script.js – Teil 1

$(document).ready(function())( // Relative URL des Submit.php-Skripts. // Sie müssen sie wahrscheinlich ändern. var subscribeURL = "submit.php"; // Das Feedback-Objekt zwischenspeichern: var feedback = $( "#feedback"); $("#feedback h6").click(function())( // Animationseigenschaftswerte werden // in einem separaten Objekt gespeichert: var anim = ( mb: 0, // Unterer Rand pt: 25 // Oberer Abstand); var el = $(this).find(".arrow"); if(el.hasClass("down"))( anim = ( mb: -270, pt : 10); ) // Die erste Animation verschiebt das Formular nach oben oder unten und die zweite bewegt den // Titel so, dass er an der minimierten Version ausgerichtet ist feedback.stop().animate((marginBottom: anim.mb)); feedback.find(".section").stop() .animate((paddingTop:anim.pt),function())( el.toggleClass("down up"); )); ));

Um den Code einfach und übersichtlich zu halten, wird oben ein Animationsobjekt erstellt, das die Werte für die Animation enthält, und der Operator platziert Wenn. Abhängig von der Existenz der Klasse „ runter„Auf dem Pfeil erweitern oder reduzieren wir die Form.

Zweiter Teil script.js kümmert sich um die Arbeit mit AJAX send.php.

script.js – Teil 2

$("#feedback a.submit").live("click",function())( var button = $(this); var textarea = feedback.find("textarea"); // Wir verwenden die Arbeiterklasse nicht Nur zum Festlegen von Stilen für die Schaltfläche zum Senden von Daten, // sondern auch als eine Art Sperre, um die mehrfache Generierung des Formulars zu verhindern. if(button.hasClass("working") || textarea.val().length< 5){ return false; } // Запираем форму и изменяем стиль кнопки: button.addClass("working"); $.ajax({ url: submitURL, type: "post", data: { message: textarea.val()}, complete: function(xhr){ var text = xhr.responseText; // Данная операция помогает пользователю определить ошибку: if(xhr.status == 404){ text = "Путь к скрипту submit.php неверный."; } // Прячем кнопку и область текста, после которой // мы показывали полученный ответ из submit.php button.fadeOut(); textarea.fadeOut(function(){ var span = $("",{ className: "response", html: text }) .hide() .appendTo(feedback.find(".section")) .show(); }).val(""); } }); return false; }); });

Für die Interaktion verwenden wir die AJAX-Methode $.ajax() von jQuery send.php. Diese Methode bietet etwas mehr Kontrolle über die Verbindung als $.get() und $.post() .

Einer der Vorteile der Methode ist die Sichtbarkeit der Objekteigenschaften während der gesamten „gesamten“ Callback-Funktion. Hier prüfen wir den Status der Antwort auf Konformität Fehler 404 - Seite nicht gefunden) und zeigen Sie dem Benutzer eine Nachricht an, in der er ihn auffordert, den Pfad zu überprüfen sendURL.

Jetzt ist es an der Zeit, mit dem letzten Teil fortzufahren – PHP.

PHP

PHP verarbeitet die von AJAX gesendeten Daten, validiert sie und sendet eine E-Mail-Nachricht an die angegebene Adresse.

send.php

// Hier müssen Sie Ihre Adresse eingeben $emailAddress = " [email protected]"; // Verwenden Sie die Sitzung, um Überschwemmungen zu verhindern: session_name("quickFeedback"); session_start(); // Wenn das letzte Formular vor weniger als 10 Sekunden gesendet wurde, // oder der Benutzer in der letzten Stunde bereits 10 Nachrichten gesendet hat if($_SESSION[ "lastSubmit"] && (time() - $_SESSION["lastSubmit"]< 10 || $_SESSION["submitsLastHour"] >10))( die("Bitte warten Sie ein paar Minuten, bevor Sie die Nachricht erneut senden."); ) $_SESSION["lastSubmit"] = time(); $_SESSION["submitsLastHour"]++; erfordern „phpmailer/class.phpmailer.php“; if(ini_get("magic_quotes_gpc"))( $_POST["message"] = stripeslashes($_POST["message"]); ) if(mb_strlen($_POST["message"],"utf-8")< 5){ die("Ваше сообщение слишком короткое."); } $msg = nl2br(strip_tags($_POST["message"])); // Используем класс PHPMailer $mail = new PHPMailer(); $mail->IsMail(); // Adresse des Empfängers hinzufügen $mail->AddAddress($emailAddress); $mail->Subject = "Neue E-Mail aus dem Feedback-Formular"; $mail->MsgHTML($msg); $mail->AddReplyTo("noreply@".$_SERVER["HTTP_HOST"], "Feedback-Formular auf Demoseite"); $mail->SetFrom("noreply@".$_SERVER["HTTP_HOST"], "Feedback-Formular auf der Demoseite"); $mail->Send(); echo „Danke!“;

Wir verwenden zunächst die Sitzungsverwaltung, um festzustellen, wie oft ein Benutzer in der letzten Stunde eine Formularübermittlung verwendet hat, und ermitteln außerdem die Zeit, die seit der letzten Übermittlung vergangen ist. Wenn seit dem letzten Versand weniger als 10 Sekunden vergangen sind oder der Benutzer innerhalb der letzten Stunde bereits mehr als 10 Nachrichten gesendet hat, wird eine Fehlermeldung angezeigt.

Die E-Mail wird mit der PHPMailer-Klasse versendet. Aufmerksamkeit! Es funktioniert nur mit PHP5.

Mehrere Methoden PHPMailer Wird zur Konfiguration ausgehender E-Mails verwendet. Die IsMail()-Methode weist die Klasse an, eine interne PHP-Funktion zu verwenden mail(). Die AddAddress()-Methode fügt die Adresse des Empfängers hinzu (Sie können durch zusätzliche Aufrufe dieser Methode mehr als einen Empfänger hinzufügen). Nachdem Sie den Betreff des Briefes und den Text hinzugefügt haben, wird die Adresse für Antworten angegeben und die Nachricht wird gesendet.

Bereit!

Abschluss

Mit diesem Formular können Sie ein schnelles Feedback Ihres Website-Besuchers organisieren. Eine sehr niedrige Hürde für die Einreichung – Sie müssen nur ein Textfeld ausfüllen und auf eine Schaltfläche klicken – schafft eine großartige Umgebung für Besucher Ihrer Seiten, um mit dem Teilen ihrer Ideen zu beginnen. Das Skript ist außerdem gut strukturiert und lässt sich leicht anpassen, sodass Sie es mit minimalem Aufwand auf Ihrer Website verwenden können.

In dieser Lektion machen wir uns mit der Funktion mail() am Beispiel der Erstellung eines Feedback-Formulars in PHP und dem anschließenden Versand der empfangenen Daten per E-Mail vertraut.

Dazu erstellen wir zwei Dateien – forma.php und mail.php. Die erste Datei enthält nur ein Formular mit Feldern, in die der Benutzer Daten eingeben kann. Im Formular-Tag befindet sich eine Schaltfläche "Schicken" und das Aktionsattribut, das sich auf den Handler mail.php bezieht, über den beim Klicken auf die Schaltfläche auf die Daten aus dem Formular zugegriffen wird "Schicken". In unserem Beispiel werden die Formulardaten an eine Webseite namens „/mail.php“ gesendet. Diese Seite enthält ein PHP-Skript, das die Formulardaten verarbeitet:

Formulardaten werden mit der POST-Methode gesendet (verarbeitet als $_POST). $_POST ist ein Array von Variablen, die über die POST-Methode an das aktuelle Skript übergeben werden.

Unten sehen Sie den Inhalt der Datei forma.php, deren Felder auf einer Website vom Benutzer selbst ausgefüllt werden. Alle Felder zur Dateneingabe müssen ein Namensattribut haben, die Werte schreiben wir selbst, basierend auf der Logik.

Feedback-Formular in PHP per E-Mail gesendet


Feedback-Formular in PHP





Eine Nachricht hinterlassen:
Ihr Name:



Email:

Telefonnummer:

Nachricht:

Der Textbereich kann eine unbegrenzte Anzahl von Zeichen enthalten-->

So sieht das Formular im Browser optisch aus.

Als nächstes schreiben wir den Code für die Datei mail.php. Wir erfinden eigene Namen für die Variablen. In PHP beginnt eine Variable mit einem $-Zeichen und dann dem Variablennamen. Der Textwert der Variablen wird in Anführungszeichen gesetzt. Mithilfe von Variablen wird der Inhalt des Formulars an die E-Mail-Adresse des Administrators gesendet, indem einfach der Name des Formularelements in eckige Klammern gesetzt wird – der Namenswert.

Somit werden die Daten aus dem $_POST-Array in die entsprechenden Variablen übertragen und mit der Mail-Funktion an Mail gesendet. Füllen Sie unser Formular aus und klicken Sie auf die Schaltfläche „Senden“. Vergessen Sie nicht, Ihre E-Mail-Adresse anzugeben. Der Brief kam sofort an.

In diesem Artikel erfahren Sie, wie Sie in PHP ein Feedback-Formular für Ihre Website erstellen. Das Skript verarbeitet die vom Benutzer eingegebenen Daten und sendet das Ergebnis an die von Ihnen benötigte E-Mail. Wir werden eine Option in PHP bereitstellen, wenn das Feedback-Formular funktioniert, aber beim Senden des Briefes ein Fehler auftritt. In diesem Fall schreiben wir alle eingegebenen Informationen in eine Datei.

Also, fangen wir an, zunächst markieren wir die Seite und schreiben Stile dafür. Das Markup wird ein reguläres Feedback-Formular mit zwei Eingaben (Telefon, E-Mail) und einem Textbereich umfassen, in den der Benutzer unserer Idee nach seine Nachricht eingibt. Wir werden den Formularhandler auf einer separaten Seite platzieren.

Feedback-Formular

Telefonnummer eingeben:

Ihre E-Mail:

Ihre Frage:

Schreiben wir die Stile:

Html, Körper( Höhe: 100 %; Rand: 0; ) html( Hintergrundfarbe: #fff; Farbe: #333; Schriftart: 12px/14px Verdana, Tahoma, serifenlos; Cursor: Standard; ) #feedback-form (Hintergrundfarbe: #ececec; Rand: 50px automatisch 0; Textausrichtung: Mitte; Breite: 430px; Polsterung: 15px;) #feedback-form h2(margin-bottom: 25px;) #feedback-form input, #feedback -form textarea( Hintergrundfarbe: #fff; Rand: 1px durchgezogen #A9A9A9; Polsterung: 1px 5px; Breite: 90%; ) #feedback-form input( height: 26px; ) #feedback-form textarea( height: 75px; padding-top: 5px; ) #feedback-form input( margin-top: 15px; Hintergrundfarbe: #0B7BB5; Rand: 1px einfarbig #CCCCCC; Farbe: #FFFFFF; Schriftstärke: fett; Höhe: 40px; Linien- Höhe: 40px; Texttransformation: Großbuchstaben; Breite: 225px; Cursor: Zeiger; )

Als Ergebnis all dieser Aktionen erhalten Sie dieses Formular:

Jetzt ist es an der Zeit, den Server in Angriff zu nehmen. Unser Skript wird mehrere Teile umfassen:

• Einstellung;
• Sekundärfunktionen;
• Verarbeitung eingehender Daten;
• Nachrichtenausgabe.

Alle diese Teile sind natürlich an Bedingungen geknüpft, da uns niemand daran hindert, den Code durcheinander zu bringen oder umgekehrt wichtige Teile in andere Dateien zu verschieben. Aber ich denke, es ist besser, den Handler in einer Datei zu erstellen, damit er bequem mit anderen Projekten verbunden werden kann.

Einstellungen

In dieser Phase erstellen wir drei Variablen: $my_email (das Postfach, an das die Daten gesendet werden), $path_log (der Pfad zur Protokolldatei) und $time_back (die Zeit, zu der der Benutzer zur Site zurückkehrt).

// Geben Sie Ihr Postfach an $my_email = " [email protected]"; // Geben Sie an, wo die Protokolle gespeichert werden sollen $path_log = "log.txt"; // Zeit, die der Benutzer zur Website zurückkehrt (Sek.) $time_back = 3;

Sekundärfunktionen

Hier beschreiben wir fünf Funktionen, die die Datenverarbeitung vereinfachen.

Vorlagen für die Nachrichtenausgabe:

Funktion error_msg($message)( $message = "".$message.""; return $message; ) function success_msg($message)( $message = "".$message.""; return $message; )

Aus dem Formular erhaltene Daten löschen:

Funktion clear_data($var)( return trim(strip_tags($var)); )

Brief senden:

Funktion send_mail($email, $subj, $text, $from)( $headers = "From: ".$from." \r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Content-Type: text/html; charset=utf-8 \r\n"; $result = mail($email, $subj, $text, $headers); if(!$result)( return false; ) true zurückgeben; )

Und die letzte Funktion, die das Telefon und die E-Mail auf die korrekte Aufnahme ihres Formats überprüft.

Funktion check_format($data, $type)( switch($type)( case "email": $pattern = "/^*@(+(*+)*\.)++$/i"; if(preg_match( $pattern, $data))( return true; ) break; case "phone": $pattern = "/^(\+?\d+)?\s*(\(\d+\))?[\s-] *([\d-]*)$/"; if(preg_match($pattern, $data))( return true; ) break; ) return false; )

Wie Sie sehen, sind alle von uns geschriebenen Funktionen klein. Sie könnten sie außerhalb des Datenverarbeitungsbereichs belassen, aber wenn Sie etwas ändern oder erweitern müssen, zum Beispiel check_format(), ist dies viel einfacher und bequemer.

Verarbeitung eingehender Daten

Zunächst ermitteln wir, von welcher Seite der Nutzer kam. Dann definieren wir die Variablen, in denen unsere Nachrichten und der Status des Briefversands gespeichert werden.

// Vorherige Seite herausfinden $prev_page = $_SERVER["HTTP_REFERER"]; // Unsere Nachrichten $msg = ""; // E-Mail-Status $status_email = "";

Um Probleme mit der Kodierung zu vermeiden, geben wir dies nun über den Header an.

Header("Content-Type: text/html; charset=utf-8");

If($_SERVER["REQUEST_METHOD"] == "POST")( if(isset($_POST["number"], $_POST["email"], $_POST["question"]))( $number = clear_data ($_POST["number"]); $email = clear_data($_POST["email"]); $question = clear_data($_POST["question"]); if(check_format($number, "phone") && check_format($email, "email") && !empty($question))( // Einen Brief bilden $e_title = "Neue Nachricht"; $e_body = ""; $e_body .= ""; $e_body .= "Телефон: ".$number; $e_body .= "!}
"; $e_body .= "Mail: ".$email; $e_body .= "
"; $e_body .= "Frage: ".$question; $e_body .= ""; $e_body .= ""; // ENDE Einen Brief bilden if(send_mail($my_email, $e_title, $e_body, $prev_page) ) ( $status_email = "success"; $msg = success_msg("Vielen Dank für Ihre Frage.
Wir werden Ihnen so schnell wie möglich antworten."); )else( $status_email = "error"; $msg = error_msg("Beim Senden der E-Mail ist ein Fehler aufgetreten."); ) // In Datei schreiben $str = " Uhrzeit: „.Datum („d-m-y G:i:s“).“\n\r“; $str .= „Telefon: „.$Nummer.“\n\r“; $str .= „Mail: „ .$email." \n\r"; $str .= "Frage: ".$question."\n\r"; $str .= "E-Mail: ".$status_email."\n\r"; $ str .= "= =====================================\n\r"; file_put_contents ($path_log, $str, FILE_APPEND); )else( $msg = error_msg( "Formular korrekt ausfüllen!"); ) )else( $msg = error_msg("Ein Fehler ist aufgetreten!"); ) )else( Exit ; )

Im geschriebenen Code stellen wir fest, ob das Formular übermittelt wurde, andernfalls schließen wir diese Datei mit der Exit-Funktion. Als nächstes prüfen wir, ob Zellen mit unseren Daten im POST-Array vorhanden sind. Wenn sie angekommen sind, bereinigen wir sie von eventuellem Müll. Nach der Bereinigung überprüfen wir die E-Mail- und Telefonformate sowie das Vorhandensein von Text in der Fragevariablen. Als nächstes erstellen wir einen Brief, versenden ihn und schreiben Protokolle, in denen wir zusätzlich zu den Daten den Status des Briefversands speichern. Auf diese Weise können wir den Betrieb der Funktion mail() verfolgen und gleichzeitig keine Daten verlieren.

Nachrichtenausgabe

Wir müssen den Benutzer lediglich über einen erfolgreichen oder „nicht so“ abgeschlossenen Vorgang informieren und ihn mit dem Formular zur Website zurücksenden. Dazu verwenden wir Markup mit PHP-Skripteinbindungen.

Um den Benutzer zurück zur Site umzuleiten, verwenden wir das Refresh-Meta-Tag, in das wir PHP-Code mit den bereits erstellten Variablen einfügen. Wir müssen außerdem ein wenig JavaScript verwenden, um die Seite etwas dynamischer zu gestalten. Wir schreiben eine Funktion timeBack(), die vor der Umleitung die Sekunden in umgekehrter Reihenfolge zählt.