In diesem Artikel erfahren Sie, wie Sie mit dem kostenlosen Elementor ein Formular erstellen.
Obwohl das Formular-Widget nur in Elementor Pro verfügbar ist, bedeutet dies nicht, dass Sie in der kostenlosen Version von Elementor kein Formular erstellen können.
Wenn Sie der Seite, die Sie mit der kostenlosen Version von Elementor erstellen, ein Formular hinzufügen müssen, können Sie die beiden Methoden verwenden, die wir in diesem Artikel behandeln werden.
Elementor, egal ob es sich um die Pro-Version oder die kostenlose Version handelt, enthält zwei Widgets, mit denen Sie ein Formular erstellen können. Dies sind die HTML- und Shortcode-Widgets. Mit dem HTML-Widget können Sie ein HTML-Formular einbetten, während Sie mit dem Shortcode-Widget ein Formular aus Formular-Plugins einbetten können, die den Shortcode verwenden, wie z Kontaktformular 7.
Erstellen Sie ein Formular mit der kostenlosen Version von Elementor mit dem HTML-Widget
Diese Methode erfordert, dass Sie über HTML-Kenntnisse verfügen, um das Formular zu erstellen. Sie können auch eine HTML-Formularvorlage aus dem Internet herunterladen. W3docs hat mehr als 60 HTML-Formularvorlagen die Sie kostenlos herunterladen können.
Erstellen Sie zunächst eine neue Seite und bearbeiten Sie sie mit Elementor (Seiten – > Hinzufügen). Natürlich können Sie auch eine bestehende Seite ändern. Wenn Sie ein Formular auf einer neuen Seite erstellen möchten, denken Sie daran, das Formularlayout festzulegen, indem Sie auf das Zahnradsymbol im unteren linken Bereich klicken.
Fügen Sie einen neuen Abschnitt hinzu, indem Sie im Bearbeitungsbereich auf die Plus-Schaltfläche klicken, und fügen Sie das HTML-Formular hinzu, indem Sie es aus dem linken Bedienfeld in den Bearbeitungsbereich ziehen. Platzieren Sie es im gewünschten Bereich. Gehen Sie dann zum linken Bereich und fügen Sie den HTML-Code des Formulars in das Feld ein HTML-Code unter der Registerkarte Inhalt.
Veröffentlichen/aktualisieren Sie die Seite, sobald Sie mit der Bearbeitung fertig sind.
Siehe auch: So verwenden Sie Elementor-Widgets/Vorlagen als Gutenberg-Blöcke
Ein Ding. Wenn Ihr HTML-Formular externes CSS, Bilder oder JavaScript für die Gestaltung verwendet, stellen Sie sicher, dass Sie die Ordner mit dem CSS-Code, den Bildern und dem JavaScript in das Stammverzeichnis Ihrer Website hochladen.
Erstellen Sie kostenlos ein Formular auf Elementor mit dem Kontaktformular 7
Wenn Sie keine HTML-Kenntnisse haben und keine HTML-Formularvorlage verwenden möchten, können Sie mit dem Plugin ein Formular in der kostenlosen Version von Elementor erstellen Kontaktformular 7. Es gibt tatsächlich viele andere Formular-Plugins. Wir empfehlen Kontaktformular 7 weil es das beliebteste Formular-Plugin für WordPress ist und völlig kostenlos.
Installieren Sie zuerst das Plugin Kontaktformular 7. Gehen Sie dazu zu Erweiterungen – > Hinzufügen. Geben Sie „Kontaktformular 7“ in das Suchfeld ein und klicken Sie auf die Schaltfläche jetzt installieren sobald du es gefunden hast.
Aktivieren Sie das Plugin sofort nach der Installation.
Contact Form 7 enthält ein Standardformular (a Kontaktformular ). Sie können es verwenden, wenn Sie möchten. Wenn Sie stattdessen ein neues Formular erstellen möchten, können Sie zu gehen Kontakt – > Hinzufügen. Geben Sie Ihrem Formular einen Namen, damit Sie es in Zukunft leicht identifizieren können.
Standardmäßig besteht Ihr Formular aus vier Feldern: Name, E-Mail, Betreff und Nachricht.
Wenn Sie ein neues Feld hinzufügen möchten, platzieren Sie Ihren Mauszeiger in dem Bereich, in dem Sie das neue Feld hinzufügen möchten (Sie können ihn unter oder über einem vorhandenen Feld platzieren). Bezeichnung für neues Formularfeld im Format hinzufügen <label> votre label préféré </label>.
Platzieren Sie Ihren Mauszeiger direkt hinter der Beschriftung und wählen Sie ein Feld auf der Registerkarte „Feld“ aus. Sie können einen neuen Zeilenumbruch hinzufügen, um Ihr neues Feld sauberer als andere vorhandene Felder zu machen.
Füllen Sie die Felder aus und klicken Sie auf Fügen Sie den Tag ein (Sie können alles als Standard belassen).
Contact Form 7 sendet Einsendungen, die über Ihr Formular übermittelt werden, an eine E-Mail. Sie können die E-Mail auf der Registerkarte festlegen E-Mail.
Sie können zur Registerkarte gehen Account Beiträge wenn Sie die Standardmeldungen überschreiben möchten. Sie können die Nachricht anpassen, die angezeigt wird, nachdem Ihre Besucher das Formular erfolgreich gesendet haben, oder die Fehlermeldung, wenn das Formular nicht gesendet wird usw.
Klicken Sie auf die Schaltfläche Registrieren sobald Sie das Formular bearbeitet und den Shortcode kopiert haben.
Um das gerade erstellte Formular zu Ihrer Elementor-Seite hinzuzufügen, erstellen Sie eine neue Seite und bearbeiten Sie sie mit Elementor, oder Sie können auch eine vorhandene Seite bearbeiten.
Lesen Sie auch: So deaktivieren Sie ein Elementor-Popup auf Smartphones
Fügen Sie einen neuen Abschnitt hinzu, um das Formular zu platzieren, und fügen Sie die hinzu Shortcode-Widget. Sobald das Shortcode-Widget hinzugefügt wurde, gehen Sie zum linken Bereich und fügen Sie den kopierten Shortcode in das Feld ein Kurzwahl unter der Registerkarte Inhalt.
Veröffentlichen/aktualisieren Sie Ihre Seite, sobald Sie mit der Bearbeitung fertig sind.
Contact Form 7 verwendet das Stilformat des Wordpress-Theme die du verwendest. Sie können Ihr Contact Form 7-Formular gestalten, aber CSS-Kenntnisse sind erforderlich. Sie können diesen Artikel auch unter einsehen So passen Sie ein Kontaktformular 7-Formular mit Essential Addons und Elementor an.
Holen Sie sich Elementor Pro jetzt!!!
Zusammenfassung
So ! Das war es für diesen Artikel, der Ihnen zeigt, wie Sie mit dem kostenlosen Elementor ein Formular erstellen. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, teilen Sie es ihnen im mit commentaires.
Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
