Springe zum Hauptinhalt

So erstellen Sie ein Datei-Upload-Formular in Elementor

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Möchten Sie erfahren, wie Sie in Elementor ein Formular zum Hochladen von Dateien erstellen?

Wie Sie wahrscheinlich wissen, enthält die Pro-Version von Elementor ein Formular-Widget, mit dem Sie Formulare auf Ihrer WordPress-Website erstellen können. Mit diesem Widget können Sie fast alle Arten von Formularen erstellen. Dieses Widget bietet ungefähr 19 Feldtypen, darunter ein Feld zum Hochladen einer Datei.

In diesem Artikel zeigen wir Ihnen, wie Sie ein Formular erstellen, das aus einem Datei-Upload-Feld besteht.

Aber bevor Sie beginnen, stellen Sie sicher, dass Sie Ihre Version von Elementor auf die Pro-Version aktualisiert haben, da das Formular-Widget wiederum nur auf Elementor Pro verfügbar ist.

Lesen Sie unseren Leitfaden zu: So installieren Sie Elementor auf WordPress

Erstellen Sie zunächst eine neue Seite oder veröffentlichen und bearbeiten Sie sie mit Elementor.

Bevor Sie mit der Erstellung der Seite beginnen, um Ihr Formular hinzuzufügen, definieren Sie zunächst das Layout. Klicken Sie dazu auf das Zahnradsymbol in der unteren linken Ecke des linken Bedienfelds. Legen Sie Ihr bevorzugtes Layout aus dem Dropdown-Menü fest Layout.

Fügen Sie einen neuen Abschnitt hinzu, indem Sie auf das Plus-Symbol im Bearbeitungsfeld von Elementor klicken. Sie können eine beliebige Struktur basierend auf dem Designkonzept auswählen, das Sie erstellen möchten. Wir wählen in diesem Beispiel eine einspaltige Struktur.

Fügen Sie das Formular-Widget hinzu, indem Sie es aus dem linken Bereich in den Zeichenbereich ziehen.

So erstellen Sie ein Formular in Elementor

Standardmäßig haben Sie ein Formular mit drei Feldern: Name, E-Mail und Nachricht. Entfernen Sie ein nicht benötigtes Feld, indem Sie auf das x-Symbol im Feld klicken.

In diesem Artikel erstellen wir ein Formular mit 4 Feldern: Name, E-Mail, Nachricht und Datei-Upload. Da das Formular standardmäßig nur 3 Felder enthält, müssen Sie ein neues Formular für das Feld Datei-Upload hinzufügen.

Lesen Sie auch: So fügen Sie reCAPTCHA zu Ihrem Elementor-Formular hinzu

Klicken Sie auf die Schaltfläche EINEN ARTIKEL HINZUFÜGEN um ein neues Feld hinzuzufügen. Definieren Sie den Feldtyp auf Datei hochladen. Wenn Sie es als Pflichtfeld definieren möchten, aktivieren Sie die Option Erforderlich. Legen Sie die maximale Dateigröße aus dem Dropdown-Menü auf . fest Maximale Dateigröße.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Um die zulässigen Dateitypen zu definieren, geben Sie die Dateierweiterungen ein Zulässige Dateitypen. Sie können mehrere Dateitypen akzeptieren, indem Sie die Dateierweiterungen durch ein Komma trennen. Wenn Sie Ihren Besuchern erlauben möchten, mehrere Dateien einzureichen, aktivieren Sie die Option Mehrere Dateien und legen Sie die maximale Anzahl von Dateien fest, die sie herunterladen können.

Wenn Sie die Reihenfolge der Felder ändern möchten, können Sie jedes Feld einfach nach oben oder unten ziehen. In diesem Beispiel platzieren wir das Feld Datei-Upload über dem Feld Nachricht.

So erstellen Sie ein Datei-Upload-Formular in Elementor

Definition der Aktion

Es wäre toll, wenn Sie Ihr Elementor-Formular mit verbinden könnten Formular-Backend-Dienste sowie Formular abrufen ou Formulartragen. Leider unterstützt Elementor keine Integration mit einem Formular-Backend-Dienst.

Finde heraus wie: So fügen Sie einen Teiler hinzu, um einen Abschnitt in Elementor zu erstellen

In diesem Artikel werden wir die Aktion für E-Mails definieren. Das bedeutet, dass über Ihr Formular eingereichte Einreichungen über die angegebene E-Mail-Adresse gesendet werden.

Standardmäßig war die Formularaktion auf E-Mail eingestellt. Sie können dies über die Option überprüfen Aktionen nach dem Absenden.

Dann öffne die Option E-Mail und legen Sie die E-Mail-Adresse fest, an die Formulareinsendungen gesendet werden. Definieren Sie auch den Betreff der E-Mail.

So erstellen Sie ein Datei-Upload-Formular in Elementor

Immer unter der Option Email, E-Mail-Text auf Option setzen Botschaft.

Um den Text der E-Mail anzupassen, können Sie die Shortcodes der Felder einfügen, die Sie dem Text hinzufügen möchten. Sie finden sie in der Registerkarte ERWEITERT jedes Feldes.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Sie können auch die Body-Metadaten Ihrer E-Mail im Abschnitt . anpassen Metadaten. Entfernen Sie alle Metadaten, die Sie nicht einschließen möchten.

So erstellen Sie ein Datei-Upload-Formular in Elementor

Die Metadaten selbst werden unter dem Text der E-Mail angezeigt.

In den Feldern Von, Von Name und Antwort an, können Sie sie leer lassen.

Anpassen des Formulars

Bisher ist Ihr Formular zur Veröffentlichung bereit. Vor der Veröffentlichung können Sie das Formular anpassen, um es attraktiver zu gestalten. Standardmäßig enthält jedes Feld in Ihrem Formular ein Label. Wenn Sie es deaktivieren möchten, können Sie dies unter tun Option Formularfelder sous die Registerkarte Inhalt.

Um erweiterte Styling-Optionen zu erstellen, können Sie auf die Registerkarte zugreifen Stil. Hier sind einige Styling-Optionen, die Sie einstellen können.

  • Definieren Sie den Abstand zwischen den Linien und die Typografie der Etiketten

Um den Abstand zwischen den Zeilen (Feldern) sowie die Typografie der Beschriftungen zu definieren, können Sie die Option Form.

Legen Sie den Zeilenabstand auf dem Abschnitt fest Zeilenabstand. Um die Typografie der Etiketten (Schriftgröße, Schriftstil und Schriftfamilie) zu definieren, können Sie auf das Bleistiftsymbol von . klicken Typographie im Abschnitt Label.

  • Definieren Sie Feldtypografie, Hintergrundfarbe, Rahmenfarbe, Rahmenbreite und Rahmenradius

Sie können die Option öffnen Feld um die Typografie des Controls, die Hintergrundfarbe des Controls, die Rahmenfarbe, die Rahmenbreite und den Rahmenradius zu definieren.

So erstellen Sie ein Datei-Upload-Formular in Elementor

  • Schaltfläche "Anpassen"

Um die Schaltfläche anzupassen, können Sie die Option öffnen Buttons. Von dort aus können Sie die Hintergrundfarbe, Textfarbe, Typografie, Randfarbe, Randradius usw. einstellen ... Wechseln Sie zum Tab SCHWEBEN um das Knopfzeigen besonders anzufertigen.

Es gibt mehrere andere Anpassungsoptionen, die Sie festlegen können. Sie können mit dem linken Bereich herumspielen, bis Sie mit dem Aussehen Ihres Formulars zufrieden sind. Wenn Sie fertig sind, können Sie auf die Schaltfläche klicken VERÖFFENTLICHUNG um Ihr Formular zu veröffentlichen.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Möglicher Fehler

Wenn Sie Ihr Formular testen, können Fehlermeldungen angezeigt werden. Unten ist ein Beispiel für einen Fehler.

So erstellen Sie ein Datei-Upload-Formular in Elementor

Der obige Fehler tritt normalerweise auf, wenn Sie einen gemeinsam genutzten Webhosting-Dienst verwenden. Die meisten Shared Webhosting-Anbieter deaktivieren die Funktion php send_mail, die von der WordPress-Funktionalität verwendet wird wp_mail zum Versenden von E-Mails.

Holen Sie sich jetzt Elementor Pro!

Fazit

Hier ist ! Das war's für diesen Artikel, der Ihnen zeigt, wie Sie ein Datei-Upload-Formular in Elementor erstellen. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, flass es uns wissen im 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.

...

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

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

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
0 Aktien
Aktie
tweet
Registrieren