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.