Speisekarte
HeimatSystemisch

Schreiben an den Herausgeber Kontaktformular ID b 1147. Feedback-Formular-Plugins für WordPress. Feldvalidierung erzwingen

Ein Kontaktformular ist ein wesentliches Merkmal der meisten Websites. Aus diesem Grund gibt es im WordPress-Verzeichnis so viele Kontaktformular-Plugins. Einer der beliebtesten ist Kontakt Formular 7. Das Plugin ermöglicht es Ihnen, Formulare jeglicher Art zu erstellen; sehr flexibel und einfach einzurichten; entwickelt sich seit vielen Jahren und enthält viele Entwicklungen.

Erstellen und Anzeigen von Kontaktformularen

Formulare im Admin erstellen

Nach der Installation des Plugins erscheint der Menüpunkt „Contact Form 7“, über den Sie Formulare erstellen und löschen können.

Das Formular im Bild wurde automatisch erstellt, als das Plugin aktiviert wurde.

Wir verwenden das Standardformular, dazu erstellen wir eine „Kontakt“-Seite und fügen dort den Shortcode des Formulars ein.

Vorderseite der Website

Jetzt speichern wir den Artikel und sehen, wie unser Formular aussieht (unter Verwendung des Twenty Sixteen-Designs):

Das Bild zeigt das Formular nach dem gesendeten Brief (dies wird durch den Hinweis am Ende des Formulars angezeigt).

Formularanpassung (Erstellen komplexer Formulare)

Das obige Beispiel zeigt, wie Sie ein vorgefertigtes und sehr einfaches Kontaktformular einfügen. Und jetzt schauen wir uns an, wie man ein schwierigeres Formular erstellt. Dazu kehren wir zum Admin-Panel, zum Formular-Manager zurück und gehen zur Bearbeitung des Standardformulars.

Geben Sie im oberen Feld - dem Namen des Formulars (es ist nur im Admin-Bereich sichtbar) einen für Sie klaren Namen an, zum Beispiel: "Feedback über die Website", "Bewerbungsformular", "Formular Rückmeldung" usw.

Unter dem Titel befindet sich ein Shortcode. Wir verwenden es in Datensätzen, um das Formular anzuzeigen.

Und unten sind vier Registerkarten:

  1. Formularvorlage
  2. Brief
  3. Zusätzliche Einstellungen

Betrachten wir jede Registerkarte separat.

Formularvorlage

Auf dieser Registerkarte können Sie die Felder und konfigurieren Aussehen Formen. Der Arbeitsbereich ist HTML-Editor WP. Nur statt der üblichen Schaltflächen sehen wir Schaltflächen zum Einfügen verschiedener Formularfelder.

Formularlayout

Für das Layout können Sie HTML-Tags und Plugin-Shortcodes verwenden. Shortcodes fügen Formularfelder hinzu und HTML-Tags ermöglichen es Ihnen, eine beliebige HTML-Struktur zu erstellen. Unser Standardformular sieht beispielsweise so aus:

Und wenn es in einem Beitrag angezeigt wird, wird es zu diesem HTML:

Shortcode-Syntax

Lassen Sie uns auf die Schaltfläche "Text" klicken. Es öffnet sich ein Fenster, in dem wir Attribute für das Textfeld angeben können. Geben Sie an und klicken Sie auf „Variable einfügen“.

Das Tag wird später in ein Textfeld mit HTML-Code umgewandelt:

Shortcodes können bequem mit dem Shortcode-Konstruktor erstellt werden.

Der Konstruktor erlaubt es Ihnen jedoch nicht, den Shortcode zu ändern (Sie können dort nur einen Shortcode erstellen). Es gibt zwei Möglichkeiten, den Shortcode zu ändern:

  1. löschen und mit dem Konstruktor neu erstellen.
  2. Studieren Sie die Syntax und korrigieren Sie das Feld Shortcode manuell.

Mit dem Designer finden Sie es selbst heraus.

Und hier werden wir die Syntax des Shortcodes analysieren.


Betrachten Sie beispielsweise ein Textfeld-Tag mit zusätzlichen Optionen:

Text (erforderlich) Feldtyp: Text, Auswahl, Passwort, Zahl usw. (in diesem Fall ein Textfeld). Bestimmt, in welches Formularelement unser Tag konvertiert wird, was bedeutet, welche Art von Daten es akzeptiert. * Ein Sternchen macht das Feld zu einem Pflichtfeld (das Formular wird nicht übermittelt und es wird eine Benachrichtigung angezeigt, dass das Feld ausgefüllt werden muss). Kundenname (erforderlich) Der Name des Feldes wird als Namensattribut in der Eingabe verwendet und wird auch verwendet, wenn die Vorlage des gesendeten Briefes gebildet wird. id:my-id Das id-Attribut bei der Eingabe mit dem Wert my-id. Wird zur Dekoration verwendet. class:my-class Das class-Attribut bei der Eingabe mit dem Wert my-class. Wird zur Dekoration verwendet. Platzhalter "(!LANG:Geben Sie einen Namen ein" Использовать текст "Введите имя" как placeholder. !}

Beachten Sie die Reihenfolge der Tag-Attribute: Zuerst kommt der Feldtyp, dann sein Name und erst dann zusätzliche Optionen.

Feldtypen

  • Textfelder: text , email , tel , url , textarea
  • Numerische Felder: Zahl , Bereich
  • Datumsfelder: Datum
  • Kontrollkästchen, Radios, Listen: Kontrollkästchen , Radio , auswählen
  • Datei-Upload-Feld: file
  • CAPTCHA: Captchac und Captchar
  • Umfragen: Quiz
  • Feld "Akzeptieren": Akzeptieren
  • Senden-Button: Senden
  • Benutzerdefinierter Feldtyp

Briefvorlage

Auf der zweiten Registerkarte können Sie die Vorlage (Layout) und die Eigenschaften des gesendeten Briefs anpassen. In den Feldern dieser Registerkarte können Sie spezielle Formularfeld-Tags verwenden – dies ermöglicht es, die im Formular angegebenen Daten im Brief zu versenden.

Die Tags bestehen aus Feldnamen aus der Formularvorlage. Zum Beispiel haben wir ein Textfeld mit dem Namen erstellt: . Jetzt können Sie das Tag in Ihrer E-Mail-Vorlage verwenden. Im Brief wird anstelle dieses Tags der Wert des vom Benutzer eingegebenen Felds (vollständiger Name) ersetzt.

E-Mail-Kopfzeilen:

    Denen - Postfach wohin die E-Mail gesendet wird. Sie können beliebig viele Felder durch Kommas getrennt angeben.

    Von - Name und E-Mail, von der der Brief kam. Normalerweise wird hier die Server-Mail angegeben (z [E-Mail geschützt]).

    Sie können eine beliebige E-Mail-Adresse angeben, aber wenn sich die E-Mail-Domäne von der Site-Domäne unterscheidet, wird das Formular dies nicht tun wird getestet werden und wird auf diesen Parameter „schwören“, obwohl weiterhin Briefe verschickt werden.

    Betreff – Der Titel der E-Mail. Es wird deutlich, aus welchem ​​Formular die Daten gesendet wurden. Der Betreff des Schreibens lautet beispielsweise „Fehler auf der Seite“, „Rückrufauftrag“ und so weiter. Wählen Sie einen Titel, um die Arbeit mit empfangenen Briefen zu erleichtern.

  • Zusätzliche Header - Reply-To: wird hier standardmäßig geschrieben. Der Reply-To-Header teilt uns mit, dass diese E-Mail beantwortet werden kann, indem Sie auf die Schaltfläche „Antworten“ klicken Mailprogramm, und das Form-Tag ist der Name des Felds aus der Vorlage. Benutzerdefiniert E-Mail wird anstelle dieses Tags eingefügt. Sie erhalten so etwas wie Reply-To: [E-Mail geschützt].
Briefkörper

Dies ist der nächste wichtige Teil dieser Registerkarte. Hier der Text des Schreibens. Im Text verwenden wir alle dieselben Formular-Tags (Feldnamen aus der Formularvorlage).

Analysieren wir den Standardbuchstaben:

Aus:<>Betreff: Nachricht: -- Gesendet von der Website Exploring the Contact Form 7 Plugin (http://test-wp.ru)

Wir hatten 4 Felder, die der Benutzer ausfüllte. Nach dem Senden der E-Mail werden die Tags zu Werten und wir erhalten eine E-Mail wie diese:

Von: Dmitri Betreff: Frage zum Kontaktformular 7 Nachricht: Hallo! Ich habe eine Frage zum Plugin Contact Form 7. Wie richte ich es ein? -- Gesendet von der Website Exploring Contact Form 7 Plugin (http://test-wp.ru)

Optionale Felder im Text der E-Mail

Wenn der Benutzer das Feld nicht ausfüllt, es aber im Text des Briefs verwendet wird, ist der Text des Briefs unvollständig. Zum Beispiel sagt der Körper Mann aus der Stadt, aber der Benutzer hat das Feld nicht ausgefüllt, was bedeutet, dass wir im Brief Mann aus der Stadt erhalten ... Eine solche Zeile im Brief ist überflüssig. Um diese Zeile aus der E-Mail zu entfernen, aktivieren Sie das Kontrollkästchen „Ausgabe von Zeilen mit leeren Nachrichten-Tags ausschließen“. Beachten Sie, dass dies nur funktioniert, wenn sich der Feldtext und der Shortcode in derselben Zeile befinden.

Option "HTML-Format des Briefes verwenden". Ermöglicht die Verwendung von HTML-Tags im Text der E-Mail. In diesem Fall können Sie eine begrenzte Liste verwenden HTML-Tags denn nicht alle E-Mail-Clients oder Dienste komplexes HTML-Markup korrekt verarbeiten können. Sie können verwenden: Tabellen, Aufzählungen, Kühnheit, Absätze und so weiter. Suchen Sie im Internet nach weiteren Einzelheiten.

Mit Contact Form 7 können Sie einen Brief an zwei Adressen senden, und die Einstellungen für jeden Brief sind unterschiedlich. Dies kann nützlich sein, wenn Sie eine E-Mail an den Site-Administrator senden müssen alle Informationen und ein Duplikat für den Manager, das nur Auftragsdaten enthält.

Benachrichtigungen zur Formularübermittlung

Auf dieser Registerkarte können Sie die Meldungen bearbeiten, die das Formular in einer bestimmten Situation anzeigt: wenn ein Brief erfolgreich oder nicht erfolgreich gesendet wurde oder wenn Fehler auftreten.

Briefvorlagen-Tags funktionieren in diesen Feldern nicht.

Zusätzliche Einstellungen

Diese Registerkarte ist für fortgeschrittene Benutzer gedacht und ermöglicht die Verwendung von JS-Code, um die Möglichkeiten des Formulars zu erweitern. Hängen Sie beispielsweise Ereignisse für Analysen auf.

Ich werde über die Verwendung dieser Funktionalität in einem separaten Artikel sprechen.

Viele Sites richten Feedback-Formulare ein, damit Benutzer dem Administrator eine Nachricht hinterlassen können, ohne die Site zu verlassen. Das beliebteste, qualitativ hochwertigste und bequemste einzurichten und zu verwenden ist das Plugin Kontaktformular 7- mit seiner Hilfe können Sie beliebige Kontaktformulare erstellen und nicht nur. Da das Plugin über eine Vielzahl unterschiedlicher Formulare und Felder verfügt, kann es für viele Aufgaben eingesetzt werden. Zum Beispiel habe ich es verwendet, um einen Fragebogen für einen Arbeitgeber und einen Arbeitssuchenden auf einer Rekrutierungsseite zu erstellen, um ein Bestellformular für ein Produkt auf einer Seite zu erstellen, die nur eine Produktlinie verkauft, ich habe dieses Plugin verwendet, um eine komplexe und umfangreiche Berechnung zu erstellen Formular für eine Baustelle, für diverse Feedbackbögen und andere Formulare. Aber darum geht es nicht, sondern darum, wie man das Kontaktformular in einem Popup-Fenster erscheinen lässt, damit man auf jeder Seite einen Button zum Aufrufen des Kontaktformulars machen kann, und nicht nur auf der Seite „Kontakte“?

Es ist wirklich nicht schwierig, aber Sie benötigen ein anderes Plugin mit dem FancyBox-Effekt. Ich persönlich mag diese beiden Plugins: Easy FancyBox oder FancyBox für WordPress, es gibt verschiedene ähnliche Plugins, aber beide funktionieren gut und ermöglichen es Ihnen trotzdem, Bilder darin zu öffnen das Popup.

Im Allgemeinen werden zwei Plugins installiert: Kontaktformular 7 und Einfache FancyBox Nachdem das Kontaktformular erstellt wurde, muss der Code noch der Vorlage hinzugefügt werden.

Der Code wird in das Site-Template in .php-Dateien eingefügt!

Popup-Kontaktformularcode im Code der Vorlagendatei festgelegt:

Fordern Sie einen Anruf an

Wenn Sie den Formularaufrufcode direkt in den visuellen Texteditor im TEXT-Modus einfügen, sieht der Code so aus:

Code mit einem Popup-Kontaktformular, das im visuellen Post-Editor (im Textmodus) im Site-Admin-Panel installiert ist:

Fordern Sie einen Anruf an

In meinem Beispiel habe ich den Code für das Formular „Rückruf bestellen“ – es gibt nur zwei Felder im Formular – Name und Telefonnummer, damit der Site-Administrator den Kunden zurückruft.

Betrachten wir diesen Code.

Dies ist der Code der Schaltfläche zum Aufrufen des Fensters mit dem Formular, Sie können beliebige Stile für diese Schaltfläche festlegen und sie an beliebiger Stelle im Template einfügen:

Fordern Sie einen Anruf an

Dies ist der Code des Popups selbst, er kann unter der Schaltfläche zum Aufrufen des Fensters belassen oder in der Fußzeile entfernt werden, damit der Inhaltscode sauberer ist:

In diesem Code wird das Formular selbst von der folgenden Funktion aufgerufen:

Wo es geschrieben steht - Zeigen Sie einen Shortcode für das Kontaktformular an, der Shortcode wird im Kontaktformular selbst angegeben, als es erstellt wurde:

Um mehrere Formulare auf derselben Seite aufzurufen, müssen Sie zum Aufrufen des Formulars unterschiedliche IDs verwenden.

Ein Beispiel für den Aufruf von zwei Feedback-Formularen in einem Popup-Fenster:

Wir nennen Formular 1

Anrufformular 2

Achten Sie in diesem Fall zum Aufrufen mehrerer Formulare auf diese Teile des Codes:

... und für die zweite Form: ... usw.

Anstatt den Feedback-Formular-Shortcode anzuzeigen, können Sie beliebige Inhalte anzeigen, z. B. Blöcke mit Text oder Bildern, oder das Feedburner-Abonnementformular. So wird beispielsweise das Feedburner-Abonnementformular auf einer der Websites angezeigt