So erstellen Sie ein WordPress-Formular mit mehreren Datei-Uploads

Möchten Sie, dass Ihre Benutzer mehrere Dateien über Ihre WordPress-Formulare hochladen können? Sie sind hier genau richtig. In diesem Leitfaden führe ich Sie durch die Erstellung professionell aussehender Formulare mit mehreren Dateiupload-Feldern – ganz ohne Code.

Diese Methode eignet sich perfekt zum Sammeln von Portfolios, Dokumentationen oder jeder Situation, in der Benutzer mehrere Dateien gleichzeitig einreichen müssen.

Erstellen Sie jetzt Ihr WordPress-Formular

So ermöglichen Sie mehrere Dateiuploads für WordPress-Kontaktformulare

Wenn Sie Ihren Website-Besuchern die Möglichkeit geben, eine Datei in Ihrem WordPress-Formular hochzuladen, wird es für Sie einfacher, die benötigten Informationen zu sammeln. Aber manchmal benötigen Sie mehr als nur eine Datei von ihnen. Wenn Sie beispielsweise ein Bewerbungsformular haben, müssen Sie möglicherweise einen Lebenslauf sowie ein Anschreiben sammeln.

WPForms ist eine großartige Option für ein Dateiupload-Plugin, wenn Sie die einfache Erstellung eines Dateiupload-Feldes mit einem Drag-and-Drop-Formularersteller wünschen. Standardmäßig erlaubt das WPForms Dateiupload-Feld Benutzern, mehrere Dateien gleichzeitig hochzuladen. Alles, was Sie tun müssen, ist, das Feld zu Ihrem Formular hinzuzufügen.

Hier sind die Themen, die ich in diesem Tutorial behandeln werde:

Bereit? Fangen wir an!

Schritt 1: Erstellen Sie ein Dateiupload-Formular in WordPress

Für dieses Tutorial gehe ich davon aus, dass Sie Ihr Formular noch nicht erstellt haben und von Anfang an beginnen. Wenn Sie bereits ein Formular haben und nur sehen möchten, wie Sie ein Dateiupload-Feld hinzufügen, erfahren Sie in diesem ersten Schritt, wie Sie das Feld einfach in den Editor Ihres Formulars ziehen.

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 Bereich auf WPForms » Neu hinzufügen, um ein neues Formular zu erstellen und ihm einen Namen zu geben. Sie können jeden beliebigen Namen wählen.

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.

WPForms wird nun ein vordefiniertes Dateiupload-Formular erstellen und den Drag-and-Drop-Builder anzeigen.

Hier können Sie zusätzliche Felder zu Ihrem Kontaktformular hinzufügen, indem Sie sie aus dem linken Bereich in den Vorschau-Bereich auf der rechten Seite ziehen.

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 nach oben oder unten ziehen, um die Reihenfolge in Ihrem Formular zu ändern.

Hinweis: Sie können das Dateiupload-Feld zu jedem WordPress-Formular hinzufügen, das Sie erstellen. Ziehen Sie einfach das Dateiupload-Formularfeld unter Fancy Fields aus dem linken Bereich des Formular-Builders in den Vorschau-Bereich.

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

Sie können auf das Dateiupload-Feld klicken, um seine Feldoptionen zu öffnen.

Hier können Sie Folgendes ändern:

• Label — Benennen Sie das Formularfeld, damit Ihre Website-Besucher wissen, wofür es bestimmt 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.
• Max. Dateigröße — Geben Sie die maximale Dateigröße in Megabyte an, die Benutzer hochladen können. Wenn Sie dieses Feld leer lassen, verwendet WPForms standardmäßig die maximale Dateigröße, die Ihr Webhost zulässt. Wenn Sie dies ändern müssen, lesen Sie dieses Tutorial, wie Sie die maximale Dateiuploadgröße in WordPress erhöhen.
• Max. Datei-Uploads — Legen Sie die maximale Anzahl von Dateien fest, die Benutzer zu diesem Formular hinzufügen können.
• Erforderlich — Wenn Benutzer eine Datei hochladen müssen, bevor sie ihr Formular absenden können, aktivieren Sie diese Option.

Nachdem Sie die allgemeinen Feldoptionen angepasst haben, klicken Sie auf die Registerkarte Erweitert. Stellen Sie hier sicher, dass die Art auf Modern eingestellt ist.

Dies ist wichtig, da der klassische Stil keine Mehrfach-Datei-Uploads zulässt.

Fragen Sie sich, wo diese Datei-Uploads gespeichert werden?

Standardmäßig werden alle von Benutzern hochgeladenen Dateien im WPForms-Ordner im Uploads-Verzeichnis Ihrer Website gespeichert. Um die Sache zu vereinfachen, können Sie diese Dateien auch in Ihrer WordPress-Mediathek speichern, indem Sie die Option Feld in WordPress-Mediathek speichern aktivieren.

Wenn Sie den Zugriff auf hochgeladene Dateien einschränken möchten, ist das in WPForms ganz einfach. Im Tab Erweitert des Datei-Upload-Felds finden Sie auch einen Schalter zum Einschränken des Dateizugriffs aktivieren.

Wenn Sie diese Option wählen, können Sie den Zugriff per Passwortschutz einschränken oder ihn basierend auf Benutzerrollen einschränken. Wenn Sie Benutzerrollen auswählen, muss der Benutzer angemeldet sein, um auf die hochgeladenen Dateien zugreifen zu können.

Ich zeige Ihnen auch, wie Sie von der Einträge-Ansicht und in den E-Mail-Benachrichtigungen Ihres Formulars auf hochgeladene Dateien zugreifen können.

Sie können Formulare großartig aussehen lassen, indem Sie die Schritte in unserem Beitrag zur Erstellung eines mehrstufigen Formulars in WordPress befolgen. Aber der Einfachheit halber bleiben wir in diesem Tutorial bei einer einzelnen Seite.

Schritt 3: Passen Sie Ihre Formulareinstellungen 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 Ihrem Formular Tags hinzu, um Ihre WordPress-Formulare organisiert zu halten.
• Text der Schaltfläche „Senden“ — Passen Sie den Text auf der Schaltfläche „Senden“ an.
• Text bei Button-Verarbeitung — Ändern Sie den Text, der angezeigt wird, während Ihr Formular verarbeitet wird.

Sie können auch die Erweiterten Einstellungen erweitern, um die folgenden Optionen zu konfigurieren:

• CSS-Klassen — Fügen Sie Ihrem Formular oder der Schaltfläche „Senden“ benutzerdefiniertes CSS hinzu.
• Vorausfüllen per URL — Füllen Sie einige Felder automatisch basierend auf einer benutzerdefinierten 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.

Sobald Sie mit den allgemeinen Einstellungen fertig sind, klicken Sie auf die Einstellungen für Spam-Schutz und Sicherheit.

• 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 Einreichungen zu verhindern.
• Länderfilter aktivieren — Blockieren Sie Einreichungen aus bestimmten Ländern.
• Schlüsselwortfilter aktivieren — Verhindern Sie Einreichungen, die bestimmte Wörter oder Phrasen enthalten.

Sie können auch ein CAPTCHA einrichten, um Spam-Einträge zu blockieren. Lesen Sie unsere vollständige Anleitung zu Anti-Spam-Einstellungen für weitere Details.

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 eines Ihrer Formulare absendet.

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 außerdem Smart Tags verwenden, können Sie Ihren Website-Besuchern 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.

Um die hochgeladenen Dateien in Ihre E-Mail-Benachrichtigung aufzunehmen, verwenden Sie ein Smart Tag, um den Inhalt des Feldes für den Dateiupload in den E-Mail-Text einzufügen. Dies fügt Links hinzu, auf die Sie klicken können, um die hochgeladenen Dateien anzuzeigen.

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

Wenn Sie die hochgeladenen Dateien lieber als E-Mail-Anhänge beifügen möchten, scrollen Sie zum Ende Ihrer Benachrichtigung und erweitern Sie die Erweiterten Einstellungen. Schalten Sie dann die Einstellung Dateiupload-Anhänge aktivieren ein.

Beachten Sie, dass einige E-Mail-Anbieter keine E-Mails mit großen Anhängen zustellen. Sie können die maximale Dateigröße in den Feldoptionen ändern, wie wir in Schritt 2 gezeigt haben.

Zusätzlich haben Sie die Möglichkeit, Ihre Benachrichtigungs-E-Mails einfach zu branden, indem Sie Ihr Logo oder ein beliebiges Bild Ihrer Wahl im benutzerdefinierten Kopfzeilenbildbereich hinzufügen. Das von Ihnen gewählte Bild wird oben in den E-Mail-Benachrichtigungen angezeigt, ähnlich wie das WPForms-Logo unten.

Schritt 5: Konfigurieren Sie die Bestätigungen Ihres Formulars

Formularbestätigungen sind Möglichkeiten, sofort (und automatisch) Maßnahmen zu ergreifen, nachdem Ihr Benutzer Informationen über Ihr Formular übermittelt hat. Für zusätzliche Hilfe bei diesem Schritt lesen Sie unser Tutorial zur Einrichtung 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 — Benutzer automatisch zu einer beliebigen Seite auf Ihrer Website weiterleiten, 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-Generator 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 sind Sie bereit, Ihr Formular zu Ihrer Website hinzuzufügen.

Schritt 6: Fügen Sie Ihr Formular zu Ihrer Website hinzu

Nachdem Sie Ihr Formular erstellt haben, müssen Sie es zu 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 Seitenleisten-Widgets.

Werfen wir also einen Blick auf die gängigste Platzierungsoption: das Einbetten in Seiten oder Beiträge.

Erstellen Sie zunächst eine neue Seite oder einen neuen Beitrag in WordPress oder öffnen Sie eine vorhandene im Editor. Fügen Sie danach einen neuen Block hinzu und wählen Sie WPForms. Sie können danach suchen, wenn Sie es nicht sofort sehen.

Nun erscheint das WPForms-Widget in Ihrem Block. Klicken Sie auf das WPForms-Dropdown und wählen Sie das zuvor erstellte Dateiupload-Formular aus, das Sie in Ihre Seite einfügen möchten.

Klicken Sie als Nächstes auf die blaue Schaltfläche oben rechts, auf der entweder Veröffentlichen oder Aktualisieren steht, damit Ihr Formular auf Ihrer Website erscheint.

Das war's! Ihr Formular ist jetzt auf Ihrer Website.

Schritt 7: Zeigen Sie die Dateien an

WPForms speichert jede Formularübermittlung als Eintrag. Um hochgeladene Dateien anzuzeigen, gehen Sie zu WPForms » Einträge.

Und von dort wählen Sie das richtige Formular aus dem Dropdown-Menü aus und klicken Sie auf Anzeigen.

Hier können Sie die Dateiuploads für diesen Eintrag anzeigen oder herunterladen.

Besser noch, Sie können unser Zapier-Addon verwenden, um alle Dateiuploads automatisch in verschiedenen Web-Apps zu speichern, wie zum Beispiel:

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

Erstellen Sie jetzt Ihr Formular für mehrere Dateiuploads

FAQ – WordPress-Dateiuploads

Welche Arten von Dateien können in WordPress hochgeladen werden?

Das WPForms-Plugin erleichtert es Ihren Website-Besuchern, alle Arten von Dateitypen in Ihre Kontaktformulare hochzuladen. Sie können ein Feld für den Dateiupload einbetten, um Folgendes hochzuladen:

• Dokumente (.doc, .xls, .ppt und .pdf)
• Bilder (.png, .gif und .jpg)
• Video (.mpg, .mov und .wmv)
• Audio (.wav, .mp3 und .mp4)

Sie können diesen gleichen Prozess verwenden, um CSV-Datei-Uploads in WordPress zu akzeptieren.

Aber aus WordPress-Sicherheitsgründen können einige Dateien nicht hochgeladen werden. Zum Beispiel können Sie Bilder in WordPress hochladen, aber Sie stellen möglicherweise fest, dass einige Smartphone-Formate blockiert sind.

Wenn Sie auf dieses Problem stoßen, erfahren Sie hier, wie Sie zusätzliche Dateiupload-Typen für Ihre Formulare zulassen. Und hier ist eine spezifischere Anleitung, um Adobe Illustrator-Datei-Uploads zuzulassen.

Nehmen Sie als Nächstes Zahlungen in Ihren WordPress-Formularen entgegen

Da haben Sie es! Sie wissen jetzt, wie Sie ein WordPress-Formular mit mehreren Dateiuploads erstellen. Sie können auch ein Zahlungsfeld hinzufügen und eine Zahlung mit Ihren Dateiuploads verlangen.

Und wenn Ihnen dieser Artikel gefallen hat, möchten Sie vielleicht auch einige coole Designbeispiele für Kontaktseiten ansehen.

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.