So gestalten und passen Sie das Elementor-Kontaktformular an

how_to_style_and_customize_elementor_contact_form_banner_image

Mit Elementor ist das Erstellen von Kontaktformularen jetzt einfacher als je zuvor. Sie müssen lediglich einige Widgets per Drag-and-Drop verschieben, die Einstellungen entsprechend Ihren Anforderungen anpassen und schon sind Sie fertig.

Das effektive Anpassen oder Gestalten eines Elementor-Kontaktformulars kann jedoch das Aussehen Ihrer Kontaktformulare erheblich verändern. Ein einfaches und leicht verständliches Kontaktformular wird immer mehr Antworten erhalten als unklare und unübersichtliche. Deshalb ist das benutzerdefinierte Elementor-Formular so wichtig.

Sie können Elementor einfach erstellen, formatieren und anpassen. In diesem Artikel erfahren Sie jedoch, wie Sie ein Elementor-Kontaktformular mit dem MetForm-Formular-Builder anpassen.

Warum sollten Sie ein Elementor-Kontaktformular verwenden?

Erhöhen Sie die Conversion-Rate
Wenn ein Benutzer eine Möglichkeit findet, mit Ihnen in Kontakt zu bleiben und relevante Fragen zu den von Ihnen angebotenen Produkten oder Dienstleistungen zu stellen, erhöht sich die Wahrscheinlichkeit einer Konvertierung erheblich. Es verringert auch die Absprungrate. 

Rückmeldung bekommen: Ein benutzerdefiniertes Kontaktformular von Elementor kann eine hervorragende Möglichkeit sein, von den Benutzern Ihrer Website zu hören. Wenn Sie Ihren Service verbessern oder das Benutzererlebnis bereichern möchten, sollten Sie erwägen, Ihrer Website ein Feedback-Formular hinzuzufügen.

Benutzerdefiniertes Elementor-Formular, um Feedback zu erhalten
Erhalten Sie Feedback von Ihrem Publikum mit einem Kontaktformular

Behalten Sie den Überblick über Anfragen: Wenn Ihnen ein Besucher Ihrer Website eine Anfrage über ein benutzerdefiniertes WordPress-Kontaktformular sendet, wird diese entweder an eine von Ihnen angegebene E-Mail-Adresse oder an die Eintragsliste Ihres WordPress-Dashboards weitergeleitet. Es hilft Ihnen, den Überblick über Anfragen einfach zu behalten. 

Spam filtern: Ein Elementor-Kontaktformular schützt Sie vor Spammern. Wenn Sie Ihre E-Mail-Adresse auf Ihrer Website veröffentlichen, besteht die Möglichkeit, dass Sie unzählige Spam-Nachrichten erhalten.
Dies kann dazu führen, dass Sie die wichtigen Nachrichten möglicherweise nicht dann finden, wenn Sie sie benötigen. Ein Kontaktformular in Elementor mit einer Spam-Schutzfunktion übermittelt nur Nachrichten von echten Menschen, nicht von Bots oder Spammern. 

benutzerdefiniertes Elementor-Formular zum Filtern von Spam
Ein Kontaktformular kann Ihnen jede Menge Spam ersparen

Mehrfachnutzung: Sie können ein Kontaktformular aus verschiedenen Gründen nutzen. Ob Sie Feedback, Bewerbungen, Verkaufsanfragen oder Supportanfragen erhalten – ein Kontaktformular ist alles, was Sie auf Ihrer Website benötigen. 

Was benötigen Sie, um ein benutzerdefiniertes Elementor-Formular zu entwerfen?

Sie benötigen lediglich zwei Plugins auf Ihrer WordPress-Website, um mit der Erstellung von Elementor-Kontaktformularen zu beginnen:

  1. Elementor-Seitenersteller
  2. MetForm Form Builder

In dieser Anleitung werde ich Sie durch die Erstellung eines Elementor-Kontaktformulars mit dem Elementor-Seitenersteller und MetForm führen.

MetForm, ein benutzerdefiniertes Kontaktformular-Plugin, gibt es sowohl in einer Pro- als auch in einer kostenlosen Version. Während die kostenlose Version über alle grundlegenden Funktionen verfügt, die Sie zum Erstellen eines Elementor-Kontaktformulars benötigen, können Sie in der Pro-Version einige erweiterte Felder und Funktionen erkunden. Außerdem werden Sie diese erweiterten Funktionen kaum in anderen kostenlosen oder professionellen Elementor-Kontaktformularen finden, zum Beispiel Elementor Contact Form 7, wpfroms, Ninja Forms usw.

Wenn es um Elementor geht, können Sie entweder Elementor Pro oder die kostenlose Version verwenden. 

 Lassen Sie uns ohne weitere Umschweife fortfahren:

Installieren Sie das benutzerdefinierte MetForm-Kontaktformular-Plugin

Wenn Sie Elementor installiert haben, müssen Sie nur noch den MetForm-Formularersteller auf Ihrer WordPress-Site installieren. Es handelt sich um ein kostenloses WordPress-Formularersteller-Plugin, das die grundlegenden und erweiterten Funktionen eines Standard-Formularerstellers bietet. So funktioniert der Installationsprozess für MetForm: 

  1. Gehen Sie in Ihrem WordPress-Admin-Dashboard zu PluginsNeue hinzufügen 
  2. Suchen nach "MeForm” aus dem Such-Plugin-Feld oben rechts.
  3. Suchen Sie im Suchergebnis nach MetForm und klicken Sie auf „Jetzt installieren” 
  4. aktivieren Sie MetForm.

Erstellen und passen Sie das Elementor-Kontaktformular von Grund auf an

Nachdem Sie nun alles haben, was Sie zum Erstellen benutzerdefinierter WordPress-Kontaktformulare mit Elementor benötigen, können wir mit der Erstellung eines Kontaktformulars von Grund auf fortfahren.

Schritt 1

Erstellen Sie eine Elementor-Kontaktformularseite, indem Sie zu gehen Seiten ➜ Neu hinzufügen. Geben Sie dem Formular einen passenden Titel und klicken Sie dann auf „Bearbeiten mit Elementor“. 

Schritt 2

Suchen Sie im Suchfeld des Elementor-Widgets nach MetForm. Ziehen Sie es per Drag & Drop in den Elementor-Inhaltsbereich. 

Schritt 3

Klicken Sie links auf „Formular bearbeiten“. 

Wenn Sie zum ersten Mal ein Formular erstellen oder ein komplett neues Formular erstellen möchten, klicken Sie auf „Neu„. 

Wenn Sie die zuvor erstellten „Von“-Dateien gespeichert haben, können Sie diese bearbeiten, indem Sie auf „Wählen Sie Formular aus„. 

Schritt 4

Um mit der Erstellung eines Formulars von Grund auf zu beginnen, klicken Sie einfach auf die leere Kontaktformularvorlage. Wenn Sie sich für die Verwendung der von MetForm angebotenen vorgefertigten Kontaktformular-Vorlagenbibliothek entscheiden, können Sie ein beliebiges Formular aus der Liste der Formularvorlagen auswählen.

Da wir ganz von vorne beginnen, beginnen wir mit der leeren Vorlage für das Kontaktformular.

Schritt 5

Jetzt sehen Sie ein Popup-Fenster mit dem Elementor-Inhaltsbereich und dem Widget-Bereich.

Der Elementor-Widget-Bereich besteht aus allen Widgets von MetForm und Elementor. 

Um mit der Erstellung des Formulars zu beginnen, fügen Sie neue Abschnitte aus dem Elementor-Inhaltsbereich hinzu, entsprechend den Anforderungen des Formulars, das Sie erstellen möchten.

Schritt 6

Ziehen Sie die Widgets, die Sie benötigen, um Ihrem Formular eine Form zu geben, per Drag-and-Drop. 

So gestalten und passen Sie Elementor-Kontaktformularelemente an

Nachdem Sie nun alle benötigten Widgets per Drag & Drop auf Ihr Elementor-Formular gezogen haben, können Sie sie nach Herzenslust bearbeiten. 

Um beliebige Formularfelder oder Schaltflächen anzupassen, reicht es aus Klicken Sie im Elementor-Inhaltsbereich auf die Schaltfläche oder das Feld

Sie können Änderungen am Inhalt und Stil der Formularfelder vornehmen. Darüber hinaus können Sie auch die Registerkarte „Erweitert“ erkunden, um weitere Funktionen hinzuzufügen. Wenn Sie fertig sind, veröffentlichen Sie die Kontaktformularseite. 

Anpassen des gesamten Kontaktformulars in Elementor

Wenn Ihr Ziel darin besteht, das gesamte Formular, das Sie erstellen, anzupassen, erkunden Sie die Formulareinstellungen, mit denen MetForm geliefert wird. 

Unter dem Allgemeine Einstellungengibt es Optionen zum Anpassen der folgenden Kerneinstellungen eines Formulars: 

  1. Formulartitel
  2. Erfolgsmeldung 
  3. Erforderliche Anmeldung (Ja/Nein)
  4. Erfassen Sie Benutzerbrowserdaten (Ja/Nein)
  5. Formular nach dem Absenden ausblenden (Ja/Nein)
  6. Formulareinträge in Datenbank speichern (Ja/Nein)
  7. Titel des Eintrags
  8. Gesamtzahl der Einträge begrenzen (Anzahl festlegen)
  9. Aufrufe zählen (Ja/Nein)
  10. Vertikales Scrollen stoppen (Aktivieren/Deaktivieren)
  11. Weiterleiten an (Wohin die Benutzer nach dem Absenden des Formulars weitergeleitet werden)

Senden Sie eine Bestätigungs-E-Mail mit einer Einreichungskopie an Benutzer

Wenn Sie eine Bestätigungs-E-Mail an die Personen senden möchten, die das benutzerdefinierte WordPress-Kontaktformular ausfüllen, gehen Sie zum Formular von MetForm Einstellungen ➜ Bestätigung Tab. Umschalten "Bestätigungsmail an den Benutzer” auf Ja und füllen Sie dann die folgenden Felder aus: 

  1. E-Mail Betreff
  2. E-Mail von
  3. E-Mail-Antwort an
  4. Dankesnachricht

Wie benachrichtige ich den Administrator über eine neue Formularübermittlung? 

Wenn ein neues Kontaktformular übermittelt wird, wird es normalerweise in der MetForm-Eintragsdatenbank gespeichert (sofern in den allgemeinen Einstellungen aktiviert). 

Wenn Sie jedoch über neue Einsendungen benachrichtigt werden möchten, können Sie dies auch über anpassen Registerkarte „Benachrichtigung“ der Formulareinstellungen von MetForm. Die Registerkarte „Benachrichtigung“ enthält die folgenden Felder: 

  1. Benachrichtigungsmail an den Administrator (umschalten An)
  2. E-Mail Betreff
  3. E-Mail an
  4. E-Mail von
  5. E-Mail-Antwort an
  6. Administratorhinweis

Welche Formularfelder sollten Sie in Ihrem Elementor-Kontaktformular verwenden?

Unterschiedliche Formulartypen erfordern unterschiedliche Formularfelder. Wenn Sie in Elementor ein einfaches Kontaktformular erstellen, genügen Ihnen nur ein paar einfache Widgets wie Text-, E-Mail-, Telefon-, Captcha- und Absenden-Button-Widgets. 

Wenn Sie andererseits Formulare wie Zulassungsformulare, Veranstaltungsformulare, Buchungsformulare usw. erstellen möchten, müssen Sie möglicherweise andere Formularfelder verwenden und diese entsprechend anpassen. 

Um Ihnen die Auswahl der richtigen Formularfelder zu erleichtern, bietet MetForm Dutzende Vorlagen für die Erstellung verschiedenster Formulartypen wie Registrierungsformulare, WordPress-Umfrageformular, Buchungsformular usw. Überprüfen Sie die Demo-Formularvorlagen finden Sie hier. In dieser Liste finden Sie auch kostenlose Elementor-Kontaktformularvorlagen, mit denen Sie in wenigen Sekunden Kontaktformulare erstellen können.

Wie bette ich die benutzerdefinierten Kontaktformulare von Elementor in eine beliebige Seite ein? 

Wenn Sie keine Seite für Ihr Elementor-Kontaktformular erstellen, sondern das Formular lieber auf einer beliebigen Seite einbetten möchten, können Sie dies auch mit MetForm tun. 

MetForm erstellt individuelle Shortcodes für alle von Ihnen erstellten Formulare. Darüber hinaus verfügen Sie in MetForm auch über benutzerdefinierte Kontaktformular-Shortcodes. Um den Shortcode eines bestimmten Kontaktformulars zu finden, das Sie erstellt haben, gehen Sie zu WordPress Admin Dashboard ➜ MetForm ➜ Forms.

wie man benutzerdefinierte Elementor-Formulare einbettet
Kopieren Sie den Shortcode des benutzerdefinierten Kontaktformulars und betten Sie das Formular in eine beliebige Seite oder einen beliebigen Beitrag ein

Dort finden Sie Shortcodes jeglicher Form. Kopieren Sie einfach den Shortcode und fügen Sie ihn dann auf der Seite ein, auf der Sie das benutzerdefinierte WordPress-Kontaktformular einbetten möchten. Bingo! 

Integrationen, die Sie für das Elementor-Kontaktformular verwenden können

Wenn Sie MetForm verwenden, können Sie die REST-API integrieren, um Daten an die API eines Drittanbieters zu senden. Darüber hinaus können Sie das Formular mit Mailchimp, Google Sheet, MailPoet, Aweber, ConvertKit, GetResponse, ActiveCampaign, Zapier und Slack integrieren.

Legen Sie fest, ob sich die Benutzer registrieren/anmelden müssen, um ein Formular auszufüllen

Normalerweise kann jeder ein von Ihnen erstelltes Formular ausfüllen, es sei denn, Sie entscheiden, dass das Ausfüllen nur registrierten oder angemeldeten Benutzern gestattet wird. 

Benutzerdefiniertes Elemenor-Anmeldeformular
Anmelde- und Registrierungsanforderungen bei MetForm aktivieren/deaktivieren

Wenn Sie also möchten, dass nur angemeldete Benutzer das Formular ausfüllen, aktivieren Sie das Anmeldesystem. 

Andererseits können Sie die Benutzer auch registrieren lassen und dann das Formular ausfüllen. 

Um die Benutzeranmeldung und -registrierung zu aktivieren, gehen Sie zu den Formulareinstellungen und klicken Sie dann auf die Registerkarte Authentifizierung. Sie haben die Möglichkeit, die Benutzeranmeldung und -registrierung für Ihr Elementor-Formular sowohl zu aktivieren als auch zu deaktivieren.

Wie füge ich Zahlungsmethoden zu einem mit Elementor erstellten Formular hinzu? 

Wenn Sie MetForm verwenden, um Ihr Elementor-Kontaktformular zu erstellen, gehen Sie zu Formulareinstellungen und klicken Sie dann auf Zahlung Tab. 

Benutzerdefiniertes Zahlungsformular mit Elementor zum Erstellen eines benutzerdefinierten Elementor-Kontaktformulars
Integration der Zahlungsmethode mit MetForm

Hier finden Sie Zahlungsmethoden wie Paypal Und Streifen mit dem Sie Zahlungen von Ihren Kunden einziehen können. Sie müssen sie manuell konfigurieren und dann die Zahlungsmethode umschalten AN für die Formulare, mit denen Sie Zahlungen erhalten möchten. 

Wie integriere ich CRM-Systeme in Elementor-Kontaktformulare?

Sie können Ihr Elementor-Kontaktformular mit integrieren Hubspot-Kontakt, Hubspot-Formulare, Zoho-Kontakt, Und Helpscout

Integrieren Sie das benutzerdefinierte Elementor-Kontaktformular in CRM
Integrieren Sie Ihre bevorzugten CRMs mit MetForm

Sie müssen lediglich die gewünschten CRMs integrieren, indem Sie sie über das aktivieren und konfigurieren CRM Tab.

So konvertieren Sie Kontaktformulareinsendungen in Beiträge

Dies ist eine der besten Funktionen von MetForm. Mit MetForm können Sie die Formulareinreichungen in einzelne Posts umwandeln. Gehen Sie einfach zu den Formulareinstellungen und klicken Sie dann auf die Registerkarte „Posten“. Aktivieren Sie das Formular zum Posten und nehmen Sie die erforderlichen Einstellungen vor. So einfach ist das.

Erstellen Sie einen Beitrag mit Formulareinträgen zum Erstellen des Elementor-Kontaktformulars
Erstellen Sie einen Beitrag mit den Formulareinträgen

Letzte Worte

Mittlerweile kennen Sie Dutzende Möglichkeiten, ein Elementor-Formular oder ein benutzerdefiniertes Elementor-Formular zu erstellen. Sie benötigen lediglich den Elementor-Seitenersteller und den MetForm-Formularersteller. Warten Sie also nicht länger. Beginnen Sie mit der Erstellung Ihrer benutzerdefinierten Elementor-Kontaktformulare und passen Sie die Elementor-Formulare nach Herzenslust an. Und zu guter Letzt können Sie mit MetForm auch eine vollständige Kontaktseite erstellen. 

Wenn Sie Unklarheiten haben oder Fragen haben, teilen Sie uns dies bitte über das Kommentarfeld mit.


Kommentare

Schreibe einen Kommentar

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