So erstellen Sie ein Dateiupload-Widget in WordPress

Wenn Sie Benutzern die Möglichkeit geben, Dateien und Medien zu den Formularen Ihrer Website hinzuzufügen, können Sie die benötigten Informationen viel einfacher sammeln. Deshalb benötigen Sie ein Dateiupload-Widget.

Sie sind vielleicht besorgt darüber, wie Sie den Prozess nahtlos gestalten können, ohne sich mit komplexem Code oder unzuverlässigen Plugins auseinandersetzen zu müssen. Ich verstehe das vollkommen – niemand möchte Stunden damit verbringen, etwas zu beheben, das einfach sein sollte.

Deshalb zeige ich Ihnen in diesem Leitfaden, wie Sie ein Dateiupload-Widget in WordPress erstellen, um Dateien von Ihren Website-Besuchern zu empfangen.

Erstellen Sie jetzt Ihr WordPress Dateiupload-Widget Formular! 🙂

So erstellen Sie ein Dateiupload-Widget in WordPress

Abhängig von der Art der Informationen, die Sie in Ihrem Formular sammeln möchten, ist die Verwendung eines WordPress Upload-Widgets eine der besten Möglichkeiten, um schnell mehr Informationen von Ihren Benutzern zu erhalten.

Zum Beispiel wäre dies eine großartige Platzierung für ein Formular, um Besuchern den Upload von Bildern in WordPress zu ermöglichen. Indem Sie Formulare einfacher auszufüllen und zugänglicher machen, können Sie Ihre Abbruchrate reduzieren, sodass Ihre WordPress-Website mehr Umsatz generieren kann.

Sie können auch lernen, wie Sie zusätzliche Dateitypen in Ihren WordPress Upload-Formularen akzeptieren können, oder Sie können zu einem anderen Leitfaden springen, wenn Sie eine Zahlung für Datei-Uploads verlangen möchten.

Wenn Sie bereit sind, loszulegen, finden Sie hier ein Video-Tutorial, wie Sie ein Dateiupload-Widget in WordPress erstellen, oder Sie können die schriftlichen Anweisungen befolgen.

Bevor Sie Ihr WordPress Upload-Widget erstellen, müssen Sie ein WordPress Dateiupload-Formular erstellen. Wenn Sie dies bereits getan haben, können Sie zu Schritt 6 springen.

Schritt 1: Erstellen Sie Ihr Dateiupload-Formular in WordPress

WPForms ist das beste Plugin für Datei-Uploads. Im Gegensatz zur Google Forms Upload-Datei-Funktion können Sie mit WPForms Datei-Uploads überall auf Ihrer Website hinzufügen, nicht nur auf Formularseiten.

Als Erstes müssen Sie das WPForms Plugin installieren und aktivieren. Weitere Details zur Installation finden Sie in diesem Schritt-für-Schritt-Leitfaden zur Installation eines Plugins in WordPress.

Gehen Sie als Nächstes zu Ihrem WordPress-Dashboard und klicken Sie im linken Menü auf WPForms » Neu hinzufügen, um ein neues Formular zu erstellen und es beliebig zu benennen.

Scrollen Sie dann zum Abschnitt Vorlage auswählen und suchen Sie nach der Vorlage für das Dateiupload-Formular. Klicken Sie dann auf Vorlage verwenden, um sie zu öffnen.

Nun wird WPForms ein vordefiniertes Dateiupload-Formular einfügen und den Drag-and-Drop-Builder anzeigen.

Hier können Sie Ihrem Formular weitere Felder hinzufügen, indem Sie sie vom linken Bereich in den Vorschau-Bereich auf der rechten Seite ziehen. Oder Sie können Felder entfernen, um sicherzustellen, dass Ihr Formular gut in Ihr Upload-Widget passt, wenn Sie es in Schritt 6 hinzufügen.

Mit der Vorlage für das Datei-Upload-Formular haben Sie bereits die Felder Name, E-Mail, Telefon, Datei-Upload und Zusätzliche Kommentare.

Klicken Sie auf eines der Formularfelder, um Änderungen vorzunehmen. Sie können auch auf ein Formularfeld klicken und es ziehen, um die Reihenfolge in Ihrem Kontaktformular zu ändern.

In unserem Beispiel entfernen wir die Felder Telefon und Zusätzliche Kommentare, um dieses Formular kleiner zu machen, damit es besser in unser Widget passt. Klicken Sie einfach auf das Papierkorbsymbol, um ein Feld zu entfernen.

Denken Sie daran, dass Sie das Feld Datei-Upload auch zu jedem von Ihnen erstellten WordPress-Formular hinzufügen können. Ziehen Sie einfach das Feld Datei-Upload, das sich unter Fancy Fields befindet, vom linken Bereich in den Vorschau-Bereich.

Schritt 2: Konfigurieren Sie die Optionen für das Dateiupload-Feld

Sie können Ihr Feld für den Datei-Upload anpassen, indem Sie darauf klicken, um seine Feldoptionen zu öffnen.

Hier können Sie Folgendes ändern:

• Beschriftung — Benennen Sie das Formularfeld so, dass Ihre Website-Besucher wissen, wofür es ist.
• Beschreibung — Fügen Sie eine Beschreibung hinzu, die den Benutzern Details erklärt. Wenn Sie beispielsweise nur möchten, dass Personen ein Bild hochladen, teilen Sie ihnen dies mit.
• Zulässige Dateierweiterungen — Wenn Sie die Arten von Dateien einschränken möchten, die in Ihr WordPress-Formular hochgeladen werden können, geben Sie sie hier ein, jeweils durch ein Komma getrennt.
• Maximale Dateigröße — Geben Sie in Megabyte die maximale Dateigröße an, die Benutzer hochladen dürfen. Wenn Sie hier keine Zahl eingeben, verwendet WPForms standardmäßig die maximale Dateigröße, die Ihr Server zulässt. Wenn Sie dies ändern müssen, lesen Sie dieses Tutorial, wie Sie die maximale Dateigröße in WordPress erhöhen.
• Maximale Datei-Uploads — Wenn Sie das Feld für den Datei-Upload im modernen Stil verwenden, können Sie die Anzahl der Dateien begrenzen, die Benutzer gleichzeitig hochladen können.
• Erforderlich — Wenn Sie verlangen möchten, dass Benutzer eine Datei hochladen, bevor sie ihr Formular absenden können, aktivieren Sie dieses Kontrollkästchen.

Es gibt auch weitere Optionen im Tab Erweitert.

• Stil — Sie können zwischen dem Standard-Modern-Stil und dem Klassik-Stil wechseln. Das Feld für den modernen Datei-Upload ermöglicht es Benutzern, Dateien per Drag & Drop in Ihr Formular zu ziehen und mehrere Dateien hochzuladen. Der Klassik-Stil bietet Benutzern eine Schaltfläche „Datei auswählen“, um eine Datei von ihrem Computer auszuwählen.
• Dateien in der WordPress-Mediathek speichern — Standardmäßig werden alle von Benutzern hochgeladenen Dateien im WPForms-Ordner im Uploads-Verzeichnis Ihrer Website gespeichert. Um die Dinge zu vereinfachen, können Sie diese Dateien auch in Ihrer WordPress-Mediathek speichern.
• Dateizugriffsbeschränkungen aktivieren — Beschränken Sie den Zugriff auf hochgeladene Dateien basierend auf Benutzerrollen oder durch Hinzufügen von Passwortschutz.
• Beschriftung ausblenden — Blenden Sie die Beschriftung des Formularfelds aus

Sie können Formulare auch großartig aussehen lassen, indem Sie die Schritte in unserem Beitrag zum Erstellen eines mehrstufigen Formulars in WordPress befolgen. Aber der Einfachheit halber bleiben wir bei dieser Anleitung bei einer einzelnen Seite.

Sobald Ihr Formular so aussieht, wie Sie es möchten, klicken Sie in der oberen rechten Ecke des Builders auf Speichern.

Schritt 3: Passen Sie die Einstellungen Ihres Dateiupload-Formulars an

Gehen Sie zunächst zu Einstellungen » Allgemein.

Hier können Sie Folgendes konfigurieren:

• Formularname — Ändern Sie hier den Namen Ihres Formulars, wenn Sie möchten.
• Formularbeschreibung — Geben Sie Ihrem Formular eine Beschreibung.
• Tags — Fügen Sie Ihren Formularen Tags hinzu, um sie zu organisieren.
• Text der Schaltfläche „Senden“ — Passen Sie den Text auf der Schaltfläche „Senden“ an.
• Text der Schaltfläche „Senden“ während der Verarbeitung — Ändern Sie den Text, der angezeigt wird, während Ihr Formular gesendet wird.

Erweitern Sie dann den Abschnitt Erweitert, um auch die folgenden Einstellungen zu konfigurieren:

• CSS-Klassen — Fügen Sie Ihrem Formular oder der Schaltfläche „Senden“ benutzerdefiniertes CSS hinzu.
• Vorausfüllen über URL — Füllen Sie einige Felder automatisch basierend auf einer URL aus.
• AJAX-Formularübermittlung aktivieren — Aktivieren Sie AJAX-Einstellungen ohne Seitenneuladung.
• Speicherung von Eingabeinformationen in WordPress deaktivieren — Sie können die Speicherung von Eingabeinformationen und Benutzerdetails, wie z. B. IP-Adressen und User Agents, deaktivieren, um die DSGVO-Anforderungen zu erfüllen. Sehen Sie sich unsere Schritt-für-Schritt-Anleitung an, wie Sie ein DSGVO-Zustimmungsfeld zu Ihrem einfachen Kontaktformular hinzufügen.

Wenn Sie mit den allgemeinen Einstellungen fertig sind, wechseln Sie zu den Einstellungen für Spam-Schutz und Sicherheit.

Hier gibt es einige zusätzliche Einstellungen, die Sie konfigurieren können:

• Anti-Spam-Schutz aktivieren — Stoppen Sie Spam in Kontaktformularen mit der Anti-Spam-Funktion, hCaptcha oder Google reCAPTCHA. Die Anti-Spam-Checkbox ist bei allen neuen Formularen automatisch aktiviert.
• Akismet Anti-Spam-Schutz aktivieren — Wenn Sie das Akismet-Plugin zur Spam-Bekämpfung verwenden, können Sie es mit diesem Formular verbinden, um gefälschte Einträge zu verhindern.
• Länderfilter aktivieren — Verhindern Sie Einträge aus bestimmten Ländern.
• Schlüsselwortfilter aktivieren — Blockieren Sie Übermittlungen, die bestimmte Wörter oder Phrasen enthalten.

Und wenn Sie fertig sind, klicken Sie auf Speichern.

Schritt 4: Konfigurieren Sie die Benachrichtigungen Ihres Formulars

Benachrichtigungen sind eine hervorragende Möglichkeit, um zu erfahren, wann jemand eine Datei in Ihr WordPress-Upload-Widget hochlädt.

Und wenn Sie die Benachrichtigungsfunktion nicht deaktivieren, erhalten Sie jedes Mal eine E-Mail-Benachrichtigung, wenn jemand ein Formular auf Ihrer Website sendet.

Um eine E-Mail-Nachricht zu erhalten, wenn jemand Ihr Formular ausfüllt, müssen Sie Formularbenachrichtigungen in WordPress einrichten und Ihre E-Mail-Adresse angeben.

Wenn Sie Smart Tags verwenden, können Sie Ihren Website-Besuchern auch eine personalisierte Benachrichtigung senden, nachdem sie Ihr Formular ausgefüllt haben, um sie darüber zu informieren, dass Sie es erhalten haben. Dies versichert den Benutzern, dass ihr Formular ordnungsgemäß verarbeitet wurde, zusammen mit ihrem Datei-Upload.

Weitere Informationen hierzu finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Senden mehrerer Formularbenachrichtigungen in WordPress.

Sie können Smart Tags auch verwenden, um einen Link zur hochgeladenen Datei des Eintrags in die E-Mail-Benachrichtigung aufzunehmen.

Oder, wenn Sie es vorziehen, können Sie die Datei als Anhang beifügen. Scrollen Sie einfach nach unten zu den Erweiterten Einstellungen für Ihre Benachrichtigung und Datei-Upload-Anhänge aktivieren.

Beachten Sie, dass E-Mail-Anbieter manchmal Einschränkungen hinsichtlich der Größe von E-Mail-Anhängen haben. Große Anhänge können dazu führen, dass Ihre E-Mails nicht richtig zugestellt werden.

Schließlich haben Sie die Möglichkeit, Ihre Benachrichtigungs-E-Mails einfach zu branden, indem Sie Ihr Logo oder ein beliebiges Bild Ihrer Wahl im Bereich für benutzerdefinierte Kopfzeilenbilder hinzufügen. Das von Ihnen gewählte Logo/Bild wird oben in den E-Mail-Benachrichtigungen angezeigt, wie das WPForms-Logo unten.

Schritt 5: Konfigurieren Sie die Bestätigungen Ihres Dateiupload-Formulars

Formularbestätigungen sind Möglichkeiten, sofort (und automatisch) Maßnahmen zu ergreifen, nachdem Ihr Benutzer Informationen an Ihr WordPress-Upload-Widget gesendet hat. Für zusätzliche Hilfe bei diesem Schritt lesen Sie unser Tutorial zum Einrichten von Formularbestätigungen.

Es gibt 3 verschiedene Arten von Bestätigungen in WPForms:

1. Nachricht — Dies ist der Standard-Bestätigungstyp, der angezeigt wird, nachdem jemand auf Senden geklickt hat, und er ist anpassbar. Schauen Sie sich unsere Tipps an, wie Sie Ihre Bestätigungsnachricht anpassen, um die Zufriedenheit Ihrer Website-Besucher zu steigern.
2. Seite anzeigen — Senden Sie Benutzer automatisch zu einer beliebigen Seite auf Ihrer Website, wie z. B. einer Dankesseite.
3. Weiterleiten — Nützlich, wenn Sie den Benutzer zu einer anderen Website oder einer spezialisierten URL für komplexere Entwicklungen weiterleiten möchten.

Lassen Sie uns also sehen, wie Sie eine einfache Formularbestätigung in WPForms einrichten, damit Sie die Erfolgsmeldung anpassen können, die Website-Besucher sehen, wenn sie ein Formular auf Ihrer Website absenden.

Klicken Sie zunächst im Formular-Editor unter Einstellungen auf die Registerkarte Bestätigungen.

Wählen Sie als Nächstes den Bestätigungstyp aus, den Sie erstellen möchten. In diesem Beispiel wählen wir Nachricht.

Passen Sie dann die Bestätigungsnachricht nach Ihren Wünschen an und klicken Sie auf Speichern, wenn Sie fertig sind.

Jetzt können Sie Ihr Formular zu den Widgets Ihrer Website hinzufügen.

Schritt 6: Fügen Sie Ihr Dateiupload-Formular zu einem Widget hinzu

Nachdem Sie Ihr Formular erstellt haben, können Sie es einem Widget-Bereich auf Ihrer WordPress-Website hinzufügen.

WPForms ermöglicht es Ihnen, Ihre Formulare an mehreren Stellen auf Ihrer Website hinzuzufügen, einschließlich Ihrer Seiten, Blogbeiträge und WordPress-Widgets.

Um das Datei-Upload-Formular zu einem Widget hinzuzufügen und Ihr eigenes Upload-Widget zu erstellen, gehen Sie im Menü auf der linken Seite Ihres WordPress-Dashboards zu Darstellung » Widgets.

Hier sehen Sie verschiedene Abschnitte für die Widget-Bereiche, die Ihr WordPress-Theme bereitstellt. Erweitern Sie den Abschnitt für den Bereich, in dem Sie Ihr Datei-Upload-Formular hinzufügen möchten. In unserem Beispiel fügen wir es in die Seitenleiste ein.

Klicken Sie auf die Schaltfläche Plus (+), um Ihrem Widget-Bereich einen neuen Block hinzuzufügen, und wählen Sie den WPForms Block aus. Sie können danach suchen, wenn Sie ihn nicht sofort sehen.

Wählen Sie als Nächstes Ihr Datei-Upload-Formular aus dem Dropdown-Menü im WPForms-Block aus.

Ihr Datei-Upload-Formular wird im Widget geladen. Jetzt müssen Sie nur noch auf die Schaltfläche Aktualisieren klicken, um Ihr Datei-Upload-Widget live zu schalten.

Das ist alles! Ihr Datei-Upload-Formular befindet sich jetzt in einem WordPress-Widget auf Ihrer Website.

Schritt 7: Eingereichte Dateien anzeigen

WPForms speichert jede Formularübermittlung als Eintrag in der WordPress-Datenbank. Um hochgeladene Dateien anzuzeigen, gehen Sie zu WPForms » Einträge. Klicken Sie dann auf den Namen Ihres Datei-Upload-Widget-Formulars.

Sobald Sie alle Einträge sehen, können Sie in der Spalte Aktionen auf Anzeigen klicken, um auf die Datei zuzugreifen, die über das WordPress-Upload-Widget hochgeladen wurde.

Sie können nun mit der rechten Maustaste auf die Datei klicken, um sie herunterzuladen, oder darauf klicken, um sie in Ihrem Browser anzuzeigen.

Noch besser: Sie können unser Zapier-Addon verwenden, um alle Datei-Uploads automatisch zu speichern in:

• Google Drive
• Dropbox
• und viele andere Cloud-Speicherdienste

Und um herauszufinden, wie Leute Ihr Upload-Formular und Ihre Website finden, lesen Sie unseren Leitfaden zur Installation von Google Analytics in WordPress.

FAQs – So erstellen Sie ein Datei-Upload-Widget in WordPress

Wie füge ich eine Datei-Upload-Funktion in WordPress hinzu?

Um eine Datei-Upload-Funktion in WordPress hinzuzufügen, können Sie ein Plugin wie WPForms verwenden. Installieren Sie einfach WPForms, erstellen Sie ein neues Formular und fügen Sie das Feld Datei-Upload hinzu. Betten Sie das Formular dann auf der gewünschten Seite oder im Widget-Bereich ein.

Unterstützt WordPress Datei-Uploads?

Ja, WordPress unterstützt standardmäßig Datei-Uploads, aber Sie können diese Funktionalität mit Plugins wie WPForms erweitern, mit denen Sie ganz einfach Formulare mit Datei-Upload-Optionen erstellen können, sodass Benutzer Dateien direkt über Ihre Website übermitteln können.

Wie erlaube ich jemandem, eine Datei nach WordPress hochzuladen?

Um jemandem den Upload einer Datei auf Ihre WordPress-Website zu ermöglichen, verwenden Sie WPForms. Erstellen Sie ein Formular mit einem Datei-Upload-Feld und platzieren Sie es auf Ihrer Website. Besucher können dann das Formular verwenden, um ihre Dateien direkt in Ihre WordPress-Mediathek hochzuladen.

Wie füge ich einen Bild-Upload-Button in WordPress hinzu?

Um einen Bild-Upload-Button in WordPress hinzuzufügen, können Sie WPForms verwenden. Erstellen Sie ein Formular und fügen Sie das Feld Datei-Upload hinzu, das so konfiguriert werden kann, dass es Bilddateien akzeptiert. Dies schafft eine einfache Möglichkeit für Benutzer, Bilder über Ihre Website hochzuladen.

Als Nächstes: Adobe Illustrator-Uploads in WordPress zulassen

Wenn Sie Dateien von Designern akzeptieren möchten, sollten Sie unbedingt prüfen, wie Sie Adobe Illustrator (AI) Uploads in WordPress aktivieren. Lesen Sie auch unseren Beitrag mit großartigen Tipps für das Marketing für Kleinunternehmen, die Sie noch heute ausprobieren können.

Erstellen Sie jetzt Ihr WordPress-Formular

Bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formularersteller-Plugin.  WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.

Wenn Ihnen dieser Artikel geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials und Anleitungen.