So fügen Sie Kontaktformulare mit dem Plugin hinzu – P1: Verwenden Sie das Kontaktformular 7

Das Kontaktformular ist eines der wichtigsten Elemente, wenn Sie eine professionelle Website haben möchten. Es ist sogar nicht schwer, ein Kontaktformular zu erstellen und einzurichten, wenn Sie dedizierte Plugins verwenden. Damit Sie Kontaktformulare mit Plugins einfach und schnell erstellen können, haben wir Anleitungen zur Verwendung der gängigsten Kontaktformular-Plugins zusammengestellt und geschrieben.

Im ersten Teil der Reihe „Kontaktformular“ erfahren wir:

• Was ist ein Kontaktformular?
• Vorteile des Kontaktformulars
• Wie verwende ich das Contact Form 7-Plugin, um ein Formular zu erstellen?

Was ist das Kontaktformular und seine Vorteile?

Was ist ein Kontaktformular?

Kontaktformular ist ein Begriff, der Vermarktern vertraut ist. Über das Kontaktformular können Benutzer E-Mails senden und Sie direkt auf der Website kontaktieren, ohne Ihre E-Mail-Adresse zu kennen.

Ein Kontaktformular hat normalerweise viele Felder, in die Benutzer die erforderlichen Informationen wie E-Mail, Telefonnummer, Name, E-Mail-Inhalt usw. eingeben können . Hier ist ein Beispiel:

Vorteile des Kontaktformulars

Da Benutzer das Kontaktformular verwenden können, um direkt auf dieser Website Informationen an den Site-Inhaber zu senden (um ihre Kontaktinformationen zu hinterlassen, Support-Anfragen oder andere Anfragen zu senden, …), wird der Kontakt viel bequemer und schneller.

Darüber hinaus kann die Verwendung eines Kontaktformulars Ihre E-Mails privat halten und Spam- und Sicherheitsbedrohungen reduzieren. Daher müssen Sie sich nicht jeden Tag mit dem Postfach voller Spam und Müll herumschlagen.

Kontaktformulare helfen Ihnen auch, Benutzerinformationen leichter zu erfassen, da diese die von Ihnen im Formular angeforderten Informationen eingeben müssen. Dies ist eine der Strategien, um mehr Leads zu erhalten.

Im Allgemeinen sollten Sie Kontaktformulare verwenden, um eine professionelle Website zu erstellen und mehr Vorteile für Ihr Unternehmen zu erzielen.

So erstellen Sie ein Kontaktformular

Sie können nach Belieben codieren, um Felder und Formulare zu erstellen. Wenn Sie jedoch kein Programmierer sind, ist dies nicht möglich. Oder Sie müssen einen Geldbetrag dafür bezahlen, dass Sie einen Programmierer dafür engagieren.

Daher ist die nützlichste Lösung zum Erstellen von Kontaktformularen für Nicht-Tech-Benutzer oder sogar Entwickler (um Zeit und Mühe zu sparen) die Verwendung eines Plugins. Jetzt gibt es viele Kontaktformular-Plugins, die einfach, leicht, schnell und kostenlos sind. Es gibt also keinen Grund, sie nicht zum Erstellen eines Kontaktformulars zu verwenden, oder?

In allen Artikeln dieser Serie zeige ich Ihnen, wie Sie ein Hochschul-Immatrikulationsformular wie folgt erstellen:

Erstellen Sie ein Formular mit dem Kontaktformular 7

In diesem ersten Artikel der Reihe „Kontaktformular mit Plugins erstellen“ verwende ich Contact Form 7 – eines der beliebtesten kostenlosen Kontaktformular-Plugins, die heute erhältlich sind.

Laden Sie zunächst dieses Plugin aus dem Plugin-Repository auf wordpress.org herunter und installieren Sie es, oder gehen Sie zu Dashboard > Plugin > Neu hinzufügen, um es zu installieren und zu aktivieren.

Kontaktformular 7

Autor(en): Takayuki Miyoshi

Aktuelle Version: 5.5.3

Zuletzt aktualisiert: 28. November 2021

Kontaktformular-7.5.5.3.zip

82% Bewertungen 5,000,000+ Installiert WP 5.7+ Benötigt

Hier finden Sie spezifische Anweisungen zum Erstellen des oben genannten Hochschulregistrierungsformulars mit diesem Plugin.

Schnittstelle

Gehen Sie zu Dashboard > Kontakt > Neu hinzufügen , um ein neues Kontaktformular zu erstellen. Hier ist die Schnittstelle, mit der Sie arbeiten werden:

(1): Geben Sie den Namen des Kontaktformulars ein
(2): Registerkarten zum Erstellen und Einrichten eines Kontaktformulars, einschließlich:

• Registerkarte Formular : Felder für das Kontaktformular erstellen
• Registerkarte E- Mail : Richten Sie E-Mails ein, die Sie vom Kontaktformular erhalten
• Registerkarte " Nachricht" : Benachrichtigungen einschließen, die Benutzer erhalten, wenn bei der Dateneingabe ein Fehler aufgetreten ist, das Formular nicht gesendet werden kann, das Formular erfolgreich gesendet wurde, …
• Registerkarte Zusätzliche Einstellungen : Fügen Sie dem Kontaktformular weitere Elemente hinzu.

Felder für Kontaktformular erstellen

Wie bereits erwähnt, enthält ein Kontaktformular Felder, in denen Benutzer Informationen eingeben oder damit interagieren können. Hier ist die Registerkarte Formular , die zum Erstellen dieser Felder verwendet wird:

(1) besteht aus Feldern, die dem Formular hinzugefügt werden können, wie Name, E-Mail, Nummer, Senden-Schaltfläche, … Um ein beliebiges Feld hinzuzufügen, klicken Sie einfach auf den Namen des entsprechenden Felds.

(2) ist der Bereich zur Anzeige der Formularstruktur im HTML-Format. Wenn Sie ein neues Kontaktformular erstellen, haben Sie die Standardstruktur für ein einfaches Formular mit einfachen Feldern wie E-Mail, Name, Betreff und Schaltfläche zum Senden. Sie können dieses Formular sofort verwenden oder darauf aufbauend ein neues Formular erstellen.

Allgemeine Anweisung für Felder

Nachdem Sie das gewünschte Feld ausgewählt haben, wird ein Popup angezeigt, in dem Sie die erforderlichen Informationen in das Feld eingeben. Jedes Feld erfordert unterschiedliche Informationen, aber im Allgemeinen haben sie alle die folgenden Abschnitte:

Name : Namensattribut
Standardwert : der Standardwert des Felds
ID- Attribut : ID des Felds
Klassenattribut : die Klasse des Feldes

Hinweis : Das ID-Attribut und das Klassenattribut sind optional und Sie können dort Ihre benutzerdefinierten Informationen eingeben. Wenn Sie die folgenden Schritte zum Gestalten des Kontaktformulars einfacher haben möchten, sollten Sie diese 2 Abschnitte ausfüllen.

Nachdem Sie diese Informationen eingegeben haben, sehen Sie unten in diesem Feld das Tag des von Ihnen erstellten Felds . Klicken Sie auf Tag einfügen, um dieses Feld in den HTML-Code des Formulars einzufügen.

Normalerweise hat das Tag jedes Felds in einem mit Contact Form 7 erstellten Kontaktformular die folgende Struktur:

 [field* name_attribute id:field_id class:field_class "der Standardwert des Feldes"]

Erklärungen:

• field * ist der von Ihnen gewählte Feldtyp. Dies ist der wichtigste und unverzichtbare Teil eines Feldes.
• * bedeutet, dass dieses Feld erforderlich ist. Wenn Sie die Benutzer nicht zur Eingabe zwingen möchten, entfernen Sie das * .

Weitere Informationen zur Struktur eines Feld-Tags in Contact Form 7 finden Sie in dieser Dokumentation. Wenn Sie die Bedeutung und HTML-Struktur eines Kontaktformulars verstehen, können Sie mithilfe von Code einfacher Felder bearbeiten, erstellen und neue Felder hinzufügen. Vor allem mit Programmierern können sie HTML-Code schreiben, um das Formular gemäß obiger Syntax zu erstellen. Bei Nicht-Programmierern kann dies jedoch schwierig sein, daher empfehle ich, die folgenden Schritte zu befolgen.

Bei Kontaktformularen dieser Serie muss ich folgende Felder auswählen:

Alle Felder enthalten die oben genannten allgemeinen Informationen. Daher leite ich jetzt nur die spezifischen Teile jedes Feldes.

Nachfolgend finden Sie detaillierte Anweisungen für jedes Feld.

Erstellen Sie ein Feld für die Eingabe des Namens

Wählen Sie das Textfeld aus und geben Sie die grundlegenden Informationen für das Feld in das Feld ein:

In der Art Abschnitt Feld, können Sie verlangen , so dass dieses Feld ausgefüllt werden obligatorisch ist (dies ist optional).

Hinweis : Wählen Sie im Abschnitt Standardwert die Option Diesen Text als Platzhalter für das Feld verwenden , um diesen Inhalt im Feld anzuzeigen, bevor Benutzer Daten eingeben. Sie sollten diesen Modus verwenden, um Benutzern zu erklären, was sie in das Feld ausfüllen müssen.

Der Abschnitt Akismet bezieht sich auf das Akismet-Plugin – ein Anti-Spam-Plugin. Wenn Sie dieses Plugin nicht haben, ist dieser Abschnitt egal.

Erstellen Sie ein Feld für die Eingabe der Telefonnummer

Wählen Sie das Nummernfeld aus und geben Sie die grundlegenden Informationen für das Feld ein.

In der Art Abschnitt Feld, eine Art für dieses Feld wählen. Es gibt zwei Arten von Feldern: Spinbox und Slider .

Der Schieberegler zeigt eine Skala zur Auswahl der Zahl wie folgt an:

Dieser Stil eignet sich zum Scoring oder Auswählen von Zahlen basierend auf einer bestimmten Skala.

In der Spinbox können Sie eine beliebige Zahl eingeben, die Zahlenfolge in das Feld wie Telefonnummer, Kartennummer, Ausweisnummer, … Also in diesem Beispiel wähle ich Spinbox.

Im Bereich Bereich können Sie ein Limit für die Anzahl auswählen. In diesem Beispiel benötige ich diesen Abschnitt nicht, daher habe ich nichts ausgefüllt.

Erstellen Sie ein Feld für die Auswahl von Studiengängen und Studienorten

Wählen Sie in diesem Feld das Dropdown-Menü aus .

Geben Sie nun im Abschnitt Optionen die Optionen für Hauptfächer und Standorte ein. Denken Sie daran, dass jede Option eine Zeile ist.

Wenn Sie Benutzern die gleichzeitige Auswahl mehrerer Optionen ermöglichen möchten, klicken Sie auf Mehrfachauswahl zulassen .

Erstellen Sie ein Feld zur Auswahl des Registrierungszwecks

Wählen Sie das Kontrollkästchen- Feld aus.

Der Abschnitt Optionen ähnelt dem im Dropdown- Menüfeld oben. Darüber hinaus gibt es weitere Optionen für Kontrollkästchen wie folgt

• Setzen Sie ein Label zuerst, ein Kontrollkästchen zuletzt
• Umhüllen Sie jeden Artikel mit einem Etikettenelement
• Machen Sie Kontrollkästchen exklusiv (Sie dürfen nur 1 Option auswählen).

Erstellen Sie die Senden-Schaltfläche

Schließlich wählen Sie das Feld einreichen und füllen Sie einfach die Informationen , wie die folgende Anforderung (beachten Sie, dass Label ist das Wort , das auf diese Schaltfläche angezeigt wird, zB „Senden“, „Register“, „Bestätigen“).

Insbesondere beim Erstellen eines neuen Formulars hat dieses Plugin bereits automatisch ein gesendetes Feld erstellt. Daher können Sie dieses Feld verwenden, ohne ein neues zu erstellen.

Beschriftungen für Felder hinzufügen

Jetzt haben Sie die Felder für das Kontaktformular erstellt. Ihre Felder haben jedoch keinen Namen, der im Kontaktformular wie folgt angezeigt werden könnte:

Daher müssen Sie Feldern Beschriftungen hinzufügen, indem Sie die folgende Codestruktur in den HTML-Teil des Formulars einfügen:

 <label> Feldbezeichnung
[Feld-Tag] </label>

Als nächstes schreiben Sie das Etikett des Feldes im Bereich Etikettenabschnitt. Geben Sie dann alle oben genannten Informationen ein und klicken Sie auf Speichern .

Nach dem Anlegen der Felder hat mein Kontaktformular folgende Codestruktur, beachten Sie, dass ich die Felder so angeordnet habe, dass sie an der gewünschten Position im Frontend angezeigt werden:

 <label> Ihr Name (erforderlich)
[Text* Ihr-Name "Geben Sie Ihren Namen ein"] </label> 

<label> Ihre Telefonnummer
[Nummer Telefon Platzhalter "Geben Sie Ihre Telefonnummer ein"] </label> <label> Ihre E-Mail (erforderlich)
[E-Mail* deine-E-Mail "Geben Sie Ihre E-Mail ein"] </label>

<label> Major
[Auswahl* Studiengang "Informatik" "Sprachwissenschaft" "Landwirtschaft" "Ingenieurwesen" "eCommerce"] </label>
<label> Studienort 
[wählen* Studienort "New York" "Chicago" "Los Angeles" "Washington DC" "Houston" "Philadelphia"] </label>

</label> Registrieren bei
[Checkbox* registrieren label_first "Studieren" "Eine Tour machen" "Konsultieren"] </label>

[Absenden Absenden"]

Dieses Mal wird Ihr Kontaktformular immer noch nicht auf der Website angezeigt. Sie müssen noch einige Schritte ausführen, um es im Frontend anzuzeigen.

Kontaktformular-Einstellungen

E-Mail einrichten

Auf der Registerkarte E- Mail können Sie den Inhalt der E- Mail anpassen, die Sie erhalten, wenn Kontaktformulare von Benutzern gesendet werden. Um diesen Abschnitt einzurichten, müssen Sie Mail-Tags der Felder in das soeben erstellte Kontaktformular einfügen. Hier ist ein Beispiel:

Erklärungen:

• An : Geben Sie die E-Mail-Adresse der Person ein, die für die Prüfung des Kontaktformulars verantwortlich ist.
• Von und Betreff : Sie sollten hier einen Namen eingeben, um festzulegen, wer dieses Kontaktformular sendet.
• Die Nachricht: Add Mail-Tags hier , um sicherzustellen , dass , wenn Sie E - Mails von dem Kontakt - Formular erhalten, wird es alle Informationen angezeigt , dass Sie von den Benutzern verlangen.

Andere Einstellungen

Registerkarte Nachricht

Geben Sie Nachrichten ein, die in den Situationen verwendet werden, wie Sie in der Registerkartenbeschreibung sehen können. Nachdem Benutzer das Formular beispielsweise erfolgreich oder nicht erfolgreich gesendet haben, sollten Sie eine Nachricht hinzufügen, um sie darüber zu informieren. Wenn Benutzer ein erforderliches Feld vergessen, sollten Sie auch eine Nachricht hinzufügen, damit Benutzer dieses Feld ausfüllen können. Obwohl dies kleine Details sind, sollten Sie darauf achten, die Benutzererfahrung zu verbessern.

Registerkarte „Zusätzliche Einstellungen“

Auf dieser Registerkarte können Sie Code-Snippets hinzufügen, um Folgendes zu installieren:

• Nur-Abonnenten-Modus
• Demo-Modus
• E-Mail überspringen
• Akzeptanz als Validierung
• Flamingo-Einstellungen
• Nachrichtenspeicherung unterdrücken
• JavaScript-Code

Es gibt einige sehr nützliche Teile, die Sie verwenden sollten, wie zum Beispiel:

• Nur-Abonnenten-Modus : In diesem Modus können nur eingeloggte Benutzer Ihrer Website das Kontaktformular absenden. Dies eliminiert Spam-Nachrichten und ist nur für diejenigen gedacht, die Sie wirklich kontaktieren möchten.
• Akzeptanz als Validierung : Fügen Sie eine Funktion hinzu, um Benachrichtigungen für das Kontrollkästchen Akzeptanz anzuzeigen, wenn Benutzer dieses Kontrollkästchen nicht aktivieren, sondern zu einem anderen Feld wechseln. Denn wenn Benutzer das Kontrollkästchen Akzeptieren nicht aktivieren, wird die Fehlermeldung standardmäßig erst angezeigt, nachdem sie das Formular abgeschickt haben. Dieses Kontrollkästchen für Akzeptanz wird häufig verwendet, um Felder wie „Ich stimme den Website-Bedingungen zu“ zu erstellen. Falls Sie jedoch andere Inhaltstypen erstellen, müssen Sie möglicherweise Akzeptanz als Validierung hinzufügen.

Um mehr über die anderen Funktionen auf der Registerkarte Zusätzliche Einstellungen zu erfahren, können Sie hier mehr lesen.

Zeigen Sie das Kontaktformular auf der Website an

Der letzte Schritt ist die Anzeige des soeben erstellten Kontaktformulars auf der Website.

Noch an der Schnittstelle, um ein neues Formular zu erstellen, kopieren Sie den Shortcode und fügen Sie ihn auf der gewünschten Seite oder dem gewünschten Beitrag ein.

Hier meine Endergebnisse:

Allerdings sieht mein Kontaktformular nicht sehr gut aus, also muss ich es ein bisschen stylen.

Wenn Sie das Kontaktformular wie die Vorlage, die ich zu Beginn dieses Artikels angegeben habe, neu gestalten möchten, müssen Sie den HTML-Code des Formulars wie folgt bearbeiten, um das Formatieren zu erleichtern:

 <div class="form__field form__full-width">
<label>Ihr Name (erforderlich)
[Text* Ihr-Name-Platzhalter "Geben Sie Ihren Namen ein"]
</label>
</div>
<div class="form__field">
<label>Ihre Telefonnummer
[Nummerntelefon-Platzhalter "Geben Sie Ihre Telefonnummer ein"]
</label>
</div>
<div class="form__field">
<label>Ihre E-Mail (erforderlich)
[E-Mail* Ihre E-Mail-Platzhalter "Geben Sie Ihre E-Mail-Adresse ein"]
</label>
</div>
<div class="form__field">
<label>Major
[Auswahl* Studiengang "Informatik" "Sprachwissenschaft" "Landwirtschaft" "Ingenieurwesen" "eCommerce"]
</label>
</div>
<div class="form__field">
<label>Lernort
[wählen* Studienort "New York" "Chicago" "Los Angeles" "Washington DC" "Houston" "Philadelphia"]
</label>
</div>
<div class="form__field form__full-width">
<label>Registrieren bei
[Checkbox* registrieren use_label_element "Studieren" "Eine Tour machen" "Beraten"]
</label>
</div>
<div class="form__field form__full-width">
[senden Sie "Senden"]</div>

Gehen Sie dann zu Customizer > Additional CSS Ihres Themes und fügen Sie den folgenden Code ein:

 #wpcf7-f330-p104-o1 .wpcf7-form { display: flex; flex-wrap: wrap; margin: 0 -15px; padding: 20px; background: #eeeeee; } .form__field { width: 50%; padding: 0 15px; margin-bottom: 20px; } .form__field.form__full-width { width: 100%; } .form__field input:focus::placeholder { opacity: 0; } .form__field input, .form__field select { width: 100%; color: #77818e; font-style: italic; } .form__field input::placeholder, .form__field select::placeholder { color: #77818e; } .form__field input[type="submit"] { color: #4299e1; width: auto; background: #fff; border: 1px solid #4299e1; } .form__field span.wpcf7-list-item { margin: 10px 20px 0 0; display: block; } .form__field span.wpcf7-list-item input { width: auto; } .wpcf7-checkbox { display: flex; justify-content: space-between; }

Klicken Sie abschließend zum Speichern auf Veröffentlichen .

Letzte Worte

Wenn Sie Contact Form 7 zum ersten Mal verwenden, werden Sie möglicherweise feststellen, dass es mit HTML nicht vertraut ist, wenn Sie kein Programmierer sind. Nachdem ich dieses Tutorial gelesen habe, denke ich jedoch, dass alles einfacher geworden ist, oder?

Wenn Sie versuchen möchten, ein Kontaktformular mit einigen anderen Tools zu erstellen, freuen Sie sich auf meinen kommenden Artikel dieser Serie. Welches Plugin möchtest du vorschlagen? Hinterlasse einen Kommentar unter diesem Artikel!