So erstellen Sie Kontaktformular 7 auf einem Foto. Alle Felder (Tags) des Formulars. Das Texteingabefeld für CAPTCHA funktioniert im Internet Explorer, jedoch nicht in Firefox. Code kann nicht eingegeben werden

(Letztes Update: 19.05.2019)

Grüße, lieber Leser! Heute zeige ich Ihnen, wie Sie ein Formular erstellen Rückmeldung mit dem Autor einer Website/eines Blogs in WordPress unter Verwendung des beliebten Contact Form 7-Plugins (mehr als 5 Millionen Installationen). Im Beitrag enthalten : richtige Einstellung Kontaktformular 7, Anti-Spam-Schutz, wie man ihn ändert und konfiguriert Aussehen Formen. Er wies auch auf die Hauptgründe hin, warum das Kontaktformular nicht funktioniert und keine E-Mails versendet. .

Kontakt Formular ist ein wichtiges Mittel, um die Verbindung zu Ihren Lesern aufrechtzuerhalten und umgekehrt. Schreiben Sie einen persönlichen Brief, machen Sie dem Autor ein Angebot (das er nicht ablehnen kann), stellen Sie eine Frage, senden Sie etwas und vieles mehr. Wir kümmern uns um all dies und geben keine wertvollen Informationen an Außenstehende, unsere Ansprechpartner, weiter WordPress-Formular Kontaktformular 7. Hier ist es, etwa so. Ich habe es so geschrieben und es hat mir wirklich gut gefallen.

Oh, der Brief ist angekommen! Kontaktformular 7 Gut gemacht

Ich werde Sie, lieber Leser, nicht mit all dem Schreiben langweilen – kommen wir zur Sache. Installation und korrekte Konfiguration des Moduls für WordPress – Kontaktformular 7.

WordPress-Kontaktformular 7-Plugin

Plugin für WP Contact Form 7

Contact Form 7 kann mehrere Kontaktformulare verwalten, wobei Sie Formular- und E-Mail-Inhalte mit einem relativ einfachen Layout flexibel anpassen können. Formulare verfügen über integrierte Unterstützung für Ajax-Übermittlung, CAPTCHA, Akismet-Spamfilter und mehr.

Wir führen alle Manipulationen im WordPress-Admin-Panel durch. Um ein Plugin zu installieren, klicken Sie im Abschnitt „Plugins“ auf „Neu hinzufügen“. Geben Sie im Fenster „Suche“ das Kontaktformular 7 ein. Selbstverständlich wird es zuerst angezeigt. Klicken Sie auf die Schaltfläche „Installieren“:

So installieren Sie das Plugin

Standardmäßig Kontaktformular Nr. 1

Auf dem Bild können Sie erkennen, dass es standardmäßig eine Standardversion des Kontaktformulars und einen vorgefertigten Shortcode zum Einfügen in eine neue Seite, einen neuen Beitrag oder eine neue Seitenleiste (über ein Text-Widget) gibt. Standard-Erscheinungsbild des Kontaktformulars 7, installiert auf einer separaten Seite der Website:

Aussehen: Standard-Kontaktformular auf einer WordPress-Site

Wenn Sie es nur ansehen, prüfen oder ändern, also zusätzliche Felder hinzufügen möchten, klicken Sie auf „Ändern“. Screenshot oben.

Die Seite „Kontaktformular bearbeiten“ wird geöffnet. Das Plugin ist auf Russisch und daher ist es für Sie sehr einfach herauszufinden, was was ist. Registerkarte „Formularvorlage“. Sie können die Formularvorlage an Ihre Bedürfnisse anpassen.

Um beispielsweise ein Datei-Upload-Tag zu einer Formularvorlage hinzuzufügen, müssen Sie Folgendes tun: Markieren Sie mit der Maus die Stelle, an der das Tag eingefügt werden soll (vorzugsweise nach der Nachricht) und klicken Sie auf die entsprechende Registerkarte „Datei“. Mit dieser Funktion können Sie Benutzern erlauben, ihre Dateien über Ihr Formular hochzuladen. Anschließend wird eine E-Mail mit Dateianhängen an Sie gesendet:

Kontaktformular bearbeiten. Registerkarte „Datei“.

Es öffnet sich ein Fenster – Form Tag Generator: Datei:

Um eine heruntergeladene Datei an eine E-Mail anzuhängen, müssen Sie ein Tag () einfügen.

Contact Form 7 erzwingt standardmäßige Dateityp- und Dateigrößenbeschränkungen. Wenn Sie Ihre Optionen nicht festlegen, lauten die Standarddateierweiterungen: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, und wmv. A zulässige Größe Die Datei ist 1 MB (1048576 Bytes) groß. Klicken Sie auf die Schaltfläche „Tag einfügen“:

Das Datei-Tag wird in die Formularvorlage eingefügt

An der Stelle, an der Sie mit dem Mauszeiger markiert haben, erscheint ein zusätzliches Tag. Wenn Sie es an der falschen Stelle eingefügt haben, kopieren Sie es einfach und platzieren Sie es an der richtigen Stelle. Auf die gleiche Weise hinzufügen notwendige Tags in Ihr Formular. Klicken Sie unbedingt auf die blaue Schaltfläche „Speichern“, nachdem Sie zusätzliche Tags hinzugefügt haben. Und so sieht die Schaltfläche zum Anhängen einer Datei an einen Brief nach dem Nachrichtenfeld aus:

Schaltfläche Datei im Kontaktformular auswählen

Wenn Sie alles richtig machen, werden Sie keine Probleme mit zusätzlichen Feldern haben.

Überprüfen Sie auch die Registerkarten E-Mail, Formularübermittlungsbenachrichtigungen und Erweiterte Einstellungen. Meiner Meinung nach besteht dort keine Notwendigkeit, etwas zu ändern. Wenn nur in den Zusätzlichen Einstellungen können Sie den Parameter - nur für Abonnenten - subscriber_only: true angeben. Für detaillierte Informationen gibt es einen Link zur Seite mit den erweiterten Einstellungen.

Und jetzt, Freunde, müssen wir das vorbereitete Kontaktformular auf einer separaten, neuen Seite oder Seitenleiste einer Webressource platzieren. Dies ist einfach zu bewerkstelligen.

Wir platzieren das Kontaktformular auf einer separaten Seite der Website/Blog

Nachdem Sie alle Einstellungen vorgenommen und das Formular gespeichert haben, kopieren Sie den Shortcode auf der Seite „Kontaktformulare“ oder „Kontaktformular bearbeiten“. Erstellen Sie anschließend eine neue Seite – Abschnitt Seiten – Neu hinzufügen. Geben Sie den Namen der Seite ein, zum Beispiel „Kontakte“. Schalten Sie den Nachrichteneditor in den „Text“-Modus und fügen Sie den Shortcode in das Nachrichtenfeld ein:

Neue Seite mit Kontaktformular

Wenn dem Menü automatisch eine neue Seite hinzugefügt wird, stellen Sie die „Reihenfolge“ auf 1, 2 oder 3 ein (je nachdem, welche im Menü steht, wird die Kontaktseite angezeigt). Klicken Sie auf die Schaltfläche „Veröffentlichen“. Alle. Bereit. Sie können dem Menü auch manuell eine Seite hinzufügen. Jetzt haben Sie ein Formular zur Kontaktaufnahme mit dem Autor des Blogs/der Website.

Verwenden Sie dieselbe Methode, um ein Kontaktformular zur Seitenleiste, Fußzeile oder im Text eines Artikels hinzuzufügen. Kopieren Sie den Shortcode und fügen Sie ihn in Ihre Beiträge oder Text-Widget-Inhalte ein. Beachten Sie, dass das Formular jederzeit bearbeitet oder ein neues mit anderen Tags/Feldern erstellt werden kann.

Erhalten Sie Spam über Kontaktformular 7?

Es gibt Schutz. Spammer wirken sich auf alles aus, und Ihre Kontaktformulare bilden da keine Ausnahme. Schützen Sie Ihre Kontaktformulare mit den leistungsstarken Anti-Spam-Funktionen von Contact Form 7, bevor Sie Spam erhalten.

Contact Form 7 unterstützt die Spam-Filterung mit Akismet. Intelligentes reCAPTCHA blockiert lästige Spam-Bots. Mit der Kommentarblockliste können Sie auch Nachrichten blockieren, die bestimmte Inhalte enthalten Stichworte oder von bestimmten IP-Adressen gesendet werden.

Klicken Sie auf „Integration“. Der reCAPTCHA-Dienst von Google schützt Sie vor Spam und anderen Formen des automatisierten Missbrauchs. Mit dem Contact Form 7 reCAPTCHA-Integrationsmodul können Sie die Übermittlung des Formulars durch Spambots blockieren.

Google reCAPTCHA v3-Integration: Anti-Spam-Schutz

Plugin-Integration mit anderen Recaptcha-Diensten

Klicken Sie auf Integration einrichten und folgen Sie dann dem Link, um ReCaptcha-API-Schlüssel zu erhalten:

reCAPTCHA ist Google-Dienst

Um reCAPTCHA nutzen zu können, müssen Sie zunächst Ihre WordPress-Site registrieren. reCAPTCHA ist ein Google-Dienst. Um ihn nutzen zu können, benötigen Sie Folgendes Google Benutzerkonto. Melden Sie sich mit bei Google an Konto, und folgen Sie dem Link https://www.google.com/recaptcha/admin. Sie sehen ein einfaches Registrierungsformular wie:

Registrieren Sie eine WordPress-Site. Gutes reCAPTCHA

Bitte geben Sie einen Namen an. Wählen Sie reCAPTCHA v3 (für reCAPTCHA v3 ist das CAPTCHA-Widget nicht erforderlich (das Kontrollkästchen „Ich bin kein Roboter“, das in reCAPTCHA v2 verwendet wird)) und geben Sie die Site-Domäne in das Feld „Domänen“ ein. Nach der Registrierung einer Site erhalten Sie einen Site-Schlüssel und einen geheimen Schlüssel. Geben Sie diese ein (Screenshot oben) und speichern Sie die Einstellungen. Das ist alles. Ihr Kontaktformular verwendet jetzt ein reCAPTCHA-Konto, um zu prüfen, ob die Nachricht von einem Menschen oder einem Spambot gesendet wurde.

Wenn Sie sich für die Installation von Contact Form 7 entscheiden, empfehle ich Ihnen, zusätzlich das Add-on „Contact Form 7 Style“ zu installieren. Damit können Sie das Erscheinungsbild Ihres Formulars bearbeiten. Sie können nicht nur eines davon auswählen vorgefertigte Vorlagen, sondern kreieren Sie auch Ihr eigenes einzigartiges Design. Möchten Sie Ihren Look ändern? Dann ist die Fortsetzung speziell für Sie, Schönheitsliebhaber.

Aussehen des Kontaktformulars – Contact Form 7 Style

Stile für Feedbackformulare 7

Das Contact Form 7 Style Plugin ist ein Add-on für Contact Form 7, das auf Ihrer WordPress-Site installiert werden muss. Unterstützt benutzerdefinierte Stile, die einfach über das Admin-Panel verwaltet werden können. Es gibt auch vordefinierte Vorlagen, die in den Contact Form 7-Einstellungen aktiviert werden können. In den Haupt-Plugin-Einstellungen erscheint eine neue Registerkarte – Contact Form 7 Style Template. Anpassung des Erscheinungsbilds:

Vorgefertigte Formularvorlagen

Beispiel: Ich habe das standardmäßige externe in dieses schöne geändert:

Aussehen des Kontaktformulars

Vergessen Sie nicht, dass Sie Ihre eigenen benutzerdefinierten Stilparameter festlegen können:

Das Plugin unterstützt benutzerdefinierte Stile, die über das Admin-Panel verwaltet werden können

Abschließend:

Das Versenden von E-Mails über Contact Form 7 funktioniert für die meisten Menschen problemlos. Aber es stellt sich heraus, dass es nicht jedermanns Sache ist. Auch wenn das Plugin jeden Tag erfolgreich Millionen von E-Mails versendet, gibt es viele Probleme, die den Versand verzögern oder stoppen können E-Mails, sowohl auf der Sende- als auch auf der Empfangsseite einer typischen E-Mail.

Warum funktioniert Contact Form 7 nicht (E-Mails senden)?

1. Probleme mit Ihrem Hosting. Es ist wichtig zu beachten, dass das Senden und Empfangen von E-Mails weitgehend vom Server abhängt, auf dem Ihre WordPress-Site gehostet wird.
2. Stellen Sie sicher, dass die richtige Rücksende-E-Mail-Adresse verwendet wird.
3. Ihre E-Mail könnte als Spam betrachtet werden;
4. Plugins oder Theme-Konflikte mit Contact Form 7;
5. Javascript-Konflikte.

Wenn Sie mit diesem Plugin keine E-Mails senden können, ist es wahrscheinlich, dass Sie mit WordPress im Allgemeinen keine E-Mails senden können. Wenn etwas passiert, meine Herren, können Sie auf der Seite Antworten auf häufig gestellte Fragen zur Funktionsweise des Plugins erhalten https://contactform7.com/faq/.

Oder im Support-Forumhttps://wordpress.org/support/plugin/contact-form-7/. Englische Sprache Egal, mit der Übersetzung Ihres Lieblingsbrowsers wird alles klar.

Das ist alles was ich habe. Es scheint, als hätte ich nichts vergessen. Alles Gute. Viel Glück, Freunde.

P.S. Es stellt sich heraus, dass das Bearbeiten alter Beiträge (Informationen für Leser sollten immer relevant sein) genauso viel Zeit in Anspruch nimmt wie das Schreiben neue Anleitung. Grusel!

In diesem Material wird die Einrichtung von Contact Form 7 ausführlich beschrieben, einem Plugin für eine so beliebte Plattform zum Erstellen und Bewerben von Websites im World Wide Web wie WordPress. Mit diesem Softwaretool können Sie Feedbackformulare erstellen und konfigurieren.

Ein wenig über WordPress

Eines der beliebtesten und am weitesten verbreiteten Tools zum Entwickeln und Füllen von Informationsressourcen ist WordPress. Ursprünglich konzentrierte sich dieses Softwareprodukt auf die Erstellung einfacher Blogs. Doch dann ergänzten spezialisierte Spezialisten seine Funktionalität, die es ermöglichte, mit diesem Content-Management-System weitere Internetressourcen zu erstellen.

Stärken und Schwächen dieser Plattform zum Erstellen und Bewerben von Websites

Die Vorteile davon Softwareplattform solch:

Einfachheit und offener Quellcode.

Eine beeindruckende Menge an Referenzinformationen.

Die Möglichkeit, in kürzester Zeit jede thematische Ressource im Internet zu entwickeln.

Hohe Leistung ohne zusätzliche Software-Add-Ons (Plugins).

Die Nachteile in diesem Fall sind jedoch folgende:

Websites, die auf WordPress basieren, sind nicht in der Lage, hohe Belastungen zu bewältigen.

Bei der Installation zusätzlicher Miniprogramme oder auch Plug-Ins kommt es zu einer Geschwindigkeitsreduzierung der Internetressource.

und warum brauchen Websites, die auf der WordPress-Plattform basieren, sie?

Die Grundfunktionalität eines Content-Management-Systems wie WordPress ist sehr bescheiden. Es reicht nur aus, die einfachsten Blogs und Websites zu entwickeln. Um die Funktionalität der Softwareplattform irgendwie zu verbessern und ihr Flexibilität zu verleihen, müssen Entwickler spezielle Miniprogramme installieren, die im Fachjargon Plugins genannt werden. Eines davon ist das Kontaktformular 7. Durch die Einrichtung des Plugins können Sie auf einer bestimmten Seite des Content-Management-Systems ein Feedback-Formular mit erweitertem Funktionsumfang erstellen.

Spezialisierung „Kontaktformulare 7“

Wie bereits erwähnt, ist das Erstellen von Feedback zwischen dem Besucher und dem Administrator einer auf der WordPress-Plattform basierenden Internetressource die Hauptaufgabe von Contact Form 7. Das Einrichten von E-Mails, das Bearbeiten einer Vorlage und das Senden verschiedener Dateien ist keine vollständige Liste der Funktionen, die es bietet Dies bietet ein Miniprogramm. In diesem Fall ist die Belastung der Hardwareressourcen der Site relativ gering und ihre Anwesenheit führt nicht zu einer wesentlichen Verschlechterung der Leistung der Site oder des Blogs.

Verfahren zur Installation des Plugins

Es gibt drei Möglichkeiten, Plugins auf der WordPress-Plattform zu installieren:

Durch Herunterladen eines ZIP-Archivs aus dem World Wide Web und „Hochladen“ in das entsprechende Verzeichnis der Internetressource.

Verwendung verschiedener Arten von FTP-Clients.

Die sicherste der drei Möglichkeiten zur Installation von Plugins ist die letzte. In diesem Fall Programmcode Es wird von der offiziellen Website heruntergeladen und enthält definitiv keine verschiedenen Arten bösartiger, gefährlicher Fragmente. Die Vorgehensweise zur Installation des Plugins ist in diesem Fall wie folgt:

Gehen Sie zum WordPress-Administrationsbereich.

Dann müssen Sie zum Abschnitt „Plugins“ wechseln.

Wählen Sie im sich öffnenden Fenster „Neu hinzufügen“.

Geben Sie in der Suchleiste den Namen des Plugins ein – Contact Form 7 – und bewegen Sie dann den Mauszeiger über die Schaltfläche „Suchen“ und klicken Sie einmal. Danach erfolgt der Suchvorgang nach dem Gewünschten Software.

Nach Abschluss wird eine Liste der gefundenen Plugins angezeigt. In dieser Liste finden wir das, was wir brauchen, und klicken auf die Schaltfläche „Installieren“, die sich daneben befindet.

Danach lädt das Content-Management-System dieses Plugin automatisch herunter und installiert es.

Der nächste Schritt besteht darin, die installierte Software zu aktivieren. Gehen Sie dazu auf die Registerkarte „Plugins“ und suchen Sie in der Liste nach Contact Form7. Daneben steht die Aufschrift: „Aktivieren“, einmal mit der Maus darauf klicken.

Wir aktualisieren das Verwaltungspanel des Content-Management-Systems und finden unter seinen Elementen Contact Form7. Dies ist die Voraussetzung für eine erfolgreiche Installation dieses beliebten und funktionalen Plugins.



Konfigurationsalgorithmus für „Contact Forms 7“

Das Einrichten des Kontaktformulars 7 besteht aus den folgenden Elementen:

Erstellen eines neuen Formulars oder Bearbeiten eines alten Formulars, das bei der Installation des Plugins erstellt wurde. Die Erfahrung zeigt, dass es in den meisten Fällen besser ist, die Option zum Erstellen eines neuen Formulars zu nutzen.

Wählen Sie im nächsten Schritt die Sprache des Formulars aus und legen Sie seinen Namen fest.

Anschließend müssen Sie die Vorlage bei Bedarf neu konfigurieren.

Speichern Sie die vorgenommenen Änderungen.

Wir erstellen eine neue Seite mit dem zuvor erhaltenen Code.

Im letzten Schritt müssen Sie auf die Website gehen und nachschauen korrekte Bedienung erstelltes Element der Internet-Ressourcenschnittstelle.

Erstellen Sie ein neues Formular

Unmittelbar nach der Aktivierung erstellt dieses Plugin ein Standardformular zum Stellen von Fragen an Website- oder Blog-Besucher. Es kann natürlich nach Bedarf bearbeitet und angepasst werden. Aber es wird viel einfacher sein, dieses zu löschen und ein neues zu erstellen vollständiger Satz alle notwendigen Funktionen. Dazu müssen Sie Folgendes tun:

Gehen Sie zum Menü dieses Plugins und wählen Sie „Formulare“.

Im sich anschließend öffnenden Fenster müssen Sie das Kästchen neben dem Punkt „Kontaktformular1“ aktivieren.

Wählen Sie dann darüber in der Dropdown-Liste „Aktionen“ die Option „Löschen“.

Als Antwort erscheint eine Frage zur Bestätigung der durchgeführten Aktionen. Sie müssen das Löschen des Formulars bestätigen und auf die Schaltfläche „Ja“ klicken.

Wählen Sie als nächstes den Menüpunkt: „Neu erstellen“ im Verwaltungsbereich „Wordpress“ „Kontaktformular7“.

Wählen Sie im sich öffnenden Fenster in der Dropdown-Liste die Oberflächensprache des zukünftigen Formulars aus – „Russisch“. Klicken Sie dann auf die Schaltfläche „Erstellen“.

Danach wird standardmäßig der erste Code für das neue Feedback-Formular für WordPress generiert. Danach müssen Sie Vorgänge wie die Einrichtung des Kontaktformulars 7 durchführen.

Legen Sie den Namen des Formulars fest

Nachdem Sie alle vorherigen Schritte ausgeführt haben, erscheint ein Fenster zur Eingabe des Namens des neuen Formulars in Contact Form 7 Style. Die Einrichtung beginnt mit diesem einfachen Vorgang auf der einen Seite. Es ist jedoch besser, den Namen des Formulars anhand dessen anzugeben Suchmaschinenoptimierung. Daher wäre die optimalste Option in diesem Fall beispielsweise „Feedback-Formular“ oder „Stellen Sie eine Frage an den Site-Administrator“. Sobald wir uns für den Namen dieses Schnittstellenelements entschieden haben, geben Sie ihn in das entsprechende Feld des Anfragefensters ein.



Bearbeiten der Vorlage „Kontaktformulare 7“.

Im selben Fenster mit dem Namen des erstellten Formulars gibt es 4 Registerkarten. Die erste ist „Vorlage“. Standardmäßig werden hier nur 5 Elemente gebildet:

Ort zur Eingabe des Namens des Besuchers der Internetressource.

Wählfeld für E-Mail-Adresse Briefkasten Besucher, der eine Frage gestellt hat.

In einem weiteren Feld können Sie den Betreff der Frage eingeben.

Das letzte Element des Formulars ist standardmäßig eine Schaltfläche mit der Bezeichnung „Senden“.

Bei Bedarf kann der Text in diesem Feld bearbeitet und weitere Oberflächenelemente hinzugefügt werden. Wählen Sie dazu einfach den Code eines beliebigen Textelements aus (z. B. den Teil des Codes, in dem der Betreff der Nachricht angegeben ist) und kopieren Sie ihn mit Kontextmenü im selben Bereich an einem anderen Ort. Auf der rechten Seite befinden sich Parameter (diese werden im nächsten Absatz ausführlich besprochen), in denen wir das für uns interessante Element auswählen. Danach erscheint der erforderliche Code neben der Dropdown-Liste. Kopieren Sie als Nächstes diesen Code und fügen Sie ihn anstelle des Betreffcodes der Nachricht ein. Den Namen des Elements wählen wir nach eigenem Ermessen.

Feldlängen festlegen und mehr

An der gleichen Stelle können Sie die Eingabe im Kontaktformular 7 ändern. Das Anpassen der Breite eines beliebigen Textfeldes erfolgt wie folgt:

Beispielsweise ist es erforderlich, die Anzahl der Zeichen im Namen eines Besuchers einer Internetressource auf 55 zu erhöhen. Standardmäßig sind es 40.

Fügen Sie dazu am Ende des Codes die Zahlen 60/55 hinzu. Das Ergebnis wird der Code sein. Nach dem Speichern der Änderungen beträgt die Länge dieses Feldes 60 und die maximale Anzahl der Zeichen, die darin eingegeben werden können, beträgt 55.

Auf die gleiche Weise können Sie die Größe des Nachrichtentextfelds ändern. Nur in diesem Fall ist es notwendig, den Code dieses Elements wie folgt zu ändern. In diesem Fall ist 40 die Anzahl der Buchstaben in einer Zeile und 30 die Gesamtzahl der Begriffe in diesem Schnittstellenelement im Kontaktformular 7. Das Festlegen des Erscheinungsbilds des Formulars selbst erfolgt genau durch Auswahl der jeweiligen Parameterwerte einzelnes Element. Daher wird empfohlen, für jeden in diesem Abschnitt angegebenen Parameter im Code jedes Elements spezifische Werte anzugeben.



Andere Formularregisterkarten

Wie bereits erwähnt, heißt die erste Registerkarte „Formularvorlage“. Der nächste in diesem Fenster ist „Brief“. Es gibt die Parameter des Standorts an, an den E-Mails von dieser Internetressource gesendet werden. Auf der Registerkarte „Benachrichtigung“ wird der Text der Nachricht generiert, der bei erfolgreichem Versand des Briefes angezeigt wird. Es besteht auch die Möglichkeit, eine Nachricht vorzubereiten, falls Sie den Site-Administrator nicht erreichen können. Letzte Registerkarte im Kontaktformular 7 – „Zusätzliche Einstellungen“. Es enthält jene Parameter, die in der Praxis sehr, sehr selten verwendet werden. Sie können damit beispielsweise die Verfolgung von vom Benutzer eingegebenem Text mithilfe von Yandex-Metriken einrichten.

Felder, die mit diesem Plugin zu diesem Formular hinzugefügt werden können

Wenn Sie Contact Form 7 für Wordpress einrichten, können Sie dem Feedback-Formular die folgenden Schnittstellenelemente hinzufügen:

• Ein Testfeld ist ein universelles Schnittstellenelement, in das Sie beliebige Zeichensätze eingeben können.

  E-Mail – Ort zur Eingabe des Namens des elektronischen Postfachs.

  URL – Feld zur Eingabe der Adresse einer Internetseite.

  Telefonnummer: Ermöglicht die Eingabe einer Telefonnummer im internationalen Format.

  Mit dem Element „Anzahl (Spinbox)“ können Sie ein Eingabefeld für einen beliebigen ganzzahligen Wert (z. B. das Alter des Besuchers) erstellen.

  Das Element „Zahl (Schieberegler)“ fügt dem Formular einen Schieberegler hinzu, mit dem Sie einen numerischen Wert aus einem angegebenen Bereich auswählen können.

  Der Punkt „Datum“ erstellt ein spezielles Eingabefeld, in dem Sie das gewünschte Datum angeben können. Wenn Sie dieses Oberflächenelement aktivieren, erscheint unten ein Kalender, in dem Sie sofort das gewünschte Datum auswählen können.

  Der Dropdown-Menüpunkt „Textfeld“ wiederum dient der Eingabe des Textteils der E-Mail.

  Der nächste Punkt – „Dropdown-Menü“ – ermöglicht Ihnen die Auswahl des gewünschten Parameters aus einer festen Liste.

  Aber „CheckBoxes“ sind dafür gedacht, einen oder mehrere Werte aus einer vorgegebenen Liste auszuwählen.

  Das Oberflächenelement „Radio Buttons“ ist fast identisch mit dem vorherigen. Der einzige Unterschied besteht darin, dass Sie in diesem Fall nur eine richtige Option auswählen können, während „CheckBoxes“ mehrere richtige Werte haben können.

  Mit dem Punkt „Akzeptanz“ können Sie dem erstellten Formular nur ein Kontrollkästchen hinzufügen. Sie dient in der Regel dazu, sich mit etwaigen Bedingungen vertraut zu machen und ohne deren Akzeptanz ist ein künftiger Versand einer E-Mail nicht mehr möglich.

  Mit dem Menüpunkt „Menü“ können Sie einen speziellen Abschnitt in der Benutzeroberfläche erstellen, der Ihr Postfach vor Spam schützt. In diesem Fall müssen Sie vor dem Absenden die richtige Antwort auf die Frage angeben.

  Die zweite Sicherheitsoption ist CAPTCHA. Wenn Sie es auswählen, wird dem Formular ein separater Abschnitt hinzugefügt, der ein Bild mit Symbolen und ein zusätzliches Feld zur Eingabe dieser Symbole anzeigt.

  Der nächste Punkt ist „Datei senden“. Ermöglicht das Hinzufügen einer Datei mit verschiedenen Erklärungen und Kommentaren zum Brieftext für den Ressourcenadministrator.

  Über den letzten Punkt – „Senden-Button“ – können Sie ein entsprechendes Schnittstellenelement hinzufügen.

Speichern Sie die vorgenommenen Änderungen

Sobald die erforderlichen Werte festgelegt und das Formular ordnungsgemäß konfiguriert sind, müssen Sie alles speichern. Gehen Sie dazu im Plugin-Bearbeitungsfenster in den oberen Teil. Hier sollte ein „Speichern“-Button vorhanden sein. Zeigen Sie mit dem Mauszeiger darauf und klicken Sie einmal darauf. Als Antwort erscheint der Formularcode, den wir mit demselben Mauszeiger auswählen und kopieren. Wechseln Sie als Nächstes zum Punkt „Seiten“ im Verwaltungsbereich des Content-Management-Systems. Anschließend erstellen wir eine neue Seite mit dem gewünschten Namen (z. B. „Feedback“, „Kontakte“ oder „Stellen Sie eine Frage an den Ressourcenadministrator“). Dann bewegen wir den Wählcursor auf das Eingabefeld für seinen Code. In diesem Fall müssen Sie den Code-Eingabemodus im Parameterbereich auf „Text“ umstellen. Anschließend fügen Sie den zuvor erhaltenen Formularcode ein. Suchen Sie als Nächstes auf der rechten Seite der Benutzeroberfläche die Schaltfläche „Veröffentlichen“ und fahren Sie mit der Maus darüber. Klicken Sie im nächsten Schritt einmal mit der linken Maustaste auf dieses Element der Benutzeroberfläche des Content-Management-Systems.



Überprüfung des Ergebnisses

Nach Durchführung der zuvor genannten Manipulationen sollte der Schnittstelle der Internetressource eine neue Seite hinzugefügt werden, auf der die im Kontaktformular 7 angegebenen Elemente angezeigt werden. Die Einrichtung der Schnittstelle ist grundsätzlich abgeschlossen. Sie müssen lediglich überprüfen, ob die Software richtig konfiguriert ist. Dazu müssen Sie zu gehen Startseite Website, Blog oder Portal. Dann finden wir in der Seitenliste die Seite, auf der das Feedback-Formular platziert wurde. Wir gehen dorthin, geben in allen Feldern auf einmal die richtigen Parameter ein und schicken uns einen Testbrief. Als Antwort sollte eine Informationsmeldung erscheinen, die den erfolgreichen Abschluss dieses Vorgangs anzeigt. Dann versuchen wir, einen weiteren Brief mit leeren Feldern zu versenden. Danach sollte eine Meldung erscheinen, die besagt, dass Sie alle ausgewählten Formularparameter festlegen müssen. Wenn in beiden Fällen die zuvor angegebenen Ergebnisse erzielt wurden, funktioniert das erstellte Feedback-Formular ordnungsgemäß.

Vor- und Nachteile des Plugins. Alternative Optionen

Eine hervorragende Lösung für einen unerfahrenen Entwickler zum Erstellen eines Feedback-Formulars ist das Miniprogramm Contact Form 7. Das Einrichten des E-Mail-Versands, das Erstellen von Schnittstellenelementen und anderen wichtigen Schnittstellenelementen erfolgt in diesem Fall größtenteils automatisiert und erfordert nur minimale Benutzerkenntnisse. Daher für eine einfache Internetressource Einstiegslevel und für einen unerfahrenen Administrator ist dies eine hervorragende Lösung. Aber jedes Plugin belastet die Ressourcen der Website zusätzlich, was die Leistung verringert. Fortgeschrittenere Benutzer empfehlen daher, dies zu vermeiden einfacher Weg Erstellen eines Feedback-Formulars. Sie können es auch selbst erstellen mit HTML, CSS und JS, allerdings mit geringerem Funktionsumfang. Dadurch wird der Bedarf an Rechenressourcen auf der Website reduziert und das Leistungsniveau deutlich erhöht.



Ergebnisse

In diesem Artikel wird Schritt für Schritt beschrieben, wie Sie das Kontaktformular 7 konfigurieren. Dieses Plugin verfügt wirklich über einen hohen Funktionsumfang, Sie können damit jedes beliebige Feedback-Formular erstellen. Andererseits erhöht die Verwendung eines zusätzlichen Plugins als Teil eines Content-Management-Systems die Belastung Hardware Website. Daher wird unerfahrenen Site-Administratoren, die auf diesem Content-Management-System basieren, empfohlen, dieses Plugin für solche Zwecke zu verwenden. Nun, fortgeschrittenere Benutzer können auf Contact Form 7 verzichten. In diesem Fall ist die Einrichtung des Plugins definitiv nicht erforderlich.

Das Contact Form 7-Plugin hilft Ihnen dabei, Feedback zu Ihrer Website zu organisieren.

Sie können das Contact Form 7-Plugin auf der offiziellen WordPress-Website herunterladen

Sie können das Really Simple CAPTCHA-Plugin auf der offiziellen WordPress-Website herunterladen

Wir haben uns in der Lektion „“ angeschaut, wie man dieses Plugin installiert und verbindet, jetzt werden wir es herausfinden zusätzliche Funktionen Plugin für Kontaktformular 7. Das Formular funktioniert ordnungsgemäß auf Monitoren, Tablets, Telefonen und Laptops. Wenn Ihr Laptop kaputt ist, gibt es übrigens einen Service, der HP-Laptops repariert.

Nachdem Sie das Plugin heruntergeladen und aktiviert haben, gehen Sie zu den Plugin-Einstellungen, indem Sie zum neuen Abschnitt des Kontrollfelds „Kontakte“ gehen.

Bewegen Sie Ihre Maus über den Formularnamen und wählen Sie „Bearbeiten“

Es öffnet sich ein Fenster zum Ändern der Formularparameter.

Da die Website nicht ein, sondern mehrere Formulare verwenden kann (ein Formular zum Senden einer Nachricht, ein Formular zum Bestellen eines Anrufs, ein Formular mit personenbezogenen Daten), müssen Sie dies tun, damit keine Verwirrung darüber entsteht, welches Formular für was zuständig ist Ändern Sie den Namen des Formulars. Klicken Sie dazu auf den Namen von Formular 1.

Block Nr. 2 zeigt an, was auf der Seite im Formular angezeigt wird. Zuerst kommt der Text, der Name des Feldes, dann der Code dieses Feldes. Sie können den Text beliebig ändern.

Um dem Formular neue Felder hinzuzufügen, klicken Sie auf die Dropdown-Liste Nr. 3 – „Tag generieren“ und wählen Sie das gewünschte Element aus der Dropdown-Liste aus.

• Textfeld
• Email
• Telefonnummer
• Zahl (Spinbox)
• Zahl (Schieberegler)
• Textfeld
• Dropdown-Menü
• Kontrollkästchen
• Radio Knöpfe
• Annahme
• Frage
• CAPTCHA
• Senden einer Datei
• Schaltfläche „Senden“.

Tooltips und Formularfelder sind standardmäßig wie folgt angeordnet: Tooltip oben, Element unten. Wenn Sie die Beschreibung und das Element in einer Zeile platzieren möchten, entfernen Sie das Tag nach dem Text

. Der gesamte Block mit Beschreibungen und Elementen muss in einer Zeile stehen und sich innerhalb des Tags befinden

Textfeld

Wählen Sie aus der Dropdown-Liste das Element „Textfeld“ aus

Wenn eine von Ihnen hinzugefügte Funktion erforderlich ist, aktivieren Sie das Kästchen 1 und vergessen Sie nicht, dies in der Beschreibung anzugeben.

Sie können es dem Eingabefeld hinzufügen Weitere Informationen um das Ausfüllen des Formulars zu erleichtern. Kontrollkästchen 2 „Als Platzhalter verwenden?“ und geben Sie im Feld daneben einen Hinweis ein. Wenn Sie dieses Feld im Formular ausfüllen, verschwindet der Tooltip-Text. Folgen Sie dann den Anweisungen des Plugins. Das Ergebnis wird in der fertigen Form ein Feld wie dieses sein:

Fügen Sie den Code unbedingt in die E-Mail-Vorlage ein, da sonst die Daten aus diesem Feld nicht an die E-Mail gesendet werden! Dies gilt nicht nur für Textfelder, sondern auch für alle anderen Elemente.

Email

Wird verwendet, um die Postfachadresse des Absenders in das Formular zu übertragen

URL

Ermöglicht Ihnen, dem Formular eine Website-Adresse hinzuzufügen.

Telefonnummer

In dieses Feld können nur Zahlen eingegeben werden

Zahl (Spinbox)

Ein Feld, in dem Sie die Menge von etwas, beispielsweise einem Produkt, festlegen können. Die Menge wird mit den Auf-/Ab-Pfeilen eingestellt.

Datum

Fügt einen Kalender in das Formular ein, mit der Möglichkeit, ein Datum auszuwählen. Wird beispielsweise zur Reservierung von Hotelzimmern verwendet. Ankunftsdatum, Abreisedatum.

Textfeld

Ja, wundern Sie sich nicht :) Ein weiteres Textfeld. Dieses Mal ist dieses Feld groß und ermöglicht es Ihnen, viel Text darin zu schreiben. Zum Beispiel Bewertungen, Kommentare.

Dropdown-Menü

Wenn es für etwas viele Optionen gibt und Sie ein Element aus einer großen Liste auswählen müssen, zum Beispiel einer Liste mit Städten, Straßen, Waren.

Die Liste muss im Auswahlfeld platziert werden, jedes Element in einer neuen Zeile.

Kontrollkästchen

Eine Checkbox oder im Entwicklerjargon Checkbox ist ein Element, das ein Feld zum Aktivieren eines Kontrollkästchens erstellt. Dieses Feld hat zwei Zustände: aktiviert oder deaktiviert. Mehrfachauswahl möglich. Sie können nur dann in einer Reihe angeordnet werden, wenn Sie das Kontrollkästchen „Kontrollkästchen gegenseitig ausschließen?“ aktivieren. dann kann nur ein Parameter ausgewählt werden.

Radio Knöpfe

Schalter (im Fachjargon: Radio-Buttons) werden verwendet, wenn es darum geht, aus mehreren angebotenen Optionen eine einzelne auszuwählen. Durch Aktivieren des Kontrollkästchens „Zuerst ein Etikett und dann ein Kontrollkästchen platzieren?“ Die Position der Beschriftung und des Auswahlfelds ändert standardmäßig zuerst die Auswahl und dann die Beschriftung.

Annahme

Bestätigung von etwas. Gehen wir von einem Einverständnis zur Annahme der oben beschriebenen Bedingungen aus.

Frage

Dies ist die erste und grundlegendste Verteidigungslinie gegen Spam. Schreiben Sie in den Einstellungen eine Frage, vielleicht in Zahlen, vielleicht in Buchstaben oder beidem, und geben Sie die richtige Antwort an. Wenn die Antwort beim Ausfüllen des Formulars richtig ist, wird das Formular abgesendet. Grün zeigt an, welcher Teil dieser Formel auf der Website vor dem Antworteingabefeld angezeigt wird, Rot zeigt die Antwort an. Die richtige Antwort in der Formel steht hinter dem Zeichen | (vertikaler Balken)

Fügt dem Formular einen Anti-Spam-Schutz hinzu.

Damit diese Funktion funktioniert, ist ein weiteres Plugin erforderlich. Laden Sie das Plugin herunter, installieren Sie es und aktivieren Sie es.

Sie müssen die Einstellungen nicht ändern, kopieren Sie einfach zwei Zeilen und fügen Sie sie vor der Schaltfläche „Senden“ ein.

Senden einer Datei

Sie können eine Datei an das Nachrichtenübermittlungsformular anhängen. In den Einstellungen können Sie die maximale Größe in Bytes und erlaubte Formate für den Download festlegen, zum Beispiel.jpg .tiff .doc

Schaltfläche „Senden“.

Absenden des Formulars. In den Einstellungen können Sie im Abschnitt „Verknüpfung“ den Namen der Schaltfläche angeben (Senden, Antworten, Senden :)

Anpassen des Erscheinungsbilds von Kontaktformular 7

Da Plugins aktualisierbar sind, werden Änderungen am Erscheinungsbild des Formulars in der Website-Theme-Stildatei style.css vorgenommen

Der Code ist für die Anzeige des Formulars, seiner Felder und anderer Elemente verantwortlich:

Wpcf7 (Hintergrundfarbe:#ddd;) /*Hintergrundfarbe bilden */ .wpcf7-Eingabe, .wpcf7-Textbereich( Polsterung:5px; Farbe:#1D1D1D; Schriftfamilie:Arial, Helvetica, serifenlos; Schriftgröße: 16px; Linienhöhe: 20px; Rand: 1px durchgezogen #C7C7C7; Box-Shadow: Einschub 2px 2px 8px #F9F9F9; -webkit-transition: alle 0,2s Leichtigkeit; -moz-transition: alle 0,2s Leichtigkeit; -o-transition : alle 0,2 s Leichtigkeit; Übergang: alle 0,2 s Leichtigkeit; ) .wpcf7 .wpcf7-list-item( padding-left: 0; margin-left: 0; margin-right: 25px; ) .wpcf7 .wpcf7-list-item Eingabe( Rand: keine; Polsterung links: 0; Rand links: 0; ) .wpcf7 select( Umriss: keine; Schriftgröße: 16px; Schriftfamilie: Arial, Helvetica, serifenlos; ) .wpcf7 Eingabe: schweben, .wpcf7 Eingabe: Fokus, .wpcf7 Eingabe: aktiv, .wpcf7 Textarea: schweben, .wpcf7 Textarea: Fokus, .wpcf7 Textarea: aktiv ( Hintergrund: #FDFDFD; Umriss: keine; )

Was ist was?

.wpcf7-Eingabe, .wpcf7-Textbereich — Stil des Eingabefeldes (Textfeld)

1. Polsterung- legt den Einzug vom Inhalt zum Rand des Elements fest. Hier ist der Einzug vom in das Feld eingegebenen Text bis zum Feldrand. Legt den Wert in Pixel Xpx fest, wobei X die Anzahl der Pixel ist. Beispiel: Auffüllung: 5px 3px 6px 8px;
2. Farbe- Textfarbe.
3. Schriftfamilie- Schriftart der Eingabefelder.
4. Schriftgröße- Schriftgröße
5. Zeilenhöhe- Zeilenhöhe
6. Grenze- Rahmen um das Eingabefeld
7. Box Schatten- Schatten blockieren. Einsatz zeigt an, dass der Schatten intern ist. Wenn Sie einen äußeren Schatten wünschen, überspringen Sie diesen Wert. Der zweite und dritte Wert von 2px 2px geben die horizontale bzw. vertikale Verschiebung des Schattens an. Der vierte Wert, 8px, legt den Unschärferadius des Schattens fest. Fünftens – #F9F9F9 – Schattenfarbe.

Anpassen der Schaltfläche „Kontaktformular 7“.

.buttons_form ( Polsterung: 0px; Höhe: 30px; Breite: 150px !important; Rand: keiner !important; Cursor: Zeiger; Farbe: #fff; -webkit-border-radius: .5em; -moz-border-radius: . 5em; Randradius: .5em; Farbe: #faddde; Rand: einfarbig 1px #980c10; Hintergrund: #d81b21; Hintergrund: -webkit-gradient(linear, links oben, links unten, von(#ed1c24), bis(# aa1317)); Hintergrund: -moz-linear-gradient(top, #ed1c24, #aa1317); Filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ed1c24", endColorstr="#aa1317"); )

Kontaktformular 7-Benachrichtigungsstil

Es ist für Fehlermeldungen oder erfolgreiche Übermittlungsmeldungen verantwortlich

Wpcf7 .wpcf7-validation-errors( border:none; background-color:#246416; color:#fff; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; Rahmenradius: 10 Pixel; -radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ng( border:none; background-color:#349622; margin:0; padding:20px; -webkit-border-radius: 10px ; -moz-border-radius: 10px; border-radius: 10px; Farbe: weiß; ) .wpcf7 span.wpcf7-not-valid-tip( border:none; background-color:#349622; padding:5px; padding- links: 5px; padding-rechts: 5px; Randradius:10px; Breite: 290px; Farbe: weiß; /* Schlagschatten */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3) ; -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); box-shadow: 3px 3px 3px rgba(0,0,0,0.3); )

Und jetzt der Einfachheit halber der gesamte Code mit Kommentaren:

Wpcf7 ( background-color:#ddd; ) /*Hintergrundfarbe bilden */ .wpcf7 input, .wpcf7 textarea( /* Dieser Teil des Codes ist für den Stil der Eingabefelder und Textbereiche verantwortlich */ padding:5px; / * Legt den Abstand des Feldelements vor seinem Inhalt fest. Sie können einen beliebigen Wert eingeben, zum Beispiel 10 Pixel. * Textschriftart in Eingabefeldern */ Font -size:16px; /* Textgröße in Eingabefeldern */ Zeilenhöhe: 20 Pixel; /* Höhe der Eingabefelder */ Rahmen: 1 Pixel durchgehend #C7C7C7; /* Rahmen um die Felder . Der erste Wert ist die Breite in Pixel, der zweite – der Stil des Rahmens, der dritte – seine Farbe */ box-shadow: inset 2px 2px 8px #F9F9F9; /* Schatten aus den Eingabefeldern. 2px – Offset entlang der x-Achse, 2px – Versatz entlang der y-Achse, 8px – Schattenunschärferadius, #F9F9F9 – Schattenfarbe */ -webkit-transition: alle 0,2 s Leichtigkeit; -moz-transition: alle 0,2 s Leichtigkeit; -o-transition : alle 0,2 s Leichtigkeit; Übergang: alle 0,2 s Leichtigkeit; ) .wpcf7 .wpcf7-list-item( padding-left: 0; margin-left: 0; margin-right: 25px; ) .wpcf7 .wpcf7-list-item input( border: none; padding-left: 0; Rand links: 0; ) .wpcf7 select( Gliederung: keine; Schriftgröße: 16px; Schriftfamilie: Arial, Helvetica, serifenlos; ) .wpcf7 input:hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea: hover, .wpcf7 textarea:focus, .wpcf7 textarea:active ( /* Dieser Teil ist für den Stil der Eingabefelder verantwortlich, wenn der Mauszeiger darüber schwebt */ Hintergrund: #FDFDFD; /* Der Hintergrund des Eingabefelds, wenn der Mauszeiger schwebt darüber */ Gliederung: keine; /* Äußerer Rand des Texteingabefelds */ ) .wpcf7 input.wpcf7-submit(/* Dieser Teil des Codes ist für die Gestaltung der Schaltfläche „Senden“ im Formular verantwortlich * / -webkit-transition: 0; -moz-transition: 0; - o-transition: 0; transit: 0; border: none; /* Rahmen um die Schaltfläche */ Position: relativ; Farbe: #fff; /* Text Farbe */ text-transform: Uppercase; /* Texttransformation (Großbuchstaben bedeuten, dass der Text auf der Schaltfläche in Großbuchstaben angezeigt wird) */ /* Abrunden der Ecken der Schaltfläche Die Werte der folgenden drei Eigenschaften müssen sein das Gleiche, da sie dasselbe sind, nur für verschiedene Browser */ -webkit-border-radius: 6px; /* Runde Ecken für Chrome */ -moz-border-radius: 6px; /* Runde Ecken für Mozilla Firefox */ border-radius: 6px; /* Runde Ecken für alle anderen Browser, einschließlich mobiler */ Schriftgröße: 14px; /* Textgröße der Schaltfläche */ Schriftstärke: fett; /* Textstil (fett bedeutet fett) */ padding-top: 11px; /* Oberer Abstand vom Rand des Elements bis zu seinem Inhalt */ padding-bottom: 10px; /* Unterer Abstand vom Rand des Elements bis zu seinem Inhalt */ padding-left: 35px; /* Linker Abstand vom Rand des Elements bis zu seinem Inhalt */ padding-right: 35px; /* Einrückung nach rechts vom Rand des Elements bis zu seinem Inhalt */ /* Verlaufshintergrund – Verlaufshintergrund der Schaltfläche */ Hintergrundfarbe: #000000; /* Hintergrundfarbe der Schaltfläche, wenn der Farbverlauf vom Browser nicht unterstützt wird */ /* In den folgenden Eigenschaften sollten die Farben gleich angegeben werden, da sie dasselbe sind, nur für verschiedene Browser. Schauen wir uns die erste Eigenschaft an. Der Teil von (#676767), zu (#3B3B3B) bedeutet, dass Sie einen Farbverlauf anzeigen müssen, wobei von Farbe #676767) ein Übergang zu Farbe #3B3B3B */ Hintergrund: -webkit-gradient(linear, links oben, links unten, von(#676767), bis(#3B3B3B)); Hintergrund: -moz-linear-gradient(top, #349622, #246416); Filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#349622", endColorstr="#246416"); -ms-filter: „progid:DXImageTransform.Microsoft.gradient(startColorstr=#349622, endColorstr=#246416)“; /* Schlagschatten – Schaltflächenschatten. Die Schattenfarbe wird in RGBA angegeben */ -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.3); Box-Shadow: 0 2px 5px rgba(0,0,0,0.3); ) /* Beim Hover – Gestalten Sie die Schaltfläche, wenn Sie den Mauszeiger darüber bewegen. Alles ist fast das Gleiche wie im vorherigen Block */ .wpcf7 input.wpcf7-submit:hover( Cursor: Zeiger; Textdekoration: Keine; Hintergrundfarbe: #000000; Hintergrund: -webkit-gradient(linear, links oben , links unten, von(#246416), bis(#349622)); Hintergrund: -moz-linear-gradient(top, #246416, #349622); Filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="# 246416 ", endColorstr="#349622"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#246416, endColorstr=#349622)"; ) /* On click – Stil der Schaltfläche, wenn Sie auf klicken es ist fast dasselbe wie im vorherigen Block */ .wpcf7 input.wpcf7-submit:active( top: 1px; color: #d8c6e2; /* Textfarbe der Schaltfläche beim Klicken */ background-color: #000000; background : -webkit -gradient(linear, links oben, links unten, von(#FF0000), bis(#246416)); Hintergrund: -moz-linear-gradient(top, #FF0000, #246416); Filter: progid:DXImageTransform . Microsoft.gradient(startColorstr="#FF0000", endColorstr="#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000, endColorstr=#246416)"; -webkit-box-shadow: keine; -moz-box-shadow: keine; Kastenschatten: keiner; ) /* CF7-Nachrichten – Stil der Nachrichten über erfolgreiches Senden, Fehler usw. */ .wpcf7 .wpcf7-validation-errors( /* Nachrichtenstil für Validierungsfehler */ border:none; /* Nachrichtenblockrahmen */ background-color:#246416; /* Hintergrund */ color:#fff; /* Textfarbe */ margin:0; /* Äußerer Rand */ padding:20px; /* Vertiefung*/ /* Abgerundete Ecken für verschiedene Browser – die folgenden 3 Eigenschaften */ -webkit-border-radius: 10px; -moz-border-radius: 10px; Randradius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( /* Stil der Nachrichten über erfolgreiches Senden */ border:none; /* Nachrichtenblockrahmen */ background-color:#7ad33f; /* Hintergrund */ margin:0; / * Äußere Polsterung */ padding:20px; /* Innere Polsterung */ /* Abrundende Ecken für verschiedene Browser – die folgenden 3 Eigenschaften */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius : 10px ; ) .wpcf7 .wpcf7-mail-sent-ng( border:none; background-color:#349622; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; Randradius: 10px; Farbe: weiß; ) .wpcf7 span.wpcf7-not-valid-tip( border:none; background-color:#349622; padding:5px; padding-left: 5px; padding-right: 5px; Randradius: 10px; Breite: 290px; Farbe: Weiß; /* Schlagschatten */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); box-shadow: 3px 3px 3px rgba(0,0,0,0.3); ) .wpcf7-form .fleft( float: left; ) .wpcf7-form . mright20( margin-right: 20px; ) .wpcf7-form .mright40( margin-right: 40px; ) .wpcf7-form .clear( clear: Both; )

Ein Kontaktformular ist ein integraler Bestandteil der meisten Websites. Aus diesem Grund gibt es im WordPress-Katalog so viele Kontaktformular-Plugins. Eines der beliebtesten ist Contact Form 7. Mit dem Plugin können Sie Formulare aller Art erstellen; sehr flexibel und einfach zu konfigurieren; entwickelt sich seit vielen Jahren und enthält viele Entwicklungen.

Kontaktformulare erstellen und anzeigen

Formulare im Admin-Panel erstellen

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

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

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

Vorderer Teil der Website

Speichern wir nun den Artikel und sehen wir uns an, wie unser Formular aussieht (unter Verwendung des Twenty Sixteen-Themas):

Das Bild zeigt das Formular nach dem Absenden des Briefes (darauf wird durch den Hinweis am Ende des Formulars hingewiesen).

Formularanpassung (Erstellung komplexer Formulare)

Das obige Beispiel zeigt, wie man ein vorgefertigtes und sehr einfaches Kontaktformular einfügt. Schauen wir uns nun an, wie man ein komplexeres Formular erstellt. Gehen wir dazu zurück zum Admin-Panel, zum Formularmanager und gehen wir zum Bearbeiten des Standardformulars.

Geben Sie im oberen Feld – dem Namen des Formulars (es ist nur im Admin-Bereich sichtbar) einen für Sie verständlichen Namen ein, zum Beispiel: „Feedback zur Website“, „Bewerbungsformular“, „Feedback-Formular“ , 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

Schauen wir uns jede Registerkarte einzeln an.

Formularvorlage

Auf dieser Registerkarte können Sie die Felder und das Erscheinungsbild des Formulars anpassen. Der Arbeitsbereich ist der WP HTML-Editor. Nur anstelle 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 Ihnen die Erstellung benutzerdefinierter Felder HTML-Struktur. Unser Standardformular sieht beispielsweise so aus:

Dein Name (erforderlich) Ihre E-Mailadresse (erforderlich) Thema Nachricht

Und wenn es in einem Beitrag angezeigt wird, wird daraus dieser HTML-Code:

Dein Name (erforderlich)

Ihre E-Mailadresse (erforderlich)

Thema

Nachricht

Shortcode-Syntax

Klicken wir auf die Schaltfläche „Text“. Es öffnet sich ein Fenster, in dem wir Attribute für das Textfeld festlegen können. Geben Sie es an und klicken Sie auf „Tag einfügen“.

Anschließend wird das Tag in ein Textfeld mit HTML-Code umgewandelt:

Shortcodes können bequem mit dem Shortcode-Builder 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 ein neues erstellen.
2. Lernen Sie die Syntax und korrigieren Sie den Feld-Shortcode manuell.

Sie können es selbst mit dem Designer herausfinden.

Und hier schauen wir uns die Syntax des Shortcodes an.

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

Text (erforderlich) Feldtyp: Text, Auswahl, Passwort, Nummer usw. (In diesem Fall ist das Feld Text). Bestimmt, in welches Formularelement unser Tag konvertiert wird und welche Art von Daten es daher akzeptiert. * Ein Sternchen macht das Feld zu einem Pflichtfeld (das Formular wird nicht gesendet 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 beim Erstellen der Vorlage für den gesendeten Brief verwendet. id:my-id Das ID-Attribut in der Eingabe mit dem Wert my-id. Wird zur Dekoration verwendet. Klasse:meine-Klasse Klassenattribut in der Eingabe mit dem Wert my-class. Wird zur Dekoration verwendet. Platzhalter „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, E-Mail, Tel., URL, Textbereich
• Numerische Felder: Zahl, Bereich
• Datumsfelder: Datum
• Kontrollkästchen, Radios, Listen: Kontrollkästchen, Radio, Auswählen
• Datei-Upload-Feld: Datei
• CAPTCHA: Captchac und Captchar
• Umfragen: Quiz
• Feld „Akzeptieren“: Annahme
• Schaltfläche „Senden“: Senden
• Benutzerdefinierter Feldtyp

Briefvorlage

Im zweiten Reiter können Sie die Vorlage (Layout) und Eigenschaften des versendeten Briefes verfeinern. In den Feldern dieser Registerkarte können Sie spezielle Formularfeld-Tags verwenden – dies ermöglicht die Übermittlung der im Formular angegebenen Daten in einem Brief.

Tags bestehen aus Feldnamen aus der Formularvorlage. Wir haben beispielsweise ein Textfeld mit dem Namen erstellt: . Jetzt können Sie das Tag in der E-Mail-Vorlage verwenden. Im Brief wird anstelle dieses Tags der vom Benutzer eingegebene Feldwert (vollständiger Name) ersetzt.

Briefköpfe:

An wen - Email, wohin der Brief geschickt wird. Sie können beliebig viele Felder angeben, durch Kommas getrennt.

Von wem – Name und E-Mail, von wem der Brief kam. Normalerweise wird hier die Server-Mail angegeben (z. B [email protected]).

Sie können eine beliebige E-Mail-Adresse angeben. Wenn sich die E-Mail-Domäne jedoch von der Website-Domäne unterscheidet, wird dies beim Formular nicht der Fall sein wird getestet werden und wird bei diesem Parameter „fluchen“, obwohl weiterhin Briefe versendet werden.

Betreff – Der Titel des Briefes. Es wird deutlich, von welchem ​​Formular aus die Daten übermittelt wurden. Der Betreff des Briefes lautet beispielsweise „Fehler auf der Website“, „Rückruf anfordern“ und so weiter. Wählen Sie einen Header, der die Arbeit mit empfangenen E-Mails erleichtert.

• Zusätzliche Header – Standardmäßig wird hier Reply-To: geschrieben. Der Reply-To-Header sagt uns, dass diese E-Mail durch Klicken auf die Schaltfläche „Antworten“ beantwortet werden kann Mailprogramm, und das Formular-Tag ist der Name des Felds aus der Vorlage. Anstelle dieses Tags wird die vom Benutzer angegebene E-Mail eingefügt. Sie erhalten so etwas wie „Antwort an“: [email protected].

Hauptteil des Briefes

Dies ist der nächste wichtige Teil dieser Registerkarte. Der Text des Briefes selbst ist hier angegeben. Im Text verwenden wir die gleichen Formular-Tags (Feldnamen aus der Formularvorlage).

Schauen wir uns den Standardbuchstaben an:

Aus:<>Betreff: Nachricht: -- Gesendet von der Website Studieren des Contact Form 7-Plugins (http://test-wp.ru)

Wir hatten 4 Felder, die der Benutzer ausgefüllt hat. Nach dem Absenden des Briefes werden die Tags in Werte umgewandelt und wir erhalten den folgenden Brief:

Von: Dmitry Betreff: Frage zum Kontaktformular 7 Nachricht: Hallo! Ich habe eine Frage zum Contact Form 7-Plugin. Wie konfiguriere ich es? – Gesendet von der Website Studieren des Contact Form 7-Plugins (http://test-wp.ru)

Nicht Benötigte Felder im Hauptteil des Briefes

Wenn der Benutzer ein Feld nicht ausfüllt, es aber im Textkörper des Briefes verwendet wird, ist der Textkörper des Briefes unvollständig. Im Text steht zum Beispiel „Man from the City“, aber der Benutzer hat das Feld nicht ausgefüllt, was bedeutet, dass wir im Brief „Man from the City“ erhalten ... Diese Zeile im Brief ist überflüssig. Um diese Zeile aus der Nachricht zu entfernen, aktivieren Sie das Kontrollkästchen „Anzeige von Zeilen mit leeren Nachrichten-Tags ausschließen“. Bitte beachten Sie, dass dies nur funktioniert, wenn Text und Shortcode des Feldes in derselben Zeile stehen.

Option „HTML-E-Mail-Format verwenden“. Ermöglicht die Verwendung von HTML-Tags im Textkörper des Briefes. In diesem Fall können Sie eingeschränkt verwenden HTML-Liste Tags, weil nicht alle E-Mail-Clients oder Dienste können komplexe HTML-Markups korrekt verarbeiten. Anwendbar: Tische, Listen mit Aufzählungszeichen, Fettdruck, Absätze und so weiter. Suchen Sie im Internet nach weiteren Details.

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

Benachrichtigungen beim Absenden eines Formulars

Auf dieser Registerkarte können Sie die Meldungen bearbeiten, die das Formular in einer bestimmten Situation anzeigt: wenn ein Brief erfolgreich oder fehlgeschlagen ist oder wenn Fehler vorliegen.

E-Mail-Vorlagen-Tags funktionieren in diesen Feldern nicht.

Zusätzliche Einstellungen

Diese Registerkarte ist für fortgeschrittene Benutzer gedacht und ermöglicht es Ihnen, die Funktionen des Formulars mithilfe von JS-Code zu erweitern. Veröffentlichen Sie beispielsweise Ereignisse für Analysen.

Über die Verwendung dieser Funktionalität werde ich in einem separaten Artikel sprechen.

Es ist schwer, sich eine vollwertige kommerzielle Website ohne Feedback-Formular vorzustellen, und einige Websites verwenden das Feedback-Formular sogar als Bestellformular. Zwar gibt es auch Dinosaurier, die über die Nachfrage nach Neubauten in Kiew schreiben, aber der Kontakt zu ihnen ist nur per E-Mail möglich:

Diese. Um ihnen zu schreiben, müssen Sie die E-Mail kopieren, die Software/Website öffnen, einen Brief erstellen, die E-Mail einfügen, den Text schreiben und senden. Aber für unser Volk ist das sehr schwierig und faul. Es ist einfacher, das Namensfeld auf der Website auszufüllen, Ihre E-Mail-Adresse anzugeben, einen Brief zu schreiben und den Brief per Knopfdruck zu versenden.

Einige CMS verfügen bereits über integrierte Formulare, WordPress jedoch nicht (

Seien Sie nicht traurig, denn es gibt ein hervorragendes Kontaktformular-Plugin. In etwa 10 Minuten haben Sie ein vollständig konfiguriertes Plugin auf Ihrer Website. Verschwenden Sie also keine Zeit, sondern machen Sie sich sofort an die Arbeit.

Installation des CF7-Plugins

Laden Sie zunächst das Plugin herunter und legen Sie es im Ordner ▬ ab /wp-content/plugins/

Gehen Sie dann im Admin-Bereich zur Registerkarte Plugins Und aktiviere es!

Korrekte Einrichtung des Kontaktformulars 7

Nach der Installation sollte auf der linken Seite ein Element erscheinen „Kontaktformular 7“:

Klicken Sie darauf und beginnen Sie mit der Erstellung des ersten Formulars oder der Bearbeitung vorhandener Formulare.

1. Wenn Sie ein neues Formular erstellen müssen, klicken Sie auf "neue hinzufügen"

2. Wenn Sie das erste Formular für sich selbst angepasst haben, können Sie es mithilfe eines Kurzcodes in jede Seite, jeden Beitrag oder jedes Widget einfügen.

3. Sie können das Formular bearbeiten, indem Sie darauf klicken.

An neue Seite Wille zusätzliche Einstellungen Felder, Fehlermeldungen beim Briefversand, Briefvorlage etc. Mit einem einfachen Klick können Sie ein beliebiges Feld zu Ihrer Formularvorlage hinzufügen.