Wie man ein Datei-Upload-Widget in WordPress erstellt

Wenn Sie den Nutzern die Möglichkeit geben, Dateien und Medien zu den Formularen Ihrer Website hinzuzufügen, können Sie die benötigten Informationen viel einfacher erfassen. Deshalb brauchen Sie ein Datei-Upload-Widget.

Vielleicht machen Sie sich Gedanken darüber, wie Sie den Prozess nahtlos gestalten können, ohne sich mit komplexer Codierung oder unzuverlässigen Plugins herumschlagen zu müssen. Ich verstehe das sehr gut - niemand möchte Stunden mit der Fehlersuche für etwas verbringen, das einfach sein sollte.

Deshalb zeige ich Ihnen in dieser Anleitung, wie Sie ein Datei-Upload-Widget in WordPress erstellen, um Dateien von Ihren Website-Besuchern zu akzeptieren.

Erstellen Sie jetzt Ihr WordPress File Upload Widget Formular 🙂

Wie man ein Datei-Upload-Widget in WordPress erstellt

Je nach Art der Informationen, die Sie in Ihrem Formular erfassen möchten, ist die Verwendung eines WordPress-Upload-Widgets eine der besten Möglichkeiten, um schnell und einfach mehr Informationen von Ihren Nutzern zu erhalten.

Dies wäre zum Beispiel eine großartige Formularplatzierung, damit Besucher Bilder in WordPress hochladen können. Formulare, die leichter auszufüllen und zugänglicher sind, tragen dazu bei, die Abbruchrate zu senken, 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 wechseln, 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 Datei-Upload-Widget in WordPress erstellen, oder Sie können den schriftlichen Anweisungen folgen.

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

Schritt 1: Erstellen Sie Ihr Dateiupload-Formular in WordPress

WPForms ist das beste Plugin für Datei-Uploads. Im Gegensatz zu der Google Forms Upload-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 Einzelheiten zur Installation finden Sie in dieser Schritt-für-Schritt-Anleitung zur Installation eines Plugins in WordPress.

Gehen Sie als Nächstes in Ihr WordPress-Dashboard und klicken Sie im linken Menü auf WPForms " Add New, um ein neues Formular zu erstellen und es nach Ihren Wünschen zu benennen.

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

Jetzt wird WPForms ein vorgefertigtes Dateiupload-Formular ausfüllen und den Drag-and-Drop-Builder anzeigen.

Hier können Sie zusätzliche Felder zu Ihrem Formular hinzufügen, indem Sie sie aus dem linken Bereich in den rechten Vorschaubereich ziehen. Sie können auch Felder entfernen, um sicherzustellen, dass Ihr Formular gut in Ihr Upload-Widget passt, sobald Sie es in Schritt 6 hinzugefügt haben.

In der Vorlage für das Datei-Upload-Formular sind die Felder Name, E-Mail, Telefon, Datei-Upload und zusätzliche Kommentare bereits vorhanden.

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 werden wir die Felder "Telefon" und "Zusätzliche Kommentare" entfernen, um das Formular zu verkleinern, damit es besser in unser Widget passt. Klicken Sie einfach auf das Papierkorbsymbol, um ein Feld zu entfernen.

Denken Sie daran, dass Sie das Dateiupload-Feld auch zu jedem WordPress-Formular hinzufügen können , das Sie erstellen. Ziehen Sie einfach das Formularfeld File Upload, das Sie unter Fancy Fields finden, vom linken Bedienfeld in den Vorschaubereich.

Schritt 2: Konfigurieren Sie die Feldoptionen für den Dateiupload

Sie können Ihr Datei-Upload-Feld anpassen, indem Sie darauf klicken, um die Feldoptionen zu öffnen.

Hier können Sie das ändern:

• Beschriftung - Benennen Sie das Formularfeld, damit Ihre Website-Besucher wissen, wofür es gedacht ist.
• Beschreibung - Fügen Sie eine Beschreibung hinzu, die den Benutzern Details erklärt. Wenn Sie zum Beispiel möchten, dass die Benutzer nur ein Bild hochladen, sagen Sie ihnen das.
• Erlaubte Dateierweiterungen - Wenn Sie die Dateitypen, die in Ihr WordPress-Formular hochgeladen werden können, einschränken möchten, geben Sie sie hier ein, jeweils durch ein Komma getrennt
• Max File Size - Geben Sie die maximale Dateigröße in Megabyte an, die Benutzer hochladen dürfen. Wenn Sie hier keine Zahl eingeben, wird WPForms standardmäßig die maximale Dateigröße verwenden, die Ihr Server zulässt. Wenn Sie dies ändern möchten, lesen Sie dieses Tutorial, wie Sie die maximale Dateigröße in WordPress erhöhen können.
• Maximale Datei-Uploads - Wenn Sie das moderne Datei-Upload-Feld verwenden, können Sie eine Grenze für die Anzahl der Dateien festlegen, die Benutzer gleichzeitig hochladen können.
• Erforderlich - Wenn Sie möchten, dass Benutzer eine Datei hochladen müssen, bevor sie ihr Formular abschicken können, aktivieren Sie dieses Kontrollkästchen.

Auf der Registerkarte Erweitert sind weitere Optionen verfügbar.

• Stil - Sie können zwischen dem Standardstil Modern und dem Stil Klassisch wechseln. Mit dem modernen Feld Upload können Benutzer Dateien per Drag & Drop in Ihr Formular ziehen und mehrere Dateien hochladen. Im klassischen Stil können Benutzer über die Schaltfläche "Datei auswählen" eine Datei von ihrem Computer auswählen.
• Dateien in der WordPress-Mediathek speichern - Standardmäßig werden alle von Benutzern hochgeladenen Dateien im Ordner WPForms im Uploads-Verzeichnis Ihrer Website gespeichert. Um die Dinge zu vereinfachen, können Sie diese Dateien auch in Ihrer WordPress-Medienbibliothek speichern.
• Aktivieren Sie Dateizugriffsbeschränkungen - Schränken Sie den Zugriff auf hochgeladene Dateien auf der Grundlage von Benutzerrollen oder durch Hinzufügen eines Passwortschutzes ein.
• Beschriftung ausblenden - Die Beschriftung des Formularfeldes ausblenden

Sie können Formulare auch großartig aussehen lassen, indem Sie die Schritte in unserem Beitrag über die Erstellung eines mehrstufigen Formulars in WordPress befolgen. Aber für dieses Tutorial bleiben wir bei einer einzelnen Seite.

Wenn Ihr Formular wie gewünscht aussieht, klicken Sie auf Speichern in der oberen rechten Ecke des Formularerstellers.

Schritt 3: Anpassen der Einstellungen für das Dateiupload-Formular

Gehen Sie zunächst zu Einstellungen " Allgemein.

Hier können Sie die folgenden Einstellungen vornehmen:

• 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 Übermittlungsschaltfläche - Passen Sie den Text der Übermittlungsschaltfläche an.
• Submit Button Processing Text - Ändern Sie den Text, der angezeigt wird, während Ihr Formular abgeschickt wird.

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

• CSS-Klassen - Fügen Sie Ihrem Formular oder Ihrer Übermittlungsschaltfläche benutzerdefinierte CSS hinzu.
• Ausfüllen nach URL - Automatisches Ausfüllen einiger Felder auf der Grundlage einer URL.
• AJAX-Formularübermittlung aktivieren - Aktiviert AJAX-Einstellungen, ohne dass die Seite neu geladen wird.
• Deaktivieren Sie die Speicherung von Eingabedaten in WordPress - Sie können die Speicherung von Eingabedaten und Benutzerdetails, wie IP-Adressen und Benutzer-Agenten, deaktivieren, um die GDPR-Anforderungen zu erfüllen. Sehen Sie sich unsere Schritt-für-Schritt-Anleitung zum Hinzufügen eines GDPR-Einwilligungsfeldes zu Ihrem einfachen Kontaktformular an.

Wenn Sie mit den allgemeinen Einstellungen fertig sind, gehen Sie nach unten zu den Einstellungen für Spamschutz und Sicherheit.

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

• Aktivieren Sie den Spam-Schutz - Stoppen Sie Spam in Kontaktformularen mit der Anti-Spam-Funktion, hCaptcha oder Google reCAPTCHA. Das Anti-Spam-Kontrollkästchen wird automatisch bei allen neuen Formularen aktiviert.
• Aktivieren Sie den Akismet-Spamschutz - Wenn Sie das Akismet-Plugin zur Verwaltung von Spam 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 Beiträge, die bestimmte Wörter oder Ausdrücke enthalten.

Wenn Sie fertig sind, klicken Sie auf " Speichern".

Schritt 4: Konfigurieren Sie die Benachrichtigungen für Ihr Formular

Benachrichtigungen sind eine hervorragende Möglichkeit, um zu erfahren, wenn jemand eine Datei an Ihr WordPress-Upload-Widget sendet.

Und wenn Sie die Benachrichtigungsfunktion nicht deaktivieren, erhalten Sie eine E-Mail-Benachrichtigung, sobald jemand ein Formular auf Ihrer Website ausfüllt.

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

Wenn Sie Smart Tags verwenden, können Sie außerdem eine personalisierte Benachrichtigung an Ihre Website-Besucher senden, sobald sie Ihr Formular ausgefüllt haben, um sie wissen zu lassen, dass Sie es erhalten haben. Dies gibt den Nutzern die Sicherheit, dass ihr Formular zusammen mit dem Datei-Upload ordnungsgemäß übermittelt wurde.

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

Sie können auch Smart Tags verwenden, um einen Link zu der hochgeladenen Datei des Eintrags in die E-Mail-Benachrichtigung einzufügen.

Wenn Sie möchten, können Sie die Datei auch als Anhang mitschicken. Blättern Sie einfach zu den erweiterten Einstellungen für Ihre Meldung und aktivieren Sie Dateianhänge.

Denken Sie daran, dass E-Mail-Anbieter manchmal Beschränkungen für die Größe von E-Mail-Anhängen haben. Große Anhänge können verhindern, dass Ihre E-Mails ordnungsgemäß zugestellt werden.

Schließlich haben Sie die Möglichkeit, Ihre Benachrichtigungs-E-Mails leicht zu kennzeichnen, indem Sie Ihr Logo oder ein beliebiges Bild, das Sie in der benutzerdefinierten Kopfzeile Bildbereich wählen. Das Logo/Bild, das Sie wählen, wird am Anfang der E-Mail-Benachrichtigungen wie das WPForms-Logo unten angezeigt.

Schritt 5: Konfigurieren Sie die Bestätigungen für Ihr Dateiupload-Formular

Formularbestätigungen sind eine Möglichkeit, sofort (und automatisch) Maßnahmen zu ergreifen, nachdem Ihr Benutzer Informationen an Ihr WordPress-Upload-Widget übermittelt hat. Weitere Hilfe zu diesem Schritt finden Sie in unserem Tutorial zur Einrichtung von Formularbestätigungen.

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

1. Nachricht - Dies ist die standardmäßige Bestätigungsart, die angezeigt wird, nachdem jemand auf "Senden" in Ihrem Formular geklickt hat, und sie ist anpassbar. Lesen Sie unsere Tipps, wie Sie Ihre Bestätigungsnachricht anpassen können, um die Zufriedenheit Ihrer Website-Besucher zu steigern.
2. Seite anzeigen - Schicken Sie Nutzer automatisch auf eine beliebige Seite Ihrer Website, z. B. eine Dankesseite.
3. Redirect - Nützlich, wenn Sie den Benutzer auf eine andere Website oder eine spezielle URL für komplexere Entwicklungen weiterleiten möchten.

So lassen Sie uns sehen, wie man eine einfache Form Bestätigung in WPForms, so dass Sie die Erfolgsmeldung Website-Besucher sehen, wenn sie ein Formular auf Ihrer Website senden anpassen können.

Klicken Sie zunächst im Formulareditor unter Einstellungen auf die Registerkarte Bestätigungen.

Wählen Sie dann die Art der Bestätigung, die Sie erstellen möchten. Für dieses 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 Datei-Upload-Formular zu einem Widget hinzu

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

Mit WPForms können Sie Ihre Formulare an mehreren Stellen auf Ihrer Website hinzufü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 in Ihrem WordPress-Dashboard auf das linke Menü und klicken Sie auf Erscheinungsbild " 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 Dateiupload-Formular hinzufügen möchten. In unserem Beispiel werden wir es in der Seitenleiste platzieren.

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

Als nächstes wählen Sie Ihr Datei-Upload-Formular aus dem Dropdown-Menü im WPForms-Block.

Ihr Datei-Upload-Formular wird in das Widget geladen. Jetzt müssen Sie nur noch auf die Schaltfläche Aktualisieren klicken, damit Ihr Datei-Upload-Widget aktiv wird.

Das war's! 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 einen 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 einem einzelnen Eintrag 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 auf die Datei klicken, um sie in Ihrem Browser anzuzeigen.

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

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

Und um herauszufinden, wie die Besucher Ihr Upload-Formular und Ihre Website finden, lesen Sie unsere Anleitung zur Installation von Google Analytics auf WordPress.

FAQs - Wie man ein Datei-Upload-Widget in WordPress erstellt

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 " File Upload" hinzu. Dann betten Sie das Formular auf der gewünschten Seite oder im Widget-Bereich ein.

Unterstützt WordPress das Hochladen von Dateien?

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, so dass die Benutzer Dateien direkt über Ihre Website übermitteln können.

Wie erlaube ich jemandem, eine Datei in WordPress hochzuladen?

Um jemandem zu ermöglichen, eine Datei auf Ihre WordPress-Site hochzuladen, 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 eine Schaltfläche zum Hochladen von Bildern in WordPress hinzu?

Um eine Schaltfläche zum Hochladen von Bildern in WordPress hinzuzufügen, können Sie WPForms verwenden. Erstellen Sie ein Formular und fügen Sie das Feld "File Upload" ein, das so konfiguriert werden kann, dass es Bilddateien akzeptiert. Auf diese Weise können Benutzer auf einfache Weise Bilder über Ihre Website hochladen.

Weiter, Adobe Illustrator Uploads in WordPress zulassen

Wenn Sie Dateien von Designern akzeptieren möchten, sollten Sie sich ansehen, wie Sie den Upload von Adobe Illustrator (AI) in WordPress aktivieren. Schauen Sie sich auch unseren Beitrag mit tollen Tipps für das Marketing von Kleinunternehmen an, die Sie noch heute ausprobieren können.

Erstellen Sie jetzt Ihr WordPress-Formular

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

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