In diesem Beitrag gehen wir zun\u00e4chst darauf ein, warum du Elementor-Formulare erstellen solltest. Dann zeigen wir dir, wie du das machst, und gehen auf einige hilfreiche Addons und Tipps zur Fehlerbehebung ein. Los geht’s!<\/p>\n
Warum Elementor-Formulare erstellen?<\/h2>\n
Es hat viele Vorteile, Formulare f\u00fcr deine WordPress-Webseite zu erstellen<\/a>. Zun\u00e4chst einmal kannst du deinen Besuchern eine schnelle und einfache Methode bieten, mit dir zu kommunizieren. Au\u00dferdem kannst du sie nutzen, um Leads zu generieren und wichtige Informationen von deinem Publikum zu erhalten.<\/p>\n Formulare k\u00f6nnen auch n\u00fctzlich sein, um deine Nutzer\/innen zu registrieren und Zahlungen anzunehmen. Wenn du ein Formular in deine WordPress-Webseite einbauen willst, musst du ein Plugin verwenden<\/a>. Alternativ kannst du auch einen Page Builder wie Elementor verwenden.<\/p>\n Mit Elementor kannst du beeindruckende Formulare erstellen, ohne auch nur eine Zeile Code anzufassen<\/a>. Mit dem Drag-and-Drop-Editor kannst du responsive Formulare erstellen, die zu deinem Branding und der \u00c4sthetik deiner Webseite passen.<\/p>\n Au\u00dferdem kannst du aus mehreren Formulartypen<\/a> w\u00e4hlen, darunter:<\/p>\n Wie du sehen kannst, hat jedes dieser Formulare seinen eigenen Anwendungsfall und kann die Funktionalit\u00e4t deiner Webseite verbessern. Als N\u00e4chstes zeigen wir dir, wie du ein Kontaktformular mit Elementor erstellst.<\/p>\n\n Jetzt, wo wir mehr dar\u00fcber wissen, warum du Elementor-Formulare verwenden solltest, schauen wir uns an, wie du ein solches Formular in ein paar einfachen Schritten erstellen kannst. F\u00fcr diese Anleitung gehen wir davon aus, dass du Elementor bereits auf deiner Webseite installiert und aktiviert hast.<\/p>\n Es gibt ein kostenloses Tool<\/a> und ein kostenpflichtiges Plugin<\/a>. Um die Formularfunktionen nutzen zu k\u00f6nnen, brauchst du die Premium-Version.<\/p>\n Um loszulegen, navigiere zu der Seite oder dem Beitrag, in den du dein Kontaktformular einf\u00fcgen m\u00f6chtest. Klicke dann auf die Schaltfl\u00e4che Mit Elementor bearbeiten<\/strong> am oberen Rand des Bildschirms:<\/p>\n Dadurch wird die Elementor-Editoroberfl\u00e4che ge\u00f6ffnet. Suche unter den Widgets auf der linken Seite nach dem Formular-Widget<\/strong> und w\u00e4hle es aus:<\/p>\n Dann kannst du das Widget per Drag and Drop auf deine Seite ziehen. Dadurch wird ein Standard-Kontaktformular eingef\u00fcgt.<\/p>\n Sobald du dein Kontaktformular auf der Seite platziert hast, gibt es eine Handvoll Einstellungen, die du vornehmen kannst. Konzentrieren wir uns erst einmal auf die Einrichtung der Formularfelder.<\/p>\n Du kannst die grundlegenden Formularfelder bearbeiten, indem du auf das Widget klickst und den Text anpasst (wenn du eine der Standardoptionen \u00e4ndern m\u00f6chtest). Wenn du zus\u00e4tzliche Felder hinzuf\u00fcgen m\u00f6chtest, kannst du das tun, indem du Element hinzuf\u00fcgen<\/strong> w\u00e4hlst:<\/p>\n Du kannst die Art des Feldes, das du hinzuf\u00fcgen m\u00f6chtest, aus der Dropdown-Liste ausw\u00e4hlen. Als N\u00e4chstes kannst du eine Beschriftung hinzuf\u00fcgen, das ist der Name des Formularfeldes. Damit zeigst du deinen Besuchern, welche Eingabe erwartet wird.<\/p>\n Mit der Option Platzhalter<\/strong> kannst du den Text anpassen, der in dem Formularfeld erscheint, bevor der Nutzer seine Daten eingibt. Damit kannst du den Besuchern Beispiele f\u00fcr die Daten geben, die sie eingeben sollen.<\/p>\n Au\u00dferdem kannst du die Einstellung Erforderlich<\/strong> aktivieren und die Spaltenbreite \u00e4ndern. Du kannst auch auf das Feld Schaltfl\u00e4chen <\/strong>klicken, um das Aussehen deiner Formularschaltfl\u00e4chen anzupassen. Du kannst die Gr\u00f6\u00dfe, die Schriftart und die Farben \u00e4ndern.<\/p>\n Nachdem du die Formularfelder erstellt hast, musst du im n\u00e4chsten Schritt die Einstellungen f\u00fcr die Formular\u00fcbermittlung konfigurieren. Du kannst im Elementor-Editor zu E-Mail <\/strong>navigieren, um auf die verschiedenen Optionen zuzugreifen.<\/p>\n Du kannst zum Beispiel deine E-Mail-Adresse in das Feld „An<\/strong>“ eingeben, an die die Beitr\u00e4ge gesendet werden sollen. Du kannst auch mehrere E-Mail-Adressen eingeben, wenn du m\u00f6chtest:<\/p>\n Du kannst auch den Betreff der E-Mail und die Nachricht anpassen. Wenn du alle Optionen eingestellt hast, musst du deine \u00c4nderungen speichern.<\/p>\n Wenn du dein Kontaktformular weiter personalisieren m\u00f6chtest, kannst du benutzerdefinierte Nachrichten aktivieren. W\u00e4hle Zus\u00e4tzliche Optionen<\/strong> und schiebe dann den Kippschalter f\u00fcr Benutzerdefinierte Nachrichten <\/strong>auf Ja<\/strong>:<\/p>\n Es gibt vier Arten von Nachrichten, die du \u00e4ndern kannst:<\/p>\n Du kannst diese Nachrichten so anpassen, dass sie zu deiner Marke und deinem Stil passen. Du kannst zum Beispiel den Wortlaut \u00e4ndern, um deiner Marke etwas Pers\u00f6nlichkeit zu verleihen.<\/p>\n Sobald du dich um den grundlegenden Text und die Felder deines Formulars gek\u00fcmmert hast, kannst du mit der Gestaltung des Designs<\/a> deines Elementor-Kontaktformulars beginnen. Du kannst zum Beispiel daf\u00fcr sorgen, dass es zu deinem Branding passt.<\/p>\n Um damit zu beginnen, kannst du oben im Widget-Editor auf die Registerkarte Stil <\/strong>klicken:<\/p>\n Hier findest du eine Vielzahl von Optionen und Einstellungen, mit denen du das Design deines Kontaktformulars anpassen kannst. Du kannst zum Beispiel den Abstand und die Polsterung anpassen sowie die Farben, die Gr\u00f6\u00dfe, die Beschriftungen und die Schaltfl\u00e4chen \u00e4ndern.<\/p>\n Wenn du mit dem Aussehen und dem Inhalt deines Elementor-Kontaktformulars zufrieden bist, musst du es nur noch speichern und ver\u00f6ffentlichen. Dazu klickst du auf die Schaltfl\u00e4che Ver\u00f6ffentlichen <\/strong>unten links auf dem Bildschirm.<\/p>\n Das war’s schon! Dann kannst du dein Kontaktformular im Frontend in der Vorschau ansehen, um zu \u00fcberpr\u00fcfen, ob es so aussieht, wie du es haben m\u00f6chtest.<\/p>\n Der Elementor Page Builder bietet von Haus aus viele Optionen f\u00fcr die Erstellung von Formularen f\u00fcr deine WordPress-Webseite. Du kannst aber auch Plugins hinzuf\u00fcgen, um die Funktionalit\u00e4t deiner Formulare zu erweitern. Wir werfen einen Blick auf einige Optionen.<\/p>\n Das Master Addons for Elementor<\/a> Plugin ist ein Freemium-Tool, das eine Sammlung hilfreicher Tools zur Verbesserung des Page Builders und damit deiner Webseite bietet. Es umfasst die folgenden Funktionen:<\/p>\n Es ist au\u00dferdem mit einer Vielzahl von Formular-Plugins kompatibel. Dazu geh\u00f6ren Contact Form 7, Ninja Forms, WP Forms und Caldera Forms. Um alle Funktionen des Plugins nutzen zu k\u00f6nnen, musst du die Pro-Version<\/a> kaufen, die f\u00fcr 39 US-Dollar pro Jahr erh\u00e4ltlich ist.<\/p>\n Ein weiteres praktisches Tool, das du mit Elementor nutzen kannst, ist Plus Addons<\/a>. Dieses Plugin enth\u00e4lt \u00fcber 8.000 Anpassungsoptionen und \u00fcber 300 User Interface (UI) Bl\u00f6cke, mit denen du deine Seiten und Formulare ganz einfach erstellen und gestalten kannst.<\/p>\n Zu seinen Funktionen geh\u00f6ren:<\/p>\n Au\u00dferdem gibt es mehr als 18 Vorlagen, aus denen du w\u00e4hlen kannst. Diese wurden speziell f\u00fcr bestimmte Arten von Unternehmen entwickelt, darunter Agenturen, Restaurants, Salons und mehr.<\/p>\n Es ist eine kostenlose Version verf\u00fcgbar. Um jedoch alle n\u00fctzlichen Funktionen nutzen zu k\u00f6nnen, empfehlen wir den Kauf einer Premium-Lizenz<\/a>, die f\u00fcr 39 US-Dollar pro Jahr erh\u00e4ltlich ist.<\/p>\n Wenn du Elementor-Kontaktformulare f\u00fcr deine WordPress-Webseite erstellen m\u00f6chtest, ohne f\u00fcr eine Premium-Lizenz zu bezahlen, gibt es verschiedene M\u00f6glichkeiten, dies zu tun. Dazu musst du den Page Builder mit einem anderen WordPress-Formular-Plugin wie WPForms<\/a> oder Formidable Forms<\/a> kombinieren.<\/p>\n Nehmen wir an, du entscheidest dich f\u00fcr Formidable Forms. Sobald du das Plugin auf deiner Webseite installiert und aktiviert hast, kannst du zu Formidable<\/strong> > Formulare <\/strong>> Neu hinzuf\u00fcgen<\/strong> navigieren:<\/p>\n Als N\u00e4chstes kannst du Kontaktformulare<\/strong> aus der Liste der Optionen ausw\u00e4hlen und aus einer Handvoll vorgefertigter Vorlagen w\u00e4hlen. Wenn du mit der Erstellung deines Formulars fertig bist, rufst du die Seite auf, auf der du es platzieren m\u00f6chtest, und \u00f6ffnest die Elementor-Editoroberfl\u00e4che.<\/p>\n Suche im linken Bereich nach dem Widget Formidable Forms <\/strong>und w\u00e4hle es aus. Du kannst das Format, die Farben, die Schaltfl\u00e4chen, den Text usw. anpassen:<\/p>\n Wenn du fertig bist, kannst du deine \u00c4nderungen speichern und ver\u00f6ffentlichen. Diese Methode erfordert etwas mehr Zeit und Aufwand als das Elementor Pro Plugin. Sie kann dir aber helfen, Geld zu sparen, wenn du keinen Premium-Plan kaufen willst.<\/p>\n Elementor-Kontaktformulare sind ziemlich unkompliziert und einfach zu benutzen. Dennoch kannst du bei der Verwendung auf Probleme sto\u00dfen. Eines der h\u00e4ufigsten Probleme, von denen Leute berichten, sind nicht zugestellte E-Mails.<\/p>\n Elementor verwendet die Funktion wp_mail, um seine E-Mails zu verteilen. Das bedeutet, dass dein Hosting-Anbieter<\/a> die gesendeten E-Mails entgegennimmt und zustellt.<\/p>\n Manche Hosts deaktivieren jedoch die PHP-Funktion, die normalerweise f\u00fcr den Versand von E-Mails verwendet wird, weshalb dieses Problem auftreten kann. Um diesen Fehler zu beheben, empfehlen wir dir, dich mit deinem Hosting-Anbieter in Verbindung zu setzen und ihn zu bitten, die send_mail-Funktion zu aktivieren.<\/p>\n Alternativ kannst du auch einen SMTP-Server (Simple Mail Transfer Protocol) verwenden. Das ist ein E-Mail-Server<\/a>, der deine E-Mails in Formularen an den Posteingang deiner Kunden weiterleitet, indem er eine externe Quelle wie Gmail nutzt. Das kann die Wahrscheinlichkeit verringern, dass deine E-Mails in Spam-Ordnern landen. Um SMTP einzurichten, kannst du ein Plugin wie WP MAIL SMTP<\/a> verwenden.<\/p>\n\n Formulare spielen auf Webseiten eine zentrale Rolle. Sie erm\u00f6glichen es Kunden, mit dir in Kontakt zu treten, sich f\u00fcr ein Konto zu registrieren, Zahlungsinformationen zu \u00fcbermitteln und vieles mehr. Es kann jedoch eine Herausforderung sein, \u00e4sthetisch ansprechende Formulare f\u00fcr deine Webseite zu entwerfen. Zum Gl\u00fcck ist das mit Elementor ganz einfach.<\/p>\n Sobald du das Elementor-Formular-Widget zu deiner Seite hinzuf\u00fcgst, kannst du deine Felder einrichten und die Formulareinstellungen konfigurieren. Du kannst auch das Design deines Formulars anpassen, damit es mit deinem Branding \u00fcbereinstimmt.<\/p>\n Hast du noch Fragen zur Erstellung von Elementor-Formularen in WordPress? Lass es uns im Kommentarbereich unten wissen!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":" Wenn du eine Unternehmenswebseite betreibst, sind Formulare unentbehrlich. Sie erleichtern es den Kunden, mit dir in Kontakt zu treten und dir wichtige Informationen und Feedback zu …<\/p>\n","protected":false},"author":117,"featured_media":49523,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[434,681],"topic":[999],"class_list":["post-49353","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-elementor","tag-forms","topic-wordpress-entwicklung"],"yoast_head":"\n\n
Wie man ein Elementor-Kontaktformular in WordPress erstellt (in 6 Schritten)<\/h2>\n
Schritt 1: F\u00fcge das Elementor Kontakt-Widget hinzu<\/h3>\n
![\"Klick](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/edit-with-elementor.png\")
![\"Ziehe](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-form-widget.jpg\")
Schritt 2: Richte die Felder deines Kontaktformulars ein<\/h3>\n
![\"Passe](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/add-item.jpg\")
Schritt 3: Konfiguriere deine Formular-Eingaben<\/h3>\n
![\"Konfiguriere](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/email-settings-elementor.png\")
Schritt 4: Anpassungen der Kontaktformulardaten<\/h3>\n
![\"Benutzerdefinierte](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/form-messages.png\")
\n
Schritt 5: Gestaltung deines Elementor-Kontaktformulars<\/h3>\n
![\"Gestalte](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-form-style.jpg\")
Schritt 6: Speichere und ver\u00f6ffentliche dein Formular<\/h3>\n
Die besten Addons f\u00fcr Elementor-Formulare<\/h2>\n
Master Addons f\u00fcr Elementor<\/h3>\n
![\"Master](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/master-addons.png\")
\n
Die Plus Addons<\/h3>\n
![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/plus-addons.png\")
\n
Zus\u00e4tzliche Tipps und Tricks f\u00fcr die Erstellung von Elementor-Formularen<\/h2>\n
![\"Hinzuf\u00fcgen](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/add-new-form.png\")
![\"Ausw\u00e4hlen](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/formidable-forms-elementor.jpg\")
Fehlersuche bei Elementor-Formularen<\/h2>\n
Zusammenfassung<\/h2>\n