Plugin Kontaktformular 7 Russisch. Alle Felder (Tags) des Formulars. Ein Beispiel für das Hinzufügen eines Feedback-Formulars

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

Wenn eine Funktion, die Sie hinzufügen, erforderlich ist, markieren Sie das Kästchen 1 und vergessen Sie nicht, sie in die Beschreibung zu schreiben.

Sie können das Eingabefeld ergänzen Zusätzliche Information um das Ausfüllen des Formulars zu erleichtern. Kontrollkästchen 2 "Als Platzhalter verwenden?" und geben Sie einen Hinweis in das Feld daneben ein. Wenn Sie dieses Feld im Formular ausfüllen, verschwindet der Tooltip-Text. Folgen Sie dann den Plugin-Eingabeaufforderungen. Das Ergebnis ist im fertigen Formular ein Feld wie dieses:

Code unbedingt in die Briefvorlage einfügen, sonst werden die Daten aus diesem Feld nicht an die Mail gesendet! Dies gilt nicht nur für Textfelder, sondern auch für alle anderen Elemente.

Email

Wird verwendet, um die Postfachadresse des Absenders an das Formular zu übergeben

URL

Ermöglicht das Hinzufügen einer Website-Adresse zum Formular.

Telefonnummer

In dieses Feld können nur Zahlen eingegeben werden.

Zahl (Drehfeld)

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

das Datum

Fügt einen Kalender in das Formular ein mit der Option, ein Datum auszuwählen. Zum Beispiel wird es verwendet, um Zimmer in einem Hotel zu reservieren. Ankunftsdatum, Abreisedatum.

Textfeld

Ja, nicht wundern 🙂 Noch ein Textfeld. Dieses Mal ist dieses Feld groß und ermöglicht es Ihnen, viel Text darin zu schreiben. Zum Beispiel Rezensionen, Kommentare.

Dropdown-Menü

Wenn es viele Optionen für etwas gibt und Sie einen Artikel auswählen müssen große Liste, zum Beispiel eine Liste von Städten, Straßen, Produkten.

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

Kontrollkästchen

Eine Checkbox oder Checkbox im Entwicklerjargon ist ein Element, das eine Checkbox erstellt. Dieses Feld hat zwei Zustände - aktiviert oder nicht. Verfügbar Mehrfachauswahl. Sie befinden sich nur hintereinander, wenn Sie das Kästchen "Checkboxen gegenseitig ausschließen?" dann kann nur eine Option ausgewählt werden.

Radio Knöpfe

Schalter (umgangssprachlich Radiobuttons) werden verwendet, wenn Sie eine einzelne Option aus mehreren vorgeschlagenen auswählen müssen. Durch Aktivieren des Kontrollkästchens "Beschriftung zuerst platzieren und dann Kontrollkästchen?" Die Position der Beschriftung und des Auswahlfeldes ändert sich standardmäßig zuerst die Auswahl, dann die Beschriftung.

Annahme

Bestätigung von etwas. Gehen Sie davon aus, dass Sie die oben beschriebenen Bedingungen akzeptieren.

Frage

Dies ist die erste Verteidigungslinie gegen Spam, die elementarste. Schreiben Sie in die Einstellung eine Art Frage, Sie können Zahlen verwenden, Sie können Buchstaben oder beides verwenden, und geben Sie die richtige Antwort an. Wenn die Antwort beim Ausfüllen des Formulars richtig ist, wird das Formular gesendet. 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 | (senkrechter Balken)

Fügt dem Formular Spamschutz hinzu.

Damit diese Funktion funktioniert, ist ein weiteres Plugin erforderlich. Plugin herunterladen, installieren, aktivieren.

Sie können die Einstellungen nicht ändern, kopieren und 2 Zeilen vor dem Senden-Button einfügen.

Senden einer Datei

Sie können eine Datei an das Formular zum Senden einer Nachricht anhängen. In den Einstellungen können Sie angeben maximale Größe in Bytes und zulässige Formate zum Hochladen, z. B. .jpg .tiff .doc

Senden-Schaltfläche

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

Anpassen des Aussehens des Kontaktformulars 7

Da Plugins Update-Eigenschaften haben, werden wir Änderungen am Erscheinungsbild des Formulars in der Style-Datei style.css des Site-Themes vornehmen

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

Wpcf7 ( background-color:#ddd; ) /*form background color */ .wpcf7 input, .wpcf7 textarea( padding:5px; color:#1D1D1D; font-family:Arial, Helvetica, serifenlos; font-size: 16 Pixel; Zeilenhöhe: 20 Pixel; Rahmen: 1 Pixel solide #C7C7C7; Box-Schatten: Einfügung 2 Pixel 2 Pixel 8 Pixel #F9F9F9; -webkit-transition: alle 0,2 s Ease; -moz-transition: alle 0,2 s Ease; -o-transition : alle 0,2 Sekunden nachlassen; Übergang: alle 0,2 Sekunden nachlassen; ) .wpcf7 .wpcf7-list-item( padding-left: 0; margin-left: 0; margin-right: 25px; ) .wpcf7 .wpcf7-list-item input( border: none; padding-left: 0; margin-left: 0; ) .wpcf7 select( outline: none; font-size:16px; font-family:Arial, Helvetica, serifenlos; ) .wpcf7 input: hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active ( Hintergrund: #FDFDFD; Gliederung: keine; )

Was ist hier was.

.wpcf7-Eingabe, .wpcf7-Textbereich - Eingabefeldstil (Textfeld)

1. Polsterung- setzt den Einzug vom Inhalt zum Rand des Elements. Hier - der Einzug vom in das Feld eingegebenen Text bis zum Rand des Feldes. Der Wert wird in Pixel auf Xpx gesetzt, wobei X die Anzahl der Pixel ist. Beispiel: Padding: 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 Eingabefeld
7. Box Schatten Schatten blockieren. Einsatz zeigt an, dass der Schatten intern ist. Wenn Sie einen äußeren Schatten wünschen, lassen Sie diesen Wert weg. Der zweite und dritte Wert von 2px 2px geben die horizontale bzw. vertikale Überblendung des Schattens an. Der vierte Wert, 8px, gibt den Unschärferadius für den Schatten an. Fünftens – #F9F9F9 – die Farbe des Schattens.

Anpassen der Schaltfläche „Kontaktformular 7“.

Kontaktformular 7 Benachrichtigungsstil

Es ist verantwortlich für die Meldung von Fehlern oder erfolgreichen Übermittlungen.

Wpcf7 .wpcf7-validation-errors( border:none; background-color:#246416; color:#fff; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; Rahmenradius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( -radius: 10px; Rahmenradius: 10px; ) .wpcf7 .wpcf7-mail-sent-ng( Rahmen:none; Hintergrundfarbe:# 349622; margin:0; padding:20px; ; -moz-border-radius: 10px; border-radius: 10px; color: white; ) .wpcf7 span.wpcf7-not-valid-tip( border:none; background-color :#349622; padding:5px; padding- left: 5px; padding-right: 5px; border-radius:10px; width: 290px; color: white; /* Drop shadow */ -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; ) /*form background color */ .wpcf7 input, .wpcf7 textarea( /* Dieser Teil des Codes ist verantwortlich für den Stil der Eingabefelder, Textbereiche */ padding:5px; /* Setzt die Auffüllung des Elements fields vor dessen Inhalt, Sie können einen beliebigen Wert eingeben, zum Beispiel 10px */ color:#1D1D1D; /* Textfarbe in Eingabefeldern */ font-family:Arial, Helvetica, sans-serif; /* Schriftart in Eingabefeldern */ font -size:16px; /* Textgröße in Eingabefeldern */ line-height: 20px; /* Zeilenhöhe in Eingabefeldern */ border: 1px solid #C7C7C7; /* Border um die Felder herum.Der erste Wert ist die Breite in Pixel, der zweite - Box-Stil, dritte - seine Farbe */ box-shadow: inset 2px 2px 8px #F9F9F9; /* Box shadow 2px - x offset, 2px - y offset, 8px - Radius der Schattenunschärfe, #F9F9F9 - Schattenfarbe */ -webkit-Übergang: alle 0,2 Sekunden nachlassen -moz-Übergang: alle 0,2 Sekunden nachlassen -o-Übergang: alle 0,2 Sekunden nachlassen -Übergang: alle 0,2 Sekunden nachlassen ) .wpcf7 .wpcf7-list-item( padding-left: 0; margin-left: 0; margin-right: 25px; ) .w pcf7 .wpcf7-list-item input( border: none; padding-links: 0 linker Rand: 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 man mit dem Mauszeiger darüber fährt */ background: #FDFDFD; /* Der Hintergrund des Eingabefelds beim Überfahren mit dem Mauszeiger */ outline : none; /* Äußerer Rand des Texteingabefeldes */ ) o-transition: 0; transit: 0; border: none; /* Border um den Button */ position: relativ; Farbe: #fff; /* Textfarbe */ Text-Transformation: Großbuchstaben; /* Text-Transformation (Großbuchstaben bedeutet, 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 gleich sein, da sie nur für verschiedene Browser gleich sind */ -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; /* Schaltflächentextgröße */ font-weight: bold; /* Textstil (fett bedeutet fett) */ padding-top: 11px; /* Top padding vom Rand des Elements bis zu seinem Inhalt */ padding-bottom: 10px; /* Padding vom unteren Ende des Elements bis zu seinem Inhalt */ padding-left: 35px; /* Padding links vom Rand des Elements zu seinem Inhalt */ padding-right: 35px; /* Rechts vom Rand des Elements zu seinem Inhalt einrücken */ /* Farbverlaufshintergrund - Der Farbverlaufshintergrund der Schaltfläche */ background-color: #000000; /* Die Hintergrundfarbe des Buttons, wenn der Farbverlauf vom Browser nicht unterstützt wird */ /* In den folgenden Eigenschaften müssen die Farben gleich angegeben werden, da sie nur für verschiedene Browser gleich sind. Schauen wir uns die erste Eigenschaft an. Der Teil from(#676767), to(#3B3B3B) bedeutet, dass wir einen Farbverlauf anzeigen müssen, wobei von Farbe #676767) ein Übergang zu Farbe #3B3B3B erfolgt */ background: -webkit-gradient(linear, left top, 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 - Der Schatten der Schaltfläche. In RGBA angegebene Schattenfarbe */ -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-Schatten: 0 2px 5px rgba(0,0,0,0.3); ) /* On hover - Gestalten Sie die Schaltfläche, wenn Sie mit dem Mauszeiger darüber schweben. Alles ist fast genauso wie im vorherigen Block */ .wpcf7 input.wpcf7-submit:hover( cursor: pointer; text-decoration: none; background-color: #000000; background: -webkit-gradient(linear, left top , links unten, from(#246416), to(#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 - Schaltflächenstil beim Anklicken fast der wie im vorherigen Block */ .wpcf7 input.wpcf7-submit:active( top: 1px; color: #d8c6e2; /* Textfarbe der Schaltfläche beim Anklicken */ 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:DXImag eTransform.Microsoft.gradient(startColorstr=#FF0000, endColorstr=#246416)"; -webkit-box-shadow: keine; -moz-box-shadow: keine; Box-Schatten: keine ) /* CF7 Messages - Art der Meldungen über erfolgreiches Senden, Fehler etc. */ .wpcf7 .wpcf7-validation-errors( /* Meldungsstil für Validierungsfehler */ border:none; /* Meldungsblockumrandung */ background-color:#246416; /* Background */ color:#fff; /* Textfarbe */ margin:0; /* Äußere Polsterung */ padding:20px; /* Innere Polsterung */ /* Browserübergreifende Eckenrundung - die folgenden 3 Eigenschaften */ -webkit-border-radius: 10px; -moz- border -radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( /* Stil der Erfolgsmeldung */ border:none; /* Message block border */ background-color:#7ad33f; / * Hintergrund */ margin:0; /* Äußere Polsterung */ padding:20px; /* Innere Polsterung */ /* Browserübergreifende Eckenrundung - die folgenden 3 Eigenschaften */ -webkit-border-radius: 10px; -moz- Randradius: 10px; Randradius: 10px; ).wpcf7 .wpcf7-mail-sent-ng( Rand:none; Hintergrundfarbe:#349622; Rand:0; Polsterung:20px; -webkit-Randradius: 10px; -moz-border-radius: 10px; border-radius: 10px; color: white; ) .wpcf7 span.wpcf7-not-valid-tip( border:none; backgrou nd-Farbe:#349622; Polsterung: 5px; Polsterung links: 5px Polsterung 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-Schatten: 3px 3px 3px rgba(0,0,0,0.3); ) .wpcf7-Formular .fleft(float: left; ) .wpcf7-Formular .mright20( Rand rechts: 20px; ) .wpcf7-Formular .mright40( Rand rechts: 40px; ) .wpcf7-Formular .clear( löschen: beide; )

Es ist schwer vorstellbar, dass eine vollwertige kommerzielle Website kein Feedback-Formular hat, und einige Websites verwenden das Feedback-Formular sogar als Bestellformular. Es gibt zwar auch Dinosaurier, die über die Nachfrage nach Neubauten in Kiew schreiben, aber die Kommunikation mit 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. Und für unsere Leute ist es sehr hart und faul. Es ist einfacher, das Namensfeld auf der Website auszufüllen, Ihre E-Mail-Adresse anzugeben, einen Brief zu schreiben und einen Brief per Knopfdruck zu senden.

In einigen CMS gibt es bereits integrierte Formulare, aber in WordPress gibt es keine solchen (

Sei nicht traurig, denn es gibt ein tolles Plugin Kontakt Formular. In 10 Minuten haben Sie ein vollständig konfiguriertes Plugin auf Ihrer Website, also lassen Sie uns keine Zeit verschwenden, sondern sofort zur Sache kommen.

Installieren des CF7-Plugins

Gehen Sie dann zum Admin-Panel auf der Registerkarte Plugins und aktiviere es!

Korrekte Einrichtung des Kontaktformulars 7

Wir klicken darauf und fahren fort, das erste Formular zu erstellen oder vorhandene zu bearbeiten.

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 mit dem Kurzcode auf jeder Seite, jedem Beitrag oder Widget einfügen.

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

Auf der neue Seite es wird zusätzliche Einstellungen für Felder, Fehlermeldungen beim Versenden von Briefen, eine Briefvorlage usw. geben. Mit einem einfachen Klick Sie können Ihrer Formularvorlage ein beliebiges Feld hinzufügen.

Fast jede Website sollte über Feedback verfügen, das es Blog-Lesern oder Firmenkunden ermöglicht, direkt mit ihren Eigentümern in Kontakt zu treten. Dies ist eine der bequemsten Möglichkeiten, mit Besuchern zu interagieren. Einige Besitzer von WordPress-Sites sind jedoch immer noch auf eine einfache Platzierung beschränkt Anschrift für die Kommunikation, da dieses Content-Management-System keine eingebaute Funktion zum Erstellen von Kontaktformularen hat. Dieser Ansatz kann eine große Anzahl von Internet-Bots anziehen, die das Postfach buchstäblich mit Spam füllen.

Um solche Probleme zu vermeiden, können Sie die Feedback-Funktion auf WordPress mit einem speziellen Plugin implementieren. Es gibt viele davon im WordPress-Verzeichnis, aber Contact Form 7 gilt als eines der besten.

Dies ist ein völlig kostenloses Plugin, das nur auf freiwilligen Spenden von Benutzern basiert. Trotzdem hebt es sich von ähnlichen Lösungen ab, weil es sehr breite Fähigkeiten hat.

Hauptmerkmale des Plugins

• Feinabstimmung für alle Benutzeranforderungen;
• Einfache Benutzeroberfläche und klare Optionen;
• Bequeme Anzeige Email;
• Unterstützung für viele Sprachen, einschließlich Russisch;
• Zuverlässiger Schutz vor Spam mit Textfrage oder Captcha;
• Unterstützung für Ajax-Anfragen;
• Anpassung des Aussehens über CSS-Stile;
• Nützliche Dokumentation, die viele Fragen beantwortet.

Plugin-Nutzung

Sobald Sie Contact Form 7 auf WordPress installiert haben, haben Sie möglicherweise viele Fragen zur Verwendung. Tatsächlich ist es nicht so schwer zu verstehen, zumal nicht alle Funktionen in der Anfangsphase benötigt werden. In jedem Fall benötigen Anfänger einige Zeit, um die grundlegenden Optionen zu erlernen, wenn auch nicht sehr viel.

Das erste, was Sie nach der Aktivierung des Plugins bemerken werden, ist das Erscheinen eines neuen Elements im WordPress-Admin-Panel namens „Contact Form 7“, wo alle Plugin-Einstellungen vorgenommen werden. Alternativ können Sie auch über die Liste dorthin gelangen installierte Plugins indem Sie Contact Form 7 finden und auf „Setting“ klicken.

Nachdem Sie das Hauptfenster von Contact Form 7 geöffnet haben, sehen Sie eine Meldung mit verschiedenen Hilfelinks. Sie können diesen Beitrag gerne schließen, da er Links zu wichtigen Tipps und Anweisungen enthält. Zum Beispiel wäre es schön, sich mit den Hauptanweisungen für die Arbeit mit dem Plugin vertraut zu machen, mit der Seite, die der Arbeit mit Tags gewidmet ist kurze Beschreibung Verwaltungsschnittstelle sowie wie E-Mails konfiguriert werden. Sie müssen sich nicht alle diese Materialien merken, aber es ist eine gute Idee, Links zu ihnen griffbereit zu haben, damit Sie auftretende Probleme schnell lösen können.

Bewusstsein der neuen Form

Um mit der Erstellung eines neuen Kontaktformulars zu beginnen, müssen Sie auf die Schaltfläche „Neu hinzufügen“ klicken. Vor Ihnen öffnet sich ein Fenster, in dem Sie ihm zunächst einen Namen geben müssen. Unten sehen Sie den Inhalt der aktuellen Vorlage, in die bereits einige Tags eingefügt wurden, um Ihnen eine allgemeine Vorstellung davon zu geben, wie sie aussehen sollte. Sie können beliebige andere Tags verwenden wie:

1. Textfeld, E-Mail-Adresse (Text, E-Mail);
2. URL verknüpfen);
3. Telefonnummer, Nummernkreis, Datum (tel, number, date);
4. Ein mehrzeiliges Textfeld (Textarea);
5. Checkboxen, Radiobuttons und Dropdown-Menü (Checkbox, Radio, Select);
6. Captcha-Prüfung (Captchac und Captchar);
7. Überprüfung der Sicherheitsfrage (Quiz);
8. Kontrollkästchen „Akzeptieren“;
9. Anhängen von Dateien (Datei);
10. Senden-Schaltfläche.

Darüber hinaus können Sie für jeden von ihnen bestimmte Parameter festlegen, z. B. das Feld obligatorisch machen, einen Standardwert angeben und einen Bezeichner oder eine Klasse hinzufügen, um ihn beim Stylen durch CSS-Stile zu verwenden.

Als Beispiel können Sie hinzufügen fertige Vorlage Felder wie: Spitzname, Telefonnummer, Textfrage zum Schutz vor Spam. Dies ist die einfachste Form, eine Nachricht an den Site-Administrator zu senden. Um es zu erstellen, benötigen Sie Tags (Text, Telefon, Quiz).

Lassen Sie uns zuerst ein neues Feld für den Spitznamen des Verfassers der Nachricht hinzufügen, mit dem Namen "Ihr Spitzname", wie in anderen vorgefertigten Feldern geschrieben (Sie können es einfach kopieren). Wählen Sie nun im Abschnitt „Formularvorlage“ „Text“ aus und stellen Sie die gewünschten Parameter ein. Sie können es zum Beispiel obligatorisch machen, indem Sie das Kontrollkästchen "Pflichtfeld" aktivieren. Alternativ können Sie dieses Feld zu einem Pflichtfeld machen, indem Sie einfach ein Sternchen (Text*) hinzufügen.

Der Feldname kann als Standard belassen oder auf etwas anderes gesetzt werden, z. B. "Ihr Spitzname". Damit das Feld Standardinhalte hat, die dem Benutzer helfen, schneller zu navigieren, müssen Sie es der Zeile "Standardwert" hinzufügen. Wenn Sie das Kästchen „Diesen Text als Platzhalter des Feldes verwenden“ anhaken, dann verschwindet dieser Inhalt beim Anklicken. Als Nächstes können Sie die Attribute "ID" oder "Klasse" festlegen, um sie zum Gestalten des Felds durch CSS-Stile zu verwenden. Jetzt muss nur noch auf "Tag einfügen" geklickt werden, und das generierte Tag wird im Inhalt angezeigt. Es sollte so aussehen:

Dein Spitzname

(Text your-nickname id: your-nickname placeholder "(!LANG:Nickname") !}

Ähnliche Aktionen müssen Sie beim Hinzufügen der restlichen Felder (Tel, Quiz) ausführen. Nur bei einer Frage zum Schutz vor Spam (Quiz) müssen Sie Frage und Antwort in eine Zeile schreiben, getrennt durch „|“. Es sollte etwa so aussehen (Was ist 2+3?|5). Bitte beachten Sie, dass die Reihenfolge der Tags im Vorlageninhalt die Position der Felder auf der Website bestimmt.

Jetzt muss nur noch auf die Schaltfläche "Speichern" geklickt werden, woraufhin der generierte Shortcode oben erscheint, um in einen Beitrag, eine Seite oder ein Text-Widget eingefügt zu werden. Wenn alles richtig gemacht wurde, wird das fertige Formular auf Ihrer WordPress-Seite angezeigt, auf der Sie diesen Shortcode eingefügt haben.

Adressat und Inhalt von Briefen einstellen

In Contact Form 7 für WordPress können Sie die E-Mail-Vorlage anpassen, die an den Administrator gesendet wird. Um es zu implementieren, müssen Sie auf die Registerkarte mit dem entsprechenden Namen gehen. Hier sehen Sie mehrere Zeilen zum Ausfüllen:

1. „An“ – Postfachadresse des Administrators;
2. "Von" - der Name des Absenders;
3. "Betreff" - der Betreff des Briefes;
4. Zusätzliche Header – zusätzliche Header;
5. Nachrichtentext - der Inhalt des Briefes;
6. Angehängte Dokumente.

Einige von ihnen sind bereits standardmäßig mit Daten gefüllt, aber Sie können sie an Ihre Bedürfnisse anpassen. Beispielsweise können Sie die Telefonnummer des Absenders hinzufügen, indem Sie den entsprechenden Tag-Namen aus der Formularvorlage kopieren. Vergessen Sie nicht, nach Änderungen auf „Speichern“ zu klicken.

Richten Sie Benachrichtigungen beim Senden ein

Jeder Besucher kann beim Senden einer Nachricht in einigen Feldern Fehler machen, dann sollten ihm entsprechende Benachrichtigungen angezeigt werden. Diese finden Sie im Abschnitt Formularübermittlungsbenachrichtigungen. Sie sind alle eingeschaltet Englische Sprache, also müssen Sie sie ins Russische übersetzen oder Ihren eigenen Text eingeben. Dies muss getan werden, sonst versteht der Besucher einfach nicht, was er falsch macht.

Zusätzliche Optionen

Du kannst Fragen Zusätzliche Optionen für jedes Kontaktformular durch Hinzufügen eines Teils des Codes in einem bestimmten Format zu einem speziellen Feld im " Zusätzliche Einstellung". Beispielsweise schaltet die Zeile "demo_mode: on" den Demo-Modus ein, in dem E-Mails, aber es wird nur eine Meldung über die erfolgreiche Übermittlung angezeigt. Auch, wenn Sie die Zeile einfügen

Acceptance_as_Validation: an

dann wird bei deaktivierten Kontrollkästchen eine Fehlermeldung angezeigt, die verhindert, dass die Übermittlung abgeschlossen wird.

Personalisierung

Standardmäßig verwenden alle Felder in Contact Form 7 das Standard-Styling von WordPress-Vorlage, nicht durch besondere Schönheit ausgezeichnet. Aus diesem Grund suchen viele Benutzer nach Alternativlösungen, mit attraktiverem Aussehen. Aber für diejenigen, die mit CSS vertraut sind, wird es sehr einfach sein, es zu ändern Aussehen Felder nach Ihren Wünschen. Dazu können Sie die Attribute „ID“ und „Klasse“ verwenden, die in den Parametern jeder Variable eingestellt werden.

Denken Sie daran, wenn Sie der Haupttabelle eines Plugins oder einer Vorlage benutzerdefinierte CSS-Stile hinzufügen, werden nach der Aktualisierung alle Änderungen gelöscht. Daher ist es ratsam, entweder ein separates Stylesheet oder eine spezielle Funktion in Ihren Vorlagenoptionen zu verwenden, mit der Sie benutzerdefinierte CSS-Stile über das Admin-Panel hinzufügen können.

Zusatz

Als Ergänzung ist es sehr erwähnenswert gute Funktion in Contact Form 7 für WordPress, mit dem Sie große Briefströme von Besuchern filtern können. Es gibt Situationen, in denen es wirklich viele sind, sodass es unmöglich ist, alles schnell zu beantworten, und das manuelle Filtern sehr langwierig ist. Natürlich können Sie in diesem Fall Labels und Filter direkt verwenden Briefkasten aber das wird auch lange dauern. Es ist viel einfacher, in der Übermittlungsphase zu filtern, indem Sie das „select“-Tag in Contact Form 7 verwenden, das eine Dropdown-Liste anzeigt. In dieser Liste können Sie dem Benutzer eine Nachrichtenkategorie zur Auswahl stellen, um die Wichtigkeit der eingehenden Korrespondenz anhand dieser zu bestimmen.

Erstellen Sie ein neues Feld, indem Sie das "Dropdown-Menü" auswählen und es auf erforderlich setzen. Fügen Sie dann in der Zeile "Optionen" mehrere Kategorieoptionen für Nachrichten hinzu, je nach Richtung Ihrer Website (z. B. " Allgemeine Probleme“, „Bewertungen über die Arbeit des Unternehmens“, „Gib mein Geld zurück“). Jede Kategorie muss in einer neuen Zeile beginnen. Es ist auch wünschenswert, das Kästchen "Leeres Element als erste Option einfügen" zu aktivieren, damit das erste Element in der Liste eine leere Zeichenfolge ist und der Benutzer den entsprechenden Grund auswählen muss, anstatt die erste Option zu verlassen.

Klicken Sie nun auf „Tag einfügen“ und kopieren Sie den Namen. Gehen Sie dann zum Abschnitt "Brief" und fügen Sie die Kopie in die Zeile "Betreff" ein. Stellen Sie sicher, dass Sie "" voranstellen. Fertig, jetzt ist der Betreff jedes eingehenden Briefes die vom Benutzer ausgewählte Kategorie, was das Filtern erheblich erleichtert.

Fazit

WordPress hat sich längst von einer reinen Blog-Plattform entwickelt und kann nun selbstbewusst als Basis sowohl für Unternehmensseiten als auch für professionelle Benutzerseiten dienen. Jede solche Website sollte den Benutzern Folgendes bieten bequeme Weise für die direkte Kommunikation mit den Eigentümern. Contact Form 7 hilft dabei, alle Lücken in der Kommunikation zwischen Website-Besuchern und ihren Eigentümern zu schließen, und vor allem wird es nicht viel Zeit in Anspruch nehmen, diese Funktion zu implementieren.