Kontaktformular in Elementor anlegen für Anfragen – Schritt-für-Schritt-Anleitung

Logo Chrissi Wagner Technik Managerin

Oder auch: Kaltakquise-Bros hassen diesen Trick! 😮‍💨

Weißt du, was meiner Meinung nach der wichtigste Bestandteil auf einer Website von Selbstständigen sein sollte? 

Das Kontaktformular.

Ich finde, auf jede professionelle Business-Website gehört ein Kontaktformular. 

Und doch stolpere ich zwischendurch auf Webseiten von Solo-Selbstständigen, auf denen es keins gibt.

Ist mir vor Kurzem wieder passiert, als ich auf der Suche nach einer Business-Fotografin war. Eine halbe Stunde googlen, ca. 15 verschiedene Fotografinnen genauer anschauen – und zwei davon ohne Kontaktformular finden. Das sind 13,3 %! 

(Eine hatte nicht einmal eine Über mich Seite – sorry, neeeext!)

Ich weiß nicht, wie’s dir geht, aber mich müsste ein Angebot so dermaßen ansprechen, dass ich sofort aufgeregtes Herzklopfen bekomme – dann würde ich mich ohne eine Anfrage übers Kontaktformular bei der Person melden. 

Meist klicke ich die Seite aber einfach wieder weg.

Damit du dir das mit deinen InteressentInnen nicht auch passiert, zeige ich dir in diesem Beitrag, wie du ein Kontaktformular bei WordPress kostenlos einrichten kannst.

Über das Inhaltsverzeichnis kommst du sofort zur Schritt-für-Schritt-Anleitung. 👇🏻

Falls es noch ein bisschen Überzeugungsarbeit braucht… Warum solltest du ein Kontaktformular mit WordPress erstellen?

Schnapp sie dir, wenn sie noch heiß sind…

Deine BesucherInnen können dir genau in dem Moment schreiben, wo sie interessiert sind.

Du kennst es vielleicht selbst: Wenn dich ein Angebot interessiert, du „heiß drauf“ bist und am liebsten sofort buchen würdest, weil das genau dein Problem lösen würde und die Person sympathisch wirkt… Dann überlegst du nicht lange, sondern schickst direkt eine Anfrage. 

Am schnellsten geht das nun mal übers Kontaktformular. 🤷🏻‍♀️

Ein Kontaktformular auf der Website ist niederschwellig

Auch wenn’s nach nicht viel Aufwand klingt, eine E-Mail zu schreiben: Du musst erst in dein E-Mail-Programm wechseln, ggfs. nach dem Login suchen, eine neue Mail anlegen, … ah, Mist, und die E-Mailadresse der Empfängerin musst du auch noch aus deren Website heraussuchen…

Disctracted Boyfriend Meme: Kontaktformular
disctracted boyfriend meme: Kontaktformular > E-Mail 😄

Ein gutes Kontaktformular gibt dir ein Feld für alle wichtigen Infos vor und du kannst sofort lostippen.

Ein guter Kontaktformular Aufbau schafft Struktur

Mit einem Kontaktformular gibst du deine Anfrage-Struktur vor (sofern das zu deinen Angeboten passt oder für deinen Arbeitsprozess notwendig und praktikabel ist). 

Durch gezielte Felder steuerst du, welche Infos du von deinem Gegenüber brauchst – z. B. 

  • Projektart („Wobei genau brauchst du Unterstützung?“), 
  • Zeitrahmen („Wann soll XYZ umgesetzt werden?“), 
  • gewünschte Kontaktaufnahme („Wie darf ich dich kontaktieren?“),
  • vorhandenes Budget („Die Kosten betragen ca. 1.500 € netto. Liegt das in deinem Budget?“) 

Spart dir später zig Rückfragen und hilft auch der Person, die dich gerade für ein Projekt anfragt, sich selbst und die eigenen Wünsche und Erwartungen besser zu strukturieren.

In Elementor kannst du all diese Einstellungen machen. Wie, sehen wir uns gleich an! ✌🏻

Ein Kontaktformular ist datenschutzfreundlicher

Wenn du dein Kontaktformular richtig aufsetzt (mit Checkbox für die Datenschutzerklärung; wie das geht, zeige ich dir gleich!), bist du rechtlich auf der sicheren Seite – im Gegensatz zur reinen E-Mailadresse. 

Meiner Erfahrung nach schätzen das viele Menschen.

Es ist halt einfach cool, persönliche Nachrichten zu erhalten 😁

Auch, wenn noch keine fixe Buchung/Zahlung zustande kam: Die Freude über eine neue Anfrage teilen wir Online-UnternehmerInnen doch alle, oder? 😊

Was braucht es nun, um ein professionelles Kontaktformular mit WordPress erstellen zu können?

Welches Tool für’s Kontaktformular? Elementor? DIVI? Oder doch ein Plugin?

Du ahnst es: Mein To Go Pagebuilder Elementor hat vorgesorgt und die Formular-Funktion schon integriert. 

Du nutzt eh WordPress.org für deine Website und den Elementor Pagebuilder? Perfekt!

Falls du Elementor bislang nicht verwendest, kein Problem! Du kannst dir das Plugin einfach downloaden, es aktivieren und anhand meiner Anleitung weitermachen.

Für ein normales Kontaktformular – also eins, über das dich Interessentinnen und Interessenten anfragen können und du per Mail über eine neue Anfrage benachrichtigt wirst – reicht die kostenfreie Version von Elementor. Du brauchst nicht Elementor Pro. Damit ist dein WordPress-Kontaktformular kostenlos (wär ja noch schöner!).

Tutorial: Kontaktformular erstellen mit WordPress und Elementor

Das Ganze ist in max. 30 Minuten umgesetzt. 💚

Du magst Videoanleitungen lieber? Dann zeige ich dir hier Step by Step, wie du ein Kontaktformular mit WordPress erstellen kannst.

Klicke auf „Inhalt entsperren“, um das Video anzuzeigen.

Sie sehen gerade einen Platzhalterinhalt von Standard. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf den Button unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Weitere Informationen

Übrigens, das ist eins meiner ersten Anleitungsvideos im Blog. Ich möchte zukünftig öfter solche Video-Tutorials posten für diejenigen, die nicht so gerne lesen. Das Ganze soll unkompliziert bleiben, also ohne fancy Effekte und 1A Qualität, sondern einfach ein Screenvideo, das dich ohne viel Gelaber durch den Prozess führt

Wenn du dir das Video angeschaut hast: Wie hat es dir gefallen? Fandest du es hilfreich und verständlich? Ich freue mich über dein Feedback per Kommentar! 🥰

Hier die Anleitung zum Lesen:

1️⃣ Öffne deine Kontakt-Seite in Elementor und füge das Formular-Element in einen neuen Container ein.

Formular Widget in Elementor und Elementor Pro
So sieht das Formular Widget in Elementor aus

2️⃣ Jetzt hast du den Formular-Rohling vor dir – und den bearbeiten wir gemeinsam!

Klicke zuerst in der Seitenleiste links auf „Inhalt“ → „Formularfelder“. Hier sind die Felder für Name, E-Mail und Nachricht hinterlegt. 

Wenn du das jeweilige Element anklickst, kommst du zu den Feld-Einstellungen.

Formularfelder bearbeiten in Elementor
Formular-Feld-Einstellungen

Das bedeuten sie:

👉🏻 Feldnamen anzeigen: Hier kannst du die Bezeichnung des jew. Feldes reinschreiben. Er erscheint dann direkt über den Feld.

👉🏻 Platzhalter: Quasi dasselbe wie der Feldname, nur erscheint der Text hier direkt im Formularfeld.

👉🏻 Pflichtfeld: Wenn du den Schalter auf „AN“ setzt, schaffst du ein Pflichtfeld. Solange das nicht ausgefüllt ist, kann das Formular nicht abgeschickt werden.

Die E-Mailadresse ist standardmäßig ein Pflichtfeld

Bei allen anderen Feldern kannst du auf die Einstellung verzichten.

👉🏻 Spaltenbreite: 100% ist der Standard; damit geht das Feld über die gesamte Breite. Du kannst aber auch andere Werte einstellen und so z. B. zwei Felder nebeneinander anordnen.

Elementor Plugin Kontaktformular: 2 Felder nebeneinander setzen
2 Formularfelder mit je 50% Spaltenbreite nebeneinander

👉🏻 Typ: Hier kannst du den Formulartyp auswählen. 

👉🏻 Typ „Text“ ist die Standardeinstellung und gilt für alle Felder, in die Text geschrieben werden soll.

Einige besonders praktische „Typen“ möchte ich dir gern vorstellen:

  • Auswahlliste: via Dropdown verschiedene Optionen auswählen
  • Auswahlbox: für die Auswahl verschiedener Optionen via Checkbox/Häkchen
  • Datei hochladen: eine oder mehrere Dateien (z. B. Bilder) hochladen und per Kontaktformular übermitteln
  • Akzeptanz: für ein Datenschutz-Feld mit Checkbox/Häkchen

Klick dich hier am besten einmal durch und schau dir die einzelnen Möglichkeiten an.

Hast du alle Einstellungen vorgenommen, geht’s weiter in den Abschnitt „Schaltflächen„.

3️⃣ Mit „Schaltfläche“ ist der Senden-Button gemeint. Du kannst

  • die Button-Größe und -Breite ändern
  • den Button-Text anpassen (das mache ich meistens; im Screenshot gelb markiert)
  • ggfs. ein Icon in den Button einfügen

Im Grunde musst du hier aber gar nichts einstellen, sondern kannst zum nächsten Abschnitt weitergehen.

4️⃣ Die „Aktion nach dem Versenden“ ist wichtig. Damit sagen wir dem Formular, dass es dir die eingegebene Nachricht per E-Mail zuschicken soll.

Dafür stellst du „E-Mail“ ein. Normalerweise ist das voreingestellt.

Falls du Elementor Pro verwendest, wird dir die zusätzliche Aktion „Collect Submissions“ angezeigt (wie im Screenshot). Das ist ein Service von Elementor, der alle Nachrichten im Dashboard unter „Elementor“ → „Submissions“ für dich speichert. Praktisch, falls dein Kontaktformular mal buggt 😆

5️⃣ Weiter geht’s mit den „E-Mail“ Einstellungen. Pass hier gut auf, denn ich sehe oft, dass falsche Einstellungen vorgenommen werden und das Kontaktformular dann nicht richtig funktioniert. 😌

Die Felder mit einem ⭐ Stern-Emoji vorne dran musst du manuell anpassen.

⭐ An: Hier kommt deine Empfänger-E-Mailadresse rein. Idealerweise ist das eine Domain-E-Mail, also z. B. wie bei mir hello@chrissi-wagner.de

Betreff: Die Betreffzeile der Kontaktformular-Nachricht. Kannst du ändern, musst du aber nicht.

Nachricht: Hier lässt du am besten die Voreinstellung [all-fields] drin. Elementor übermittelt so alle eingegebenen Daten/Texte an dich.

Von E-Mail: Achtung: Hier muss seit Anfang 2025 zwingend eine E-Mailadresse rein, die Bezug auf deine Website-Domain hat. Während du oben im Feld „An“ auch z.B. eine GMX- oder t-online-Adresse angeben kannst, brauchen wir hier den Bezug zu deiner Domain. 

Falls du keine Domain-E-Mail hast oder nicht angeben möchtest, no worries: Du kannst hier einfach eine „Fake“-E-Mail eintragen. Bei mir steht bspw. mail@chrissi-wagner.de drin, obwohl es diese E-Mailadresse gar nicht gibt. 

Es geht nur darum, dass Elementor im Hintergrund eine Verbindung zu deiner Domain herstellen kann.

⭐ Von Name: Hier ist nicht dein Name gemeint, sondern der Name der Person, die dein Formular ausgefüllt hat. 
Den einzufügenden Shortcode findest du ganz oben im Abschnitt „Formularfelder“ → Namens-Feld anklicken ErweitertShortcode kopieren.

Shortcode finden
In diesem Beispiel lautet der Shortcode für den Feldnamen [field id=“name“]

Diesen Shortcode fügst du ins Feld „Von Name“ ein.

Antwort an: Hier stellst du „E-Mail-Field“ ein, damit du per Mail auf die Kontaktanfrage der anderen Person antworten kannst.

6️⃣ Steps Settings kannst du überspringen.

7️⃣ Unter „Weitere Optionen“ kannst du einstellen, dass „Eigene Nachrichten“ angezeigt werden, wenn man das Formular ausfüllt. Stelle dafür den Schalter einfach auf AN und passe bei Bedarf die vorgefertigten Texte an.

Eigene Nachrichten einstellen
Eigene Nachrichten einstellen

Klicke jetzt noch rechts oben auf „Veröffentlichen“, bzw. „Aktualisieren“… und du bist fertig! 

8️⃣ Ich empfehle dir, dein Kontaktformular jetzt noch zu testen – es soll ja schließlich funktionieren. 😊

Rufe dafür deine fertige Kontakt-Seite in einem Inkognitofenster auf, füll die Felder aus und schicke das Formular ab.

Deine Test-Anfrage sollte jetzt in deinem Posteingang landen. 

Wenn du Elementor Pro nutzt, erscheint die Anfrage außerdem nach wenigen Minuten unter „Submissions“.

War gar nicht so schwer, oder? Am Anfang schrecken die vielen Einstellungen ab, aber wenn du dich Stück für Stück durcharbeitest, hast du in etwa 30 Minuten dein Elementor Kontaktformular eingerichtet. 💌

Elementor WordPress Support Mockup

Technik-Schweiß auf der Stirn, nur weil du 'nen Button verschieben willst?

Gib mir das kurz rüber – ich übernehme die Änderungen für dich und du kannst dich zurücklehnen und freuen. 🃏

Kontaktformular Aufbau: Was braucht’s, was nicht?

Wenn du dir beim Aufbau deines Kontaktformulars schon denkst: „Puh, ist das viel auszufüllen“, werden das auch etwaige InteressentInnen tun. Wir wollen das Kontaktformular also so niederschwellig wie möglich halten.

Solltest du in deinem Elementor Kontaktformular Vorname und Nachname abfragen?

  • Ja, wenn du eher im B2B-Bereich unterwegs bist und deine KundInnen siezt.
  • Nein / nicht unbedingt, wenn du deine Zielgruppe sonst auch duzt und eher mit PrivatkundInnen zu tun hast.

Die E-Mailadresse sollte immer ein Pflichtfeld sein. Klar, denn die brauchst du, um auf die Anfrage zu antworten.

Sofern du mit deinen Kundinnen sonst z.B. auch per Telefon kommunizierst, macht ein Feld für die Telefonnummer Sinn.

Agenturen fragen oft ab, wie man kontaktiert werden möchte – das kannst du prima mit einer Checkbox lösen und die einzelnen Kontaktmöglichkeiten auflisten.

Ich persönlich schwöre drauf, mit einem Dropdown oder einer Checkbox-Auswahlliste abzufragen, wobei Unterstützung benötigt wird. So sehe ich auf einen Blick, worum es in der Anfrage geht.

Alles andere kann, nichts muss. Am Ende zählt für den Aufbau deiner Kontaktformularfelder: So viel wie nötig, so wenig wie möglich.

So machst du dein Elementor Kontaktformular DSGVO konform

… Mit der oben angesprochenen Checkbox für die Datenschutzerklärung

Stand heute ist es für Kontaktformulare nicht verpflichtend, diese Checkbox einzufügen. Quelle: eRecht24.

Ich persönlich finde, sie tut nicht weh und ist schnell eingebaut, deshalb machen wir das mit 😌

Anleitung: In 3 Schritten eine DSGVO-Checkbox einfügen

1️ Füge ein neues Feld in deinem Formular über „Element hinzufügen“ ein.

Neues Formularfeld hinzufügen - Elementor Kontaktformular
Neues Formularfeld hinzufügen

2️⃣ Stelle als Typ „Akzeptanz“ ein.

WordPress: Elementor Kontaktformular DSGVO Checkbox einfügen
Akzeptanz-Feld

In deinem Kontaktformular ist jetzt eine kleine Checkbox aufgetaucht.

3️⃣ Im Feld „Text für die Akzeptanz“, füge folgenden Text ein und verlinke das Wort „Datenschutzerklärung“ zu deiner Datenschutz-Seite. 

“Mit Absenden dieses Formulars akzeptiere ich die Verwendung und Speicherung meiner persönlichen Daten gemäß der <a href=“https://deinewebsite.de/datenschutz“ target=“blank“>Datenschutzerklärung</a>.”

Wichtig: Da im Feld keine Links abgebildet werden, gehen wir den Weg über HTML-Code. Du musst lediglich https://deinewebsite.de/datenschutz mit dem tatsächlichen Link zu deiner Datenschutz-Seite ersetzen. Der Rest darf so bleiben.

Du kannst den übrigen Text natürlich umformulieren, sodass er besser zu deiner Zielgruppenansprache passt.

DSGVO und Pflichtfelder

Immer wieder sehe ich bei Selbstständigen, dass sie in ihrem Anfrage-Kontaktformular alle Felder als Pflichtangaben deklarieren (also mit *). 

Das ist nach aktuellem Stand eine Grauzone, weshalb ich dir davon abrate, weitere Felder außer der E-Mailadresse und evtl. dem Namen als Pflichtfeld zu markieren.

Tipp: Spam-Nachrichten vorbeugen: Braucht mein Elementor Kontaktformular ein Captcha?

Nope! 

Seien wir ehrlich: Captcha nervt uns doch alle – selbst ich brauche regelmäßig mehrere Anläufe, um alle Ampeln, Motorräder oder Brücken zu identifizieren. Es nervt. 

Stattdessen kannst du ein Anti-Spam-Plugin wie WP Armour nutzen. Einfach installieren, aktivieren, fertig

Es blockt Spam-Nachrichten übers Kontaktformular (und in deinen Blog-Kommentaren, sofern du die Kommentarfunktion aktiviert hast) und ist so „leicht“, dass es WordPress nicht verlangsamt.

Viel Erfolg bei der Umsetzung! 💚

PS: Falls du dir weitere solcher Anleitungen – in Text- und/oder Videoform wünscht, lass mich wissen, zu welchem Thema. Gerne auch übers Kontaktformular 😁

📌 Das hat dir geholfen? Dann pinne doch eine dieser Grafiken bei Pinterest!


Chrissi Wagner hat nach einigen Jahren als virtuelle Assistentin mit zu vielen Angeboten „ihr Ding“ gefunden: Online Business Technik! Als Technik-Joker 🃏 nimmt sie ihren Kund*innen technische Setups, Automatisierungen und Website-Pflege ab – und gibt eine hervorragende Kundenservice-Fee ab.
Privat findet man sie in den Bergen Oberbayerns beim Wandern ⛰ oder Anime schauend –  zuhause oder in Tokyo, Japan 🍙!

So kannst du mit mir arbeiten

👩🏻‍🔧 Done for you: WordPress- und Elementor-Support, ActiveCampaign-Hilfe

👩🏻‍🎓 Done with you: Customer Care, Technik-Ausbildung für Virtuelle Assistent*innen (coming soon)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Mehr Lesestoff