ASTRA - WORDPRESS - ELEMENTOR
Ihre eigene Website erstellen von A-Z
  • Website planen
  • WORDPRESS
  • Elementor
  • ASTRA
  • astra - One-Page-Website
  • LANDINGPAGE
  • Homepage-Tools
  • RISTORANTE
  • STARTSEITE
  • KI
  • ASTRA Grund-Einstellungen
  • Header & Footer Onepage
  • KONTAKTFORMULAR

Suche

Beiträge ASTRA-CUSTOMIZER

  • 01 WordPress installieren
  • 02 Theme ASTRA installieren + aktivieren
  • 03 Elementor installieren
  • 04 WPForms Formular-Plugin
  • 05 ASTRA konfigurieren (Customizer)
  • 06 Customizer - Global - Container-Layout
  • 07 Customizer - Global - Farben
  • 08 Customizer - Global - Schriften Typografie
  • 09 Customizer - Global - Buttons
  • 09 Customizer - Global - Buttons (2)
  • 10 Elementor - Installieren
  • 11 Elementor - Farben Astra nutzen? JA-NEIN
  • 12 Elementor - Globale Farben
  • OnePage
  1. astra - One-Page-Website
  2. OnePage1
  3. Kontaktformular 2

Einführung in WPForms Lite

WPForms Lite ist ein benutzerfreundlicher Drag-and-Drop Formular-Builder für WordPress, der es Ihnen ermöglicht, schnell und einfach Kontaktformulare zu erstellen. Hier sind einige wichtige Punkte, auf die Sie bei der Erstellung eines Kontaktformulars achten sollten:

1. Benutzerfreundlichkeit

Achten Sie darauf, dass das Formular einfach zu bedienen ist. WPForms bietet eine intuitive Benutzeroberfläche, die es auch Anfängern ermöglicht, ohne Programmierkenntnisse Kontaktformulare zu erstellen.

2. Wichtige Felder

Überlegen Sie, welche Informationen Sie von den Nutzern benötigen. Typische Felder sind Name, E-Mail-Adresse, Betreff und Nachricht. Sie können auch benutzerdefinierte Felder hinzufügen, um spezifische Informationen zu sammeln.

3. Design und Layout

Das Design des Formulars sollte zu Ihrer Website passen. WPForms ermöglicht es Ihnen, das Layout und die Farben anzupassen, um ein einheitliches Erscheinungsbild zu gewährleisten.

4. Spam-Schutz

Implementieren Sie einen Spam-Schutz, um unerwünschte Nachrichten zu vermeiden. WPForms bietet Optionen wie reCAPTCHA, um sicherzustellen, dass nur echte Benutzer das Formular ausfüllen.

5. Bestätigungsnachricht

Fügen Sie eine Bestätigungsnachricht hinzu, die den Nutzern nach dem Absenden des Formulars angezeigt wird. Dies gibt ihnen das Gefühl, dass ihre Nachricht erfolgreich gesendet wurde.

6. Testen des Formulars

Bevor Sie das Formular live schalten, testen Sie es gründlich. Überprüfen Sie, ob alle Felder korrekt funktionieren und ob die eingehenden Nachrichten an die richtige E-Mail-Adresse gesendet werden.

Schritt-für-Schritt-Anleitung zur
Erstellung eines Kontaktformulars mit WPForms Lite

Hier erfahren Sie, wie Sie ein einfaches Kontaktformular mit WPForms Lite erstellen können. Diese Anleitung führt Sie durch die einzelnen Schritte, um ein Formular mit zwei Feldern nebeneinander, wie Vorname und Nachname, zu erstellen.


 


Schritt 1: WPForms Lite installieren

  1. Melden Sie sich in Ihrem WordPress-Dashboard an.
  2. Gehen Sie zu „Plugins“ und klicken Sie auf „Installieren“.
  3. Suchen Sie nach „

    WPForms Lite“ und klicken Sie auf „Jetzt installieren“.

    Kontaktformular 01
  4. Aktivieren Sie das Plugin nach der Installation.

 


Schritt 2: Ein neues Formular erstellen

  1. Gehen Sie im Dashboard zu „WPForms“ und klicken Sie auf „Neues Formular hinzufügen“.
    Kontaktformular 28
  2. Template Leeres Formular
    Kontaktformular 29
    Wählen Sie die Vorlage: Leeres Formular

  3. Geben Sie Ihrem Formular einen Namen, z.B. „Kontaktformular“.
    Kontaktformular 30

  4. Wählen Sie die Vorlage leeres Formular.

 


Schritt 3: Felder hinzufügen

  1. Vorname und Nachname nebeneinander:
    1. Ziehen Sie das Feld Name in den rechten Bereich
      Kontaktformular 31
      Name und Nachname stehen nebeneinander

 


3a - Feld Name einfügen

Name als einzeiliges Feld (über die gesamte Breite)
Ziehe das Feld 'Einzeiliger Text' nach rechts, Bereich: Allgemein, klicke in das Feld, gebe dem Feld einen Namen und markiere es als Pflichtfeld
Kontaktformular 32
Bereich Erweitert (Feld auf der gesamten Breite)
Kontaktformular 33


 

 


3b - Feld Firmenname

Feld Firmenname eintragen

Ziehe das Feld 'Einzeiliger Text' nach rechts, Bereich: Allgemein, klicke in das Feld,
gebe dem Feld einen Dein Unternehmen und markiere es nicht als Pflichtfeld
Kontaktformular 34
Auch unter Erweitert auf groß



3c - Feld E-Mail Adresse

E-Mail Adresse hinzufügen (auch unter "Erweitert" auf groß)

Kontaktformular 35



3d - Feld Deine Website

Deine Website (Einzeiliges Feld) (auch unter "Erweitert" auf groß) PFLICHTFELD

Kontaktformular 36



3e - Abfrage, welches Angebot erstellen

Abfrage, an welchem Angebot besteht Interesse (Feld Mehrfachauswahl)

Allgemein

Kontaktformular 37

Erweitert (wie viele Spalten?)

Kontaktformular 38


 


3f - Dropdown-Feld - Auswahl welches Budget

DropDown Feld - Auswahl, welches mögliche Budget

Kontaktformular 39


 


3g - Nachrichtenfeld (Textabsatz) einfügen (Pflichtfeld)

Kontaktformular 40


 


3h - Name und Firmenname nebeneinander

Erweitert: Dein Name  Dein Layout auswählen, 2 Spalten, klicke in die linke Spalte Dein Name, dann Firmenname  in recnte Spalte

Kontaktformular 41


 


3i - Extra Felder für E-Mail und Deine Website (wie oben, auch erweitert)

Kontaktformular 42

In der Ansicht ändert sich zunächst nichts, jedoch in der Endansicht. Theoretisch können Sie auch Namen wählen aus Vor- und Nachnamen die entsprechenden einzelnen Felder generieren.

Kontaktformular 43 


 


Schritt 4a: Bestätigungsnachricht

  1. Bestätigungsnachricht: Gehen Sie zu den Einstellungen und fügen Sie eine Bestätigungsnachricht hinzu, die den Nutzern nach dem Absenden des Formulars angezeigt wird.
    Text zum Beispiel: 
    „Vielen Dank für Ihre Nachricht! Wir haben Ihre Anfrage erhalten
    und werden uns so schnell wie möglich bei Ihnen melden.“

 


Schritt 4b Spam-Schutz

Spam-Schutz: Aktivieren Sie reCAPTCHA oder eine andere Spam-Schutz-Methode, um unerwünschte Nachrichten zu vermeiden.

  1. Google reCAPTCHA registrieren:
    • Besuchen Sie die Google reCAPTCHA-Website.
    • Melden Sie sich mit Ihrem Google-Konto an.
    • Klicken Sie auf „Admin-Konsole“ und registrieren Sie Ihre Website, indem Sie einen Namen eingeben und den Typ von reCAPTCHA auswählen (z. B. reCAPTCHA v2).
    • Geben Sie die Domain Ihrer Website ein und akzeptieren Sie die Nutzungsbedingungen.
    • Klicken Sie auf „Registrieren“. Sie erhalten einen Site-Schlüssel und einen Secret-Schlüssel.

  2. reCAPTCHA in WPForms aktivieren:
    • Gehen Sie in Ihrem WordPress-Dashboard zu WPForms > Einstellungen.
    • Klicken Sie auf den Tab reCAPTCHA.
    • Wählen Sie die Version von reCAPTCHA, die Sie verwenden möchten (z. B. reCAPTCHA v2).
    • Geben Sie den Site-Schlüssel und den Secret-Schlüssel ein, die Sie zuvor erhalten haben.
    • Klicken Sie auf Änderungen speichern.

  3. reCAPTCHA zu Ihrem Formular hinzufügen:
    • Gehen Sie zu WPForms und wählen Sie das Formular aus, das Sie bearbeiten möchten.
    • Ziehen Sie das reCAPTCHA-Feld aus der linken Seitenleiste in Ihr Formular.
    • Passen Sie die Einstellungen nach Bedarf an.

  4. Formular speichern und testen:
    • Speichern Sie Ihr Formular und testen Sie es auf Ihrer Website, um sicherzustellen, dass reCAPTCHA korrekt funktioniert.

Durch die Aktivierung von reCAPTCHA schützen Sie Ihr Kontaktformular effektiv vor Spam und unerwünschten Nachrichten.

 


 


Schritt 5: Formular speichern und einfügen

  1. Klicken Sie auf „Speichern“, um Ihr Formular zu sichern.
  2. Um das Formular auf Ihrer Website anzuzeigen, kopieren Sie den Shortcode, der Ihnen angezeigt wird.
    [wpforms id="16" title="false"]
  3. Fügen Sie den Shortcode in den gewünschten Beitrag oder die Seite ein, wo das Formular erscheinen soll.