Kontaktformular mit Elementor erstellen (in 2 Minuten)

Kontaktformular mit Elementor erstellen

Mit dem WordPress-Plugin Elementor Pro lassen sich schnell und einfach Formulare erstellen, bspw. fĂŒr Newsletter oder die Kontaktseite.

In diesem Tutorial soll es um die Erstellung eines Kontaktformulares gehen.

Vorteile des Elementor-Formulars

Verbesserungspotential des Elementor-Formulars

Erstellung eines einfachen Kontaktformulars

Die Erstellung eines einfachen Kontaktformulars ist denkbar einfach und innerhalb von zwei Minuten erledigt. Ich beschreibe nur die notwendigsten Einstellungen. Die Funktionen sind eigentlich recht selbsterklĂ€rend, so dass durch „Durchklicken“ der einzelnen MenĂŒpunkte auch noch weitere Einstellungsmöglichkeiten zum Vorschein kommen, die man nach Belieben anpassen kann.

Solltest du spezielle WĂŒnsche haben, nutze das Kontaktformular und ich schaue, wie ich dir helfen kann.

Widget "Formular" auswÀhlen und in den Bearbeitungsbereich ziehen

Suche in der ElementeĂŒbersicht nach „Formular“ und ziehe es in den Bearbeitungsbereich.

Elementor - Formular-Widget

Datenschutz-Feld hinzufĂŒgen

Fast fertig. Es wird dir jetzt folgendes Formular angezeigt:

Elementor Kontaktfomular unfertig

Hier fehlt natĂŒrlich noch das Feld fĂŒr den Datenschutz. Klicke in der Seitenleiste auf „Element hinzufĂŒgen“:

WĂ€hle als Typ „Akzeptanz“ aus und hinterlege, dass es sich um ein Pflichtfeld handelt:

Im Feld „Text fĂŒr Akzeptanz“ kannst du folgendes hinterlegen (hier aber noch den Link zu deiner DatenschutzerklĂ€rung anpassen):

Ich erklĂ€re mich damit einverstanden, dass meine Daten zur Bearbeitung meines Anliegens verwendet werden. (Weitere Informationen und Widerrufshinweise findest du in der <a href=“https://www.hier_link_einfĂŒgen“>DatenschutzerklĂ€rung</a>)

Anschließend ist dein Kontakformular fertig und sollte in etwa so aussehen:

Elementor - Kontaktformulat - fertig

Einstellungen prĂŒfen

Zum Schluss solltest du noch folgende Punkte prĂŒfen:

ZusÀtzliche Funktion: Multi-Step

FĂŒr den Fall, dass du mit vielen Feldern arbeitest, kannst du die Eingabe durch die BesucherIn auf mehrere Schritte verteilen. Wie du im Beispiel siehst, sind erstmal nur die Felder „Name“ und „E-Mail“ ersichtlich. Mit Klick auf dem Button „NĂ€chster“ werden die weiteren Felder „Nachricht“, „Datenschutz“ und der „Senden“-Button angezeigt:

Multi-Step hinzufĂŒgen

Klicke wieder auf den Button „Element hinzufĂŒgen“ und wĂ€hle anschließend den Typ „Step“ aus:

Klicke auf „Item #6“, halte die Maus gedrĂŒckt und ziehe das Feld ĂŒber das Feld „Nachricht“:

Elementor - Step 2

Das war es auch schon. Mit einem Klick auf den MenĂŒpunkt „SchaltflĂ€chen“ kannst du die Bezeichnung „NĂ€chster“ und „Voriger“ noch anpassen (bspw. auf „Weiter“ und „ZurĂŒck“).

Ich wĂŒnsche dir viel Spaß und Erfolg beim Einrichten.

Schreibe einen Kommentar

Abonnieren
Benachrichtige mich bei
0 Kommentare
Inline Feedbacks
View all comments

Die mit Sternchen (*) gekennzeichneten Verweise sind sogenannte Provision-Links. Wenn du auf so einen Verweislink klickst und ĂŒber diesen Link einkaufst, bekomme ich von deinem Einkauf eine Provision. FĂŒr dich verĂ€ndert sich der Preis nicht. 

0
Hast du Fragen? Dann schreibe einen Kommentar ;-)x
()
x
Newsletter abonnieren

Erhalte regelmĂ€ĂŸig Informationen zu neuen Tipps und Tutorials.