Anpassbares Feedback -Formular: Wie erstelle ich online? Wie erstelle ich ein wunderschönes Pop -UP -Feedback -Formular HTML und PHP mit einem Telefon und sendet eine E -Mail -Bestellung?
Anweisungen zum Erstellen eines Feedback -Formulars für HTML und CSS sowie eine Sammlung von bereitgestellten Formularen und Handbuch für ihre Verbindung und Konfiguration.
Navigation
Heutzutage kann jede Person, die nicht einmal Programmierkenntnisse verfügt, problemlos ihre eigene Website erstellen, indem eine ready -hergestellte Vorlage aus dem Netzwerk heruntergeladen und auf der verwendeten Engine installiert wird.
Allerdings kann nicht jede bereitgestellte Vorlage die Anforderungen des Benutzers erfüllen. Viele von ihnen sind in einer „Käse“ -Form dargestellt und haben keine so wichtigen Abschnitte und Funktionen wie beispielsweise ein Feedback -Formular.
Dieser Site -Block ist für Eigentümer von Online -Shops und großen Informationsportalen äußerst wichtig. In unserem Artikel finden Sie Informationen, wie Sie unabhängig ein Feedback -Formular erstellen, wo Sie eine fertige Vorlage herunterladen und wie Sie sie auf Ihrer Website installieren können.
Was ist ein Feedback -Formular und warum ist es so notwendig?
- Eine der wichtigsten Funktionen einer anständigen Website ist das Feedback -Formular. Es dient für die Interaktion zwischen dem Besucher und der Ressourcenverwaltung. Mit seiner Hilfe können Sie also einen Berufung auf den technischen Support schreiben oder die erforderlichen Daten an die Verwaltungen senden. Zum Beispiel Zahlungsdetails in Online -Stores oder im Namen der bestellten Waren. Es wird dringend empfohlen, ein solches Formular in Ihrem Portal zu haben, da ständiger Kontakt mit seinen Besuchern und Kunden der Schlüssel zu seiner erfolgreichen Entwicklung ist.
Das Feedback -Formular ist eine separate Seite oder eine separate Block (Abteilung), die aus mehreren Eingangsfeldern des Textes und der Schaltfläche „Senden“ besteht. In der Regel hat das Standardformular die folgenden Felder:
- Vollständiger Name
- E-Mail (E-Mail-Adresse)
- Handynummer
- Die Adressen Ihrer Website
- Feld zum Eingeben von Textnachrichten
Die Felder können jedoch so viel sein, wie Sie möchten, und sie können so unterschrieben werden, wie Sie möchten. Es hängt alles von Ihren Bedürfnissen und Fantasie ab.
- Darüber hinaus fügen einige Eigentümer Google- oder Yandex -Karten zum Feedback -Formular hinzu, Formulare der Eingabe der Website mit sozialen Netzwerken "vkontakte", "Facebook", "Google+" usw. Wir werden jedoch darüber sprechen, die einfachste Form des Feedbacks zu erstellen, für die Sie ausschließlich die Grundlagen der Markierungssprache benötigen Html und nichts weiter.
Wie erstelle ich das einfachste Feedback -Formular für die Site auf HTML und PHP?
Um den Artikel nicht in ein langweiliges Lehrbuch zu verwandeln Html Und Sie haben eine allgemeine Vorstellung davon, wie es funktioniert. Wenn Sie keine solchen Fähigkeiten haben, bevor Sie die Schaffung eines Formulars in Anspruch nehmen, wird dringend empfohlen, Ihr Wissen über eine kostenlose Ressource ein wenig zu verschärfen htmlbook.ru. Andernfalls können Sie dieses Unternehmen nicht nur aufgeben, sondern auch den Code Ihrer Website verderben.
Um die Arbeitsform des Feedbacks neu zu erstellen, benötigen Sie drei wichtige Elemente, von denen eine für die Markierung und Struktur der Form verantwortlich ist ( Html), die zweite für sein externes Design ( CSS) und die dritte für die Verarbeitung und Übertragung von Daten (( Php). Beginnen wir in Ordnung:
Schreiben Sie einen HTML -Code für Feedback
- Schritt 1. Um die Form in Form anzuzeigen Html Tag wird verwendet ‹Form› ‹/Form›. Im Inneren werden festgelegte Größen, Stile und andere wichtige Eigenschaften der Form festgelegt. Bei der Aufnahme des Tags selbst muss er eine Klasse festlegen, um anzuzeigen CSS Stile.
- Schritt 2. Um das erste Feld unserer Form im Tag zu erstellen \u003cForm\u003e Sie müssen Block -Tag schreiben \u003cP\u003eDas ist verantwortlich für die Erstellung einer neuen Linie.
- Schritt 3. Innen -Tag \u003cP\u003e Aus der neuen Zeile geben wir das folgende Tag ein: ‹Label für \u003d" Name "›Name \u003c/Etikett\u003e. Er ist verantwortlich für die Namen des zukünftigen Fachgebiets.
- Schritt 4. Auf der neuen Zeile befindet sich alles im selben Tag \u003cP\u003e Wir verschreiben das Tag des Erstellens eines Feldes mit den folgenden Werten: ‹Eingabe type \u003d" text »name \u003d" name "placeholder \u003d"Gib deinen Namen ein "Erforderlich \\\u003e. Parameter " typ \u003d "Text"" Legt die Art des Textfelds und den Parameter fest " platzhalter \u003d "Gib deinen Namen ein «» Legt den ersten Text in diesem Textfeld fest. Parameter " erforderlich»Es macht dem Site -Besucher klar, dass dieses Feld zum Ausfüllen obligatorisch ist. Infolgedessen sollten Sie ein Formular mit einem Feld erhalten, wie im Screenshot unten gezeigt.
- Schritt 5. Fügen Sie mit dem obigen Beispiel die verbleibenden Felder hinzu, die Sie benötigen \u003cP\u003e. Verwenden Sie das Tag, um ein Feld mit Textnachricht zu installieren ‹TextArea name \u003d" message "cols \u003d" 50 "Zeilen \u003d" 6 "erforderlich› ‹/textarea›. Optionen " cols" Und " reihen»Sind für die Breite und Höhe des Textfelds verantwortlich. Sie können die Parameter festlegen, die Ihnen mehr mögen. Sie sollten so etwas im Screenshot unten gezeigt lassen.
- Schritt 6. Um sich vor Bots zu schützen, die heute im Internet ziemlich viel sind, erstellen Sie eine weitere Linie mit dem Tag ‹Eingabename \u003d" Bezspama "type \u003d" text "style \u003d" display: keine "value \u003d" " /›. Aufgrund des Parameters " style \u003d "Anzeige: Keine"»Dieses Feld wird von bloßen Sterblichen nicht sichtbar sein, aber die Bots werden automatisch gefüllt. So können Sie immer eine lebende Person von dem Programm unterscheiden.
- Schritt 7. Die letzte Phase der Markierung wird die Erstellung der Sendungsknopf sein. Dafür wird Tag verwendet \u003cTaste\u003e. Erstellen Sie einen neuen Block \u003cP\u003e Geben Sie den Schaltflächencode mit den folgenden Parametern darin ein: ‹Button Class \u003d" Senden "Typ \u003d" Senden "›eine Nachricht schicken \u003c/Taste\u003e. Ein ähnliches Ergebnis sollte sich herausstellen, wie im Screenshot gezeigt.
Arbeiten mit Cascading -Stilen (CSS)
- Wie Sie bereits bei der Markierung bemerkt haben, haben wir uns als etwas sehr krumm, unglaubliches und ekelhaftes herausgestellt. Um dem Feedback -Formular ein mehr oder weniger ordentliches Aussehen zu geben, eine Sprache Html Es wird nicht genug sein. Zu diesem Zweck müssen Sie auf die Verwendung von Stilen zurückgreifen CSS.
- Für den Fall, dass Sie den Rat genutzt haben, um Ihre grundlegenden Fähigkeiten in der Ressource zu verschärfen htmlbook.ruStellen Sie dann bestimmte Designparameter für alle Teile des Formulars ein CSS Es wird für Sie nicht schwierig sein. Wenn Sie keinen Wunsch oder Zeit haben, mit all dem zu spielen, geben wir Ihnen einen bereitgestellten Code und sagen Ihnen, wie Sie ihn verbinden können.
Styles verbinden CSS Zu Html Sie können zwei Möglichkeiten:
- Kopieren Sie den Code aus unserer Kaskadierungstabelle nach unten in der Datei style.cssdie am Standort Hosting vorhanden ist
- Verschieben Sie unsere Styles -Datei in Ihr Hosting und verbinden Sie sie
Datei style.css Verbindet sich im Tag im Tag \u003cKopf Kopf\u003e Mit einem Skript ‹Link rel \u003d" Stylesheet "Media \u003d" Bildschirm "href \u003d" style.css "› ››. Wenn eine Datei mit Styles nicht im selben Ordner wie die Haupt -HTML -Datei liegt, müssen Sie den Pfad dazu angeben. In unserer Datei mit Stilen hat jedes Element eine Bezeichnung. Wenn Sie möchten, können Sie die Parameter für sich selbst ändern und nur durch grundlegende Programmierfähigkeiten geleitet.
Php -Dateiverbindung und Festlegen
Wie bereits erwähnt, Skript Php ist für die Ausführung des Feedback -Formulars verantwortlich. Um das Prinzip der Spracharbeit mehr oder weniger zu verstehen PhpSie müssen ein großes Volumen an Literatur lesen und eine anständige Anzahl von Stunden zum Üben verbringen. Daher wie im Fall von CSSWir bieten Ihnen eine vorgefertigte Datei mit einem PHP-Skript, das nur zum Dokument mit dem Formular angehängt wird.
Im Gegensatz zur Datei style.cssEine Datei mit einem PHP -Skript ist in den Eigenschaften des Formulars selbst beigefügt. Beginnen wir in Ordnung:
- Schritt 1. Öffnen Sie den zuvor geschriebenen Code und finden Sie eine Zeile mit einem offenen Formular -Tag. Fügen Sie es dazu hinzu. " action \u003d "contact-form.php"" Und " method \u003d "post"". Sehen Sie sich ein Beispiel im Screenshot an.
- Schritt 2. Laden Sie unsere PHP -Datei herunter und platzieren Sie sie im Hosting im selben Ordner, in dem sich das HTML -Dokument befindet. Somit interagieren PHP- und HTML -Dateien miteinander.
- Schritt 3. Als nächstes müssen Sie das Skript für sich selbst konfigurieren. Öffnen Sie die Datei und legen Sie die Variablen fest, wodurch sie die gleichen Namen wie im HTML -Skript zugewiesen werden. Wenn Sie dem Formular zusätzliche Felder hinzugefügt haben, fügen Sie sie genau wie im Screenshot im PHP -Skript hinzu.
- Schritt 4. Als nächstes müssen Sie zwei weitere Variablen mit der Adresse Ihrer E -Mail und dem Thema des Briefes hinzufügen, der in Ihrem Box angezeigt wird. In einer Linie mit einer Variablen " $ Adresse"Geben Sie eine E-Mail an und in der Linie" $ sub»Das Thema des Briefes wird im Screenshot angezeigt.
- Schritt 5. In einer Linie mit einer Variablen " $ ms»Das Format des Briefes, den Sie per Post erhalten, ist konfiguriert. Sie können es unverändert umschreiben oder Ihren eigenen Geschmack bearbeiten.
- Schritt 6. Alle anderen Zeilen sind für das Senden der Nachricht verantwortlich und enthalten die Schutzeinstellungen aus den Bots, sodass sie unverändert bleiben müssen. Infolgedessen sollte der vollständige Code in der folgenden Screenshot so etwas aussehen.
Laden Sie CSS- und PHP -Dateien für Feedback herunter
Nachdem Sie alle Aktionen am Ausgang ausgeführt haben, erhalten Sie ein so einfaches, ordentliches Feedback -Formular
Eine Auswahl an schönen Designformen von Feedback zu HTML und CSS für verschiedene Zwecke
- Basierend auf den obigen Anweisungen können Sie das Feedback -Formular leicht zu Ihrem eigenen Geschmack „zeichnen“. Wenn Sie jedoch keine Zeit oder Wunsch haben, unabhängig ein Formular von Grund auf neu zu erstellen, finden Sie im Internet bereitgestellte Designformulare und verfügen über grundlegende Fähigkeiten Html Bearbeiten Sie sie selbst.
- Nachdem wir ein wenig gesucht hatten, fanden wir für Sie eine Auswahl von für Sie 35 Schöne Pop -up -Designformen von Feedback, die geschrieben sind Html Und CSS. Diese Formen eignen sich für Motoren wie z. WordPress Und JoomlaSie haben eine einfache und einfache Einstellung aus dem Bedienfeld und eignen sich auch perfekt für Websites ohne Motor.
Laden Sie eine Auswahl von Designerformen von Feedback für Websites herunter
Guten Tag. Nachdem Sie auf die Schaltfläche Senden geklickt haben, eine solche Nachricht.
WARNUNG: Header Information-Header-ALREADS-gesendet von (Ausgabe begonnen at /home/u345/domains/1kontakt.ru/public_html/contact-form.php:1) in/home/Ume) in/Home/UNDU/Public_html /Contact-form/contact-form.php in Zeile 30
Der Brief wird gesendet. Nach 5 Sekunden kehren Sie zu Seite XXX zurück
Der Brief kommt nicht.
Auch das Umleiten auf die Seite tritt nicht auf.
Ja, das Formular ist wirklich cool, aber ich habe nicht genug Wissen, um all diesen Code zu verstehen. Bisher habe ich einen Dienst für die Generierung von Formdesigner -Formularen gefunden. In wenigen Minuten habe ich eine ähnliche Form gemacht. Ich empfehle jedem, der bei der Programmierung dieses Dienstes entstanden ist!