WordPress-Formular für Dateiuploads kostenlos erstellen: Leitfaden für Anfänger

Sie fragen sich, wie Benutzer Lebensläufe, Screenshots, Dokumente oder Projektdateien über Ihr WordPress-Formular hochladen können?

Ein einfaches Felder zum Hochladen von Dateien ermöglicht es, alles mit der Formularübermittlung zu senden. Sie müssen keine Dateien separat per E-Mail sammeln. Und wenn Sie ein WordPress-Benutzer sind, ist es sogar noch einfacher. Sie benötigen nur das richtige Formular-Plugin.

Sehen Sie die Frustration: Jemand füllt alle Basisangaben in Ihrem Kontaktformular aus, findet aber keine Möglichkeit, einen Screenshot seines Problems anzuhängen. Das Formular hat keine Feld zum Hochladen von Dateien, so dass er es per E-Mail senden muss. Das unterbricht den Ablauf und der Benutzer erlebt Unbehagen. Es wird sowohl für den Benutzer als auch für den Administrator zu einer mühsamen Aufgabe, alle Formulardaten und den Posteingang gleichzeitig zu verwalten.

Ob Sie also Bilder oder beliebige Dokumente sammeln, das Hinzufügen einer Dateiupload-Option ist zwingend erforderlich. Heute sehen wir, wie Sie ein kostenloses WordPress-Formular zum Hochladen von Dateien erstellen können.

Warum ein Dateiupload-Feld in WordPress-Formularen hinzufügen?

Nicht alle Formulare erfordern ein Feld zum Hochladen von Dateien. In den meisten Fällen reichen Texteingaben aus, um grundlegende Informationen zu sammeln. Es gibt jedoch bestimmte Situationen, in denen das Hochladen von Dateien den Prozess schneller und einfacher macht. Schauen wir uns einige reale Szenarien an, in denen Sie ein Formular zum Hochladen von Dateien benötigen:

• Während der Bearbeitung von Support-Tickets erleichtert das Anhängen eines Screenshots des Fehlers dem Team das Verständnis und die Lösung des Problems.
• In der Bewerbungsformulare, benötigen Interviewer die Lebensläufe und Portfolios der Kandidaten, um sie zu bewerten. 
• Bei der Online-Aufnahme werden Studierende oft gebeten, Zeugnisse, Empfehlungsschreiben und Ausweisdokumente einzureichen.
• Für Rechtsformen, bei denen der Kunde möglicherweise Verträge oder andere rechtliche Dokumente hochladen muss.
• In medizinischen Formularen können Patienten ihre Rezepte, Berichte und andere notwendige Dokumente beifügen.  
• Bei Wettbewerbsformularen, zum Beispiel bei einem Fotowettbewerbsformular, müssen die Teilnehmer ihre geklickten Bilder einreichen. 

Wenn es kein Feld zum Hochladen von Dateien gäbe, würden Benutzer ihre Dateien per E-Mail einreichen. Irgendwann würden sich die E-Mails stapeln. Sie würden am Ende Formular-Daten an einem Ort und Dateien an einem anderen verwalten.

Das bedeutet, ständig zwischen Ihrem WordPress-Dashboard und Ihrem Posteingang zu wechseln, nur um Einsendungen mit ihren Dateien abzugleichen. Dieser ständige Wechsel wird alles verlangsamen und die Wahrscheinlichkeit erhöhen, wichtige Informationen zu übersehen.

Wie erstelle ich ein WordPress-Formular mit Datei-Upload? 

Nachdem Sie nun gesehen haben, in welchen Formen Dateiupload-Optionen nützlich sind, kommt nun der Teil, der anfangs oft verwirrend erscheint: das Erstellen und richtige Einrichten, ohne den Ablauf Ihres Formulars zu stören.

Das Gute daran ist, dass es in WordPress einfache Formular-Generatoren per Drag-and-Drop wie Bit Form gibt. Mit diesem Plugin ist das Erstellen eines Formulars zum Hochladen von Dateien in WordPress einfacher, als man denkt.

Und das Beste daran? Bit Form enthält ein Feld zum Hochladen von Dateien in der kostenlose Version. Außerdem wird das Plugin mit über 50 Formularfeldern und verschiedenen kostenlosen Funktionen geliefert, mit denen Sie unbegrenzte Formulare erstellen können, wie z. B. Mehrschrittformulare, Formulare mit bedingter Logik, Umgangssprachliche Formen, und vieles mehr.

Nun bauen wir das Datei-Upload-Formular Schritt für Schritt auf

Schritt 1: Installieren und Aktivieren von Bit Form

Falls Sie Bit Form noch nicht installiert haben, rufen Sie Ihr WordPress-Dashboard auf.

Sie können die übliche Methode anwenden: Navigieren Sie zu Plugins → Neu hinzufügenSuchen nach Bit Form und installieren und aktivieren Sie es. Oder, einfach Lade die Bit Form-Datei herunter von der Webseite.

Nach der Aktivierung wird in Ihrem Dashboard „Bit Form“ angezeigt.

Schritt 2: Erstellen einer neuen Formular mit Datei-Upload 

Klicke nun auf “+Formular erstellen”. Sie werden mehrere Optionen sehen, entweder von Grund auf neu zu beginnen oder eine vorgefertigte Vorlage zu verwenden.

Für diese Anleitung verwende ich eine einfache Kontaktformular-Vorlage.

Sie können das Formular auch entsprechend seinem Zweck umbenennen. Dies ist eine gute Vorgehensweise, wenn Sie mehrere Formulare verwalten.

Die Vorlage enthält bereits grundlegende Felder wie:

• Name
• E-Mail
• Nachricht

Sie müssen nun eine Datei-Upload-Option hinzufügen. 

Nachdem Sie sie hinzugefügt haben, besteht der nächste Schritt darin, die Feld-Einstellungen zu konfigurieren.

Schritt 3: Einstellungen für das Feld zum Hochladen von Dateien konfigurieren 

Gehe zum Einstellungsfenster des Feldes zum Hochladen von Dateien.

Lasst uns mit den Grundeinstellungen beginnen

• Fügen Sie eine klare Beschriftung hinzu, damit die Benutzer verstehen, was sie hochladen sollen
• Machen Sie das Feld erforderlich, wenn die Datei obligatorisch ist
• Fügen Sie bei Bedarf einen kurzen Hilfetext hinzu

Sie können Benutzern auch erlauben, Folgendes hochzuladen:

• Mehrere Dateien
• Verschiedene Dateitypen je nach Anwendungsfall

Dies sind Ihre Kernoptionen für den Datei-Upload.

Schritt 4: Als Nächstes wechseln Sie zu den erweiterten Einstellungen

Hier können Sie:

• Text des Upload-Buttons anpassen
• Fügen Sie Icons für bessere visuelle Klarheit hinzu
• Dateiauswahlstatus anzeigen

Sie können auch die Dateivorschau oder die Listenansicht aktivieren. Abgesehen davon gab es auch viele hilfreiche Funktionen. Diese Optionen helfen Benutzern zu verstehen, was sie hochgeladen haben, bevor sie das Formular absenden. Dies reduziert Fehler und verbessert das allgemeine Benutzererlebnis.

Nachdem Sie die Einrichtung abgeschlossen haben, vergessen Sie nicht, auf “Update”-Schaltfläche in der oberen rechten Ecke. 

An diesem Punkt ist Ihr WordPress-Formular mit Datei-Upload vollständig funktionsfähig.

Schritt 5: Gestalten Sie Ihr Formular

Sobald das Dateiupload-Feld bereit ist, können Sie das Formular-Design über den Tab "Style" anpassen. Sie können Ihr Dateiupload-Formular nach Belieben gestalten mit Bit Form’s Style-Editor Merkmal. 

Machen Sie es wie ich und wechseln Sie zum “Stil” Tab. Hier kann man schnell auf den Thema Schnelle Anpassungen Bedienfeld zum Anpassen von Hintergrundfarben, Schriftarten, Feldgrößen und anderen Elementen. Oder Sie können auch anpassen. globale Elemente oder die Formelemente gestalten einzeln. Die Änderungen werden live angezeigt, sodass es einfach ist, das Formular an das Design Ihrer Website anzupassen.

Wie man hochgeladene Dateien mit Cloud-Speicheroptionen verwaltet

Sie fragen sich nun sicher, wohin die hochgeladenen Dateien gelangen? Standardmäßig werden sie auf Ihrem Server gespeichert. Das funktioniert gut für kleine Formulare, aber das Problem tritt auf, wenn Sie größere Dateien verwalten müssen und die Einreichungen zunehmen.

Was passiert, wenn Dateien auf Ihrem Server gespeichert werden:

• Sie verbrauchen schnell Ihren Hosting-Speicherplatz
• Große Dateien können Ihre Website verlangsamen
• Die Verwaltung von Dateien wird mit der Zeit unübersichtlich
• Datensicherung und Wiederherstellung werden kritischer

Ein besserer Weg, Dateien zu verwalten

Anstatt sich nur auf Ihren Server zu verlassen, können Sie hochgeladene Dateien direkt in die Cloud senden.

Bit Form unterstützt gängige Cloud-Speicher-Integrationen wie Dropbox und Google Drive. In diesem Beispiel verwenden wir Dropbox.

Die Dropbox-Integration ist in der kostenlosen Version verfügbar, sodass Sie hochgeladene Dateien kostenlos an Dropbox senden können. Befolgen Sie die nachstehenden Schritte, um dies einzurichten:

Hinweis: Bit Form integriert sich mit über 50 Plattformen und Diensten, und alle sind kostenlos.

Schritt 1: Gehen Sie zu Integrationen

So ziehen Sie zum “Einstellungen” Panel aus dem Dashboard. Gehen Sie dann zu “Integrationen” vom linken Menü.

Dann suche nach Dropbox. 

Schritt 2: Dropbox verbinden

Sobald die App erscheint, klicken Sie darauf und ein Autorisierungsfenster wird angezeigt. Um Ihr Dropbox-Konto zu verbinden, autorisieren Sie zuerst die Dropbox-App mit API-Schlüssel, Geheimnis und Zugriffscode. 

Sobald Sie die Autorisierung abgeschlossen haben, wird die Integration aktiv.

Schritt 3: Feld für den Datei-Upload zuordnen

Nachdem Dropbox verbunden ist, sind, wie Sie auf dem Bild sehen können, nur noch zwei weitere Schritte übrig.

Im zweiten Schritt müssen Sie das Dateieingabefeld mit dem Dropbox-Ordner damit die Dateien am richtigen Ort ankommen.

Es gibt auch die Option, Dateien von Ihrem WordPress-Server zu entfernen, nachdem sie auf Dropbox hochgeladen wurden. Aktivieren Sie diese, wenn Sie Ihren Server sauber halten möchten.

Klick Weiter, dann schließen Sie die Einrichtung ab.

Schritt 4: Speichern Sie die Integration

Klicken Sie auf “Fertig und speichern” Und schon ist die Integration Ihres Cloud-Speichers abgeschlossen!

Schritt 5: Auslöser für den Datei-Upload festlegen

Nachdem Sie Ihr Dropbox-Konto verbunden haben, müssen Sie dem Formular mitteilen, wann Dateien an Dropbox gesendet werden sollen.

Gehen Sie zum Bedingte Logik Einstellungen. Sie sehen eine Standardbedingung mit dem Namen Erfolgsmeldung. Klicken Sie darauf und behalten Sie die bestehenden Einstellungen unverändert bei.

Scrolle jetzt nach unten zu Zusätzliche Einstellungen. Wählen Sie hier die soeben erstellte Dropbox-Integration aus. Dadurch wird die Formularübermittlung mit Ihrem Cloud-Speicher verknüpft.

Speichern Sie die Einstellungen, sobald Sie fertig sind. Testen Sie nun Ihr Formular: Laden Sie eine Datei über das Formular hoch und überprüfen Sie den ausgewählten Dropbox-Ordner. Es sollte einwandfrei funktionieren.

So halten Sie Ihr Datei-Upload-Formular sicher, ohne die Benutzererfahrung zu beeinträchtigen

Das Hinzufügen eines Formulars mit Datei-Upload bringt immer eine Sorge mit sich: Was, wenn jemand etwas Schädliches hochlädt? Mit einigen klugen Entscheidungen lassen sich die Probleme jedoch schneller lösen.

Die meisten Probleme treten auf, wenn Formulare zu offen gelassen werden. Zum Beispiel, wenn man erlaubt jeder Dateityp und unbegrenzte Dateigröße mag flexibel erscheinen, macht Ihre Website aber anfällig für Angriffe und verlangsamt sie.

Beginnen Sie mit der Dateitypsteuerung. Lassen Sie nur Formate zu, die Sie tatsächlich benötigen. Verwenden Sie beispielsweise das PDF- oder DOCX-Format für Dokumente und das JPG- oder PNG-Format für Bilder.

Dateigröße ist die nächste Sache, die verwaltet werden mussWenn es keine Begrenzung gibt, können Benutzer große Dateien hochladen, was die Leistung Ihrer Website beeinträchtigen kann. Richten Sie also ein Limit ein, um eine unnötige Belastung Ihres Systems zu vermeiden.

Speicher spielt für die Sicherheit eine Rolle. Wenn Dateien nur auf Ihrem Server gespeichert werden, hängt alles von Ihrer Hosting-Umgebung ab. Wie im früheren Abschnitt beschrieben, reduziert die Nutzung von Cloud-Speicher diese Abhängigkeit und gibt Ihnen eine bessere Kontrolle über Ihre Dateien.

Du solltest auch Spam erwarten. WordPress-Formulare ziehen häufig automatisierte Eingaben an. Ein einfaches CAPTCHA Eine Validierungsschicht reicht in der Regel aus, um das meiste davon abzufangen, ohne die Bedienbarkeit des Formulars zu beeinträchtigen.

Wenn Sie sensible Dokumente sammeln wie Verträge oder medizinische Unterlagen, kannst du die Einstellungen von Bit Form nutzen, um Öffentlichen Eintrag ansehen deaktivieren und den Zugriff auf angemeldete Benutzer beschränken. So bleiben hochgeladene Dateien für alle ohne Konto unzugänglich.

Überprüfen Sie schließlich gelegentlich hochgeladene Dateien, und das Entfernen dessen, was Sie nicht mehr benötigen, erleichtert die Verwaltung Ihres Systems.

Bonus: Das erweiterte Feld für den Datei-Upload (Pro)

Wenn Sie upgraden auf Bit Form Pro (ab $29/Jahr), erhalten Sie Zugang zu einem größeren erweitertes Datei-Upload-Feld das gibt Ihnen mehr Kontrolle über das Upload-Erlebnis.

Hier ist, was das erweiterte Feld für Datei-Uploads unterstützt:

• Ziehen und Ablegen Benutzer können Dateien direkt vom Desktop in den Upload-Bereich ziehen, anstatt sich durch einen Dateibrowser zu klicken.
• Kopieren und Einfügen Dateien können direkt aus der Zwischenablage in das Feld eingefügt werden.
• Datei-Neuanordnung: Benutzer können die Reihenfolge der ausgewählten Dateien vor der Übermittlung ändern.
• Kameraaufnahme: Auf Mobilgeräten können Benutzer ein Foto direkt über das Formular mit der Front- oder Rückkamera aufnehmen, ohne die Seite zu verlassen.
• Kompakte und erweiterte Layoutoptionen Wählen Sie aus, wie das Upload-Fenster angezeigt werden soll: entweder in einer einzigen Zeile oder in einer erweiterten Ansicht.
• Dateistil-Anpassung: Steuern Sie das visuelle Erscheinungsbild der Upload-Schaltfläche, einschließlich der Stile nur mit Symbol, klassisch und flach.

Sie benötigen jedoch nicht unbedingt die Premium-Tarif um ein Standard-WordPress-Dateiupload-Formular zu erstellen.

Die Pro-Version ist eine Überlegung wert, wenn Ihr Arbeitsablauf speziell Drag-and-Drop-Uploads, die Aufnahme per Handykamera oder ein individuelleres Upload-Layout erfordert. Wenn Ihnen derzeit keines dieser Features wichtig erscheint, reicht die kostenlose Version völlig aus, um ein Standard-WordPress-Formular mit einem Feld für Datei-Uploads zu erstellen.

Abschließende Überlegungen

Ich hoffe, Sie sind bisher klar, dass das Sammeln von Dateien in einem Formular nicht kompliziert ist. Sie benötigen keine komplexe Einrichtung oder ein kostenpflichtiges Plugin, um ein einfaches Dateiupload-Formular zu erstellen.

Das Erstellen eines Formulars mit einer Option zum Hochladen von Dateien ist ganz einfach, wenn der Formular-Generator die richtigen Felder und klare Anweisungen bietet. Mit diesem Plugin habe ich hier die Dateitypen und -größen festgelegt, das Formular angepasst und die hochgeladenen Dateien an einen Cloud-Speicher wie Dropbox gesendet.

Wenn also das nächste Mal jemand Ihnen einen Lebenslauf, einen Screenshot oder ein Dokument zusenden muss, muss er nicht mehr in seinem Posteingang stöbern, um eine E-Mail zu senden. Sie können es direkt über Ihre Website einreichen.

Häufig gestellte Fragen