> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Upload-Modul für Formulare mit INQUIRY

> Das Upload-Modul mit dem Formularprogramm INQUIRY verbinden, sodass Kunden beim Absenden eines Formulars eine Datei mitschicken können.

Manche Formulare sind ohne Anhang wertlos. Eine B2B-Neukundenanmeldung braucht den Gewerbenachweis, eine Altersfreigabe den Ausweisscan. Die Kombination aus dem Formularprogramm INQUIRY und dem Upload-Modul erlaubt genau das: Der Kunde füllt ein Formular aus und lädt im selben Zug eine Datei hoch.

Diese Seite zeigt den Fall der B2B-Neukundenanmeldung mit Gewerbenachweis. Das Vorgehen ist auf jeden anderen Formularfall übertragbar.

Die Grundlagen von INQUIRY selbst stehen nicht auf dieser Seite. Wenn Sie noch kein Formular mit INQUIRY gebaut haben, beginnen Sie dort.

Wegweiser: [Formulare für Kundenanfragen](https://dokumentation.websale.de/v8s/formulare-fuer-kundenanfragen/formulare-fuer-kundenanfragen.md)

Materialien: Materialien zu INQUIRY

Dokumentation: [Formulare mit INQUIRY4](https://dokumentation.websale.de/v8s/upload-modul/formulare-mit-inquiry4.md)

## Die Bestandteile

Ein INQUIRY-Formular mit Upload besteht aus bis zu acht Dateien. Die Namen im Beispiel sind frei gewählt, die Zusammenhänge dazwischen nicht.

| Datei | Art | Wofür |
| - | - | - |
| `tpl_anmeldung.htm` | Shop-Template | die Seite, auf der das Formular erscheint |
| `anmeldung.config` | Konfiguration | die Formularkonfiguration von INQUIRY |
| `inquiry_anmeldung.htm` | Template | die Eingabefelder |
| `inquiry_anmeldung_antwort.htm` | Template | die Bestätigung nach dem Absenden |
| `anmeldung_upload.config` | Konfiguration | die Konfiguration des Upload-Moduls |
| `inquiry_anmeldung_upload.htm` | Template | der Datei-Upload im iframe |
| `mail_anmeldung_inquiryemail.htm` | Template, optional | die Benachrichtigung an Sie |
| `mail_anmeldung_confirmemail.htm` | Template, optional | die Bestätigung an den Kunden |

## Die Namenskette

Diese acht Dateien verweisen aufeinander. **Jeder dieser Verweise ist eine Stelle, an der ein Tippfehler die Funktion still abschaltet.** Die folgende Tabelle ist deshalb die eigentliche Arbeitsgrundlage dieser Seite.

| Diese Angabe | muss übereinstimmen mit |
| - | - |
| `cfg=` im Aufruf `WS-ExternInclude()` | dem Dateinamen der Formularkonfiguration |
| `InquiryPage` in `anmeldung.config` | dem Dateinamen des Eingabetemplates |
| `ConfirmPage` in `anmeldung.config` | dem Dateinamen des Bestätigungstemplates |
| `UploadIni` im Abschnitt `<Upload>` von `anmeldung.config` | dem Dateinamen der Upload-Konfiguration |
| `Upload` im Abschnitt `<Templates>` von `anmeldung_upload.config` | dem Dateinamen des Upload-Templates |
| Parameter von `FORM-SSLTemplate()` | dem Dateinamen des Shop-Templates |
| der Name, den Sie WEBSALE in Schritt 1 nennen | dem Dateinamen der Formularkonfiguration |

> [!WARNING]
>
> Der letzte Eintrag ist der unsichtbarste. WEBSALE legt bei der Freischaltung einen Abschnitt an, dessen Name aus dem Dateinamen Ihrer Formularkonfiguration gebildet wird. Benennen Sie die Konfigurationsdatei später um, ist der Upload zu diesem Formular abgeschaltet, und in Ihrer eigenen Konfiguration steht nichts, was darauf hinweist.

## Schritt 1: Freischaltung

Lassen Sie das Upload-Modul von der WEBSALE AG freischalten und klären Sie dabei folgende Punkte.

| Punkt | |
| - | - |
| Name der Formularkonfiguration | hier `anmeldung.config`, siehe Warnung oben |
| Dateien über 512 MB | erfordert die aktuelle Modulversion |
| Virenprüfung je Upload | optional |
| SFTP-Adresse | der Bereich, aus dem Sie die Dateien abholen |

Die Option "Abschluss je Bestellposition" aus der Bestellvariante entfällt hier. Ein Formular hat keine Bestellpositionen.

## Schritt 2: Die Shopkonfiguration ergänzen

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Templates>
   ...
   Upload = inquiry_anmeldung_upload.htm
   ...
</Templates>

<Upload>
   Allow = yes
</Upload>
```

> [!WARNING]
>
> Wenn Ihr Shop **zusätzlich** das Upload-Modul für Bestellungen verwendet, steht im Abschnitt `<Templates>` unter `Upload` bereits das Template für den Bestell-Upload. Überschreiben Sie es nicht. Das Template für den Formular-Upload wird in Schritt 7 an anderer Stelle festgelegt, nämlich im Abschnitt `<Templates>` der Upload-Konfiguration.

Referenz: [Abschnitt Templates](https://dokumentation.websale.de/v8s/referenz/konfigurationen/konfiguration-wsupload-config.md#templates) · [Abschnitt Upload](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/externe-dienste-und-schnittstellen.md#upload)

## Schritt 3: Das Formular in eine Shopseite einbinden

`WS-ExternInclude()` ruft das Formularprogramm auf und übergibt ihm die Formularkonfiguration.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<body>
   ...
   {ST-Ajax}<WS-Ajax-ws_inquiry_content>{/ST-Ajax}
      ~WS-ExternInclude($URL-SSLDomain$/cgi/inquiry4.cgi?inq4=$WS-ShopID$.$WS-SubShopID$&cfg=anmeldung.config)~
   {ST-Ajax}</WS-Ajax-ws_inquiry_content>{/ST-Ajax}
   ...
</body>
```

Das Formular muss nicht auf einem eigenen Template stehen. Der Aufruf lässt sich ebenso in eine bestehende Seite setzen.

Referenz: [WS-ExternInclude()](https://dokumentation.websale.de/v8s/referenz/tags/ws/merkzettel-vergleich-upload-und-externe-dienste.md)

## Schritt 4: Die Formularkonfiguration anlegen

Legen Sie im Online-Servicebereich unter "Konfigurationen für Formulare (Inquiry)" die Datei `anmeldung.config` an.

Darin legen Sie die Templates, die Adressfelder und die E-Mails fest. Für den Upload kommt ein eigener Abschnitt hinzu.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Basic>
   InquiryPage         = inquiry_anmeldung.htm
   ConfirmPage         = inquiry_anmeldung_antwort.htm
   CommonInputRequired = no
   EMailCheckMethod    = domain
   Language            = DEU
   CountryDat          = ../../../konfiguration/Deutsch/country.dat
   SalutationDat       = ../../../konfiguration/salutation.dat
   TitleDat            = ../../../konfiguration/title.dat
   Referer             = #ihr-shop.de
   WSOMAllow           = no
   charset             = ISO-8859-1
</Basic>

<Upload>
   Allow       = yes
   UploadIni   = anmeldung_upload.config
   UploadDescr = Gewerbenachweis
</Upload>
```

Die Adressfelder legen Sie je Feld in einem eigenen Abschnitt an.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<A-LastName>
   Allow    = yes
   Type     = Text
   Name     = name
   Descr    = Firma
   Required = yes
   Max      = 50
</A-LastName>

<A-Street1>
   Allow    = yes
   Type     = Text
   Name     = street1
   Descr    = Straße
   Required = no
   Max      = 50
</A-Street1>
```

`Descr` bestimmt die Beschriftung im Formular und ist unabhängig vom technischen Feldnamen. Im Beispiel trägt das Feld für den Nachnamen die Beschriftung "Firma", denn in einem B2B-Formular gibt der Kunde seinen Firmennamen ein.

Passen Sie `CountryDat` an, wenn Ihr Subshop eine andere Sprache hat. Der Pfad zeigt auf die Länderliste, aus der die Auswahlliste im Formular entsteht.

Für zusätzliche Felder, die keine Adressfelder sind, gibt es `<+CommonInput>`.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<+CommonInput>
   Allow    = yes
   Type     = Text
   Name     = branche
   Descr    = Branche
   Required = no
   Max      = 50
</+CommonInput>
```

Materialien: Beispielkonfiguration anfrage.config

Dokumentation: Formulare mit INQUIRY4

## Schritt 5: Das Eingabetemplate anlegen

Der Name muss zu `InquiryPage` passen. Der gesamte Inhalt steht in der Klammerung `WS-Include` und wird über den Aufruf aus Schritt 3 in die Shopseite eingesetzt.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{WS-Include}
   <div id="anmeldung_neukunde_container">
      {ST-Ajax}<WS-Ajax-anmeldung_neukunde_container>{/ST-Ajax}

         <form action="~FORM-SSLTemplate(tpl_anmeldung.htm)~" method="post" id="anmeldung_neukunde">
            ~INQUIRY-Link~
            <input type="hidden" name="otp2" value="NewUser">

            <div class="form-group{A-LastName_error} has-error{/A-LastName_error}">
               <label for="~A-LastName_input~">~A-LastName_descr~</label>
               <input type="text" id="~A-LastName_input~" name="~A-LastName_name~"
                      maxlength="~A-LastName_max~" value="~A-LastName~">
            </div>

            <div class="form-group{A-Street1_error} has-error{/A-Street1_error}">
               <label for="~A-Street1_input~">~A-Street1_descr~</label>
               <input type="text" id="~A-Street1_input~" name="~A-Street1_name~"
                      maxlength="~A-Street1_max~" value="~A-Street1~">
            </div>

            <div class="form-group{A-Country_error} has-error{/A-Country_error}">
               <label for="~A-Country_input~">~A-Country_descr~</label>
               ~A-Country_list~
            </div>

            <p>Bitte laden Sie hier Ihren Gewerbenachweis hoch.</p>

            <div id="anmeldungUploadIframe" class="container-iframe">
               <iframe id="frameUpload" src="~UPLOAD-SSLLink~" class="iframe" frameborder="0"></iframe>
               <input type="submit" name="~INQUIRY-ReloadButton~" value="Bestätigung"
                      id="reloadbutton" style="display:none;">
            </div>

            <button type="submit">Absenden</button>
         </form>

      {ST-Ajax}</WS-Ajax-anmeldung_neukunde_container>{/ST-Ajax}
   </div>
{/WS-Include}
```

Jedes Feld folgt demselben Muster aus fünf Tags: `_descr` für die Beschriftung, `_name` für den Feldnamen, `_input` für die ID, `_max` für die Längenbegrenzung und der Feldname ohne Zusatz für den eingegebenen Wert. Die Klammerung `_error` markiert das Feld im Fehlerfall.

Der Upload läuft in einem iframe, weil er ein eigenes Programm mit eigenem Formular ist. Er kann deshalb nicht Teil des Adressformulars sein. Das ist der Grund für die etwas umständliche Konstruktion mit der Höhenanpassung in Schritt 8.

Für das Feld `A-Country` gibt es mit `_list` ein fertiges Auswahlfeld. Dort steht kein eigenes `input`-Element.

Referenz: [WS-Include](https://dokumentation.websale.de/v8s/referenz/tags/ws/includes-templates-css-und-js.md) · [FORM-SSLTemplate()](https://dokumentation.websale.de/v8s/referenz/tags/form-formulare.md#formulare-fur-beliebige-templates)

## Schritt 6: Das Bestätigungstemplate anlegen

Der Name muss zu `ConfirmPage` passen.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{WS-Include}

   {!Inquiry-AlreadySent}
      <p>Ihre Anmeldung ist bei uns eingegangen.</p>
      <a href="%%URLHomepage%%">Zur Startseite</a>
   {/!Inquiry-AlreadySent}

   {Inquiry-AlreadySent}
      <p>
         Das Formular wurde bereits abgesendet, oder Sie waren zu lange inaktiv.
         Bitte rufen Sie das Formular erneut auf.
      </p>
      <a href="%%URLHomepage%%">Zur Startseite</a>
   {/Inquiry-AlreadySent}

{/WS-Include}
```

Der Gegenzweig ist kein Beiwerk. Wer die Bestätigungsseite neu lädt oder zurückspringt, sieht sonst erneut "erfolgreich abgesendet" und schickt das Formular unter Umständen ein zweites Mal ab.

## Schritt 7: Die Upload-Konfiguration anlegen

Legen Sie an derselben Stelle im Online-Servicebereich die Datei `anmeldung_upload.config` an. Der Name muss zu `UploadIni` aus Schritt 4 passen.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Settings>
   DateFormat = %d.%m.%Y
   TimeFormat = %H:%M
   Extensions = JPG,JPEG,TIF,TIFF,PDF,ZIP,RAR,TXT
</Settings>

<Templates>
   Upload = inquiry_anmeldung_upload.htm
</Templates>

<UploadMessages-Txt>
   InvalidExt       = Ungültige Dateiendung. Erlaubt sind: ~validexts~
   DupFile          = Die Datei '~filename~' wurde bereits hochgeladen. Bitte löschen Sie sie zuerst, wenn Sie sie ersetzen wollen.
   FileSizeExceeded = Es können nur Dateien bis zu einer Größe von %d MB hochgeladen werden.
   DelConfirm       = Wollen Sie die markierten Dateien wirklich löschen?
   Files            = Datei(en)
   TransferRunning  = Die Übertragung läuft bereits.
</UploadMessages-Txt>
```

`Extensions` ist eine Positivliste. Was nicht darin steht, wird abgewiesen. Nehmen Sie nur auf, was Sie wirklich verarbeiten können, und denken Sie an beide Schreibweisen gebräuchlicher Endungen, beispielsweise `TIF` und `TIFF`.

Der Abschnitt `<UploadMessages-Txt>` kennt deutlich mehr Einträge als hier gezeigt. Viele davon betreffen ausschließlich den Upload zu Bestellungen und erscheinen bei einem Formular nie, beispielsweise alles rund um Upload-ID und Bestellpositionen. Die vollständige Liste steht in der Referenz.

Referenz: [Beispielkonfiguration wsupload.config](https://dokumentation.websale.de/v8s/referenz/konfigurationen/konfiguration-wsupload-config.md)

## Schritt 8: Das Upload-Template anlegen

Der Name muss zu `Upload` aus Schritt 7 passen. Dieses Template läuft im iframe und ist deshalb ein vollständiges HTML-Dokument mit eigenem `head`.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   <base href="~baseurl~">

   <link rel="stylesheet" href="../css_upload/styles.css">
   <script src="../js_upload/jquery-3.5.1.js"></script>
   <script src="/$WS/ws_sysdata/js/upload-1.0.0.js"></script>

   <script>
      function setiframeheight() {
         var hoehe = $('html').outerHeight();
         window.parent.document.querySelector('#anmeldungUploadIframe').style.height = hoehe + 'px';
         window.parent.document.querySelector('#anmeldungUploadIframe #frameUpload').style.height = hoehe + 'px';
      }
   </script>
</head>

<body>
   ~WSUploadScripts~

   <div id="NoDHTML">
      Ihr Browser unterstützt kein DHTML. Teile dieser Seite stehen deshalb nicht zur Verfügung.
   </div>

   {Msg}
      ~Msg~
      <script>setTimeout(function(){ setiframeheight(); }, 200);</script>
   {/Msg}

   {UploadSuccess}
      <script>setTimeout(function(){ setiframeheight(); }, 200);</script>
   {/UploadSuccess}

   {Item}

      {HasFiles}
         <form name="delform" id="delform" method="post" action="~delurl~">
            {@Files}
               <p>
                  ~FileName~ (~FileSize~ MB)
                  <span onclick="$(this).children('input').prop('checked', true); $('#DelBtn').click();">
                     löschen
                     <input type="checkbox" name="~FileMarkBoxName~" value="marked" style="display:none;">
                  </span>
               </p>
               <input type="hidden" name="~FileNameName~" value="~FileName~">
            {/@Files}
            <input type="submit" name="DelBtn" id="DelBtn" value="löschen" style="display:none;">
         </form>
      {/HasFiles}

      {Logging}
         <p>Durchgeführte Übertragungen</p>
         {@LogLines}
            <p>~Date~ ~Time~ ~Type~ ~FileName~</p>
         {/@LogLines}
      {/Logging}

      <form name="uplform" id="uplform" enctype="multipart/form-data" method="post" action="~uplurl~">
         <div id="uplfiletxt">Neue Datei hochladen</div>
         <input type="file" name="uplfile" id="uplfile">
         <input type="submit" name="UploadBtn" id="UploadBtn" value="Transfer starten" style="display:none;">
      </form>

      <script>
         document.getElementById('uplfile').onchange = function () {
            document.getElementById('uplfiletxt').innerHTML = this.value.replace(/.*[\/\\]/, '');
            document.getElementById('uplform').submit();
         };
      </script>

      <div id="toolargediv" style="display:none;">
         <p>Fehler bei der Übertragung</p>
         <a href="~NewUplLink~">Neuer Upload</a>
      </div>

      <script>setTimeout(function(){ setiframeheight(); }, 200);</script>
   {/Item}
</body>
</html>
```

Die Aufrufe von `setiframeheight` an mehreren Stellen sorgen dafür, dass der iframe im Elterndokument mitwächst, sobald sich sein Inhalt ändert. Ohne sie steht nach dem ersten Upload eine Bildlaufleiste im Rahmen.

Das Auswahlfeld für die Datei schickt das Formular über ein eigenes Skript selbst ab. Die Schaltfläche "Transfer starten" bleibt deshalb verborgen. Ohne dieses Skript brauchen Sie sie sichtbar.

`WSUploadScripts` ersetzt Skripte, die sich nicht in eine eigene Datei auslagern lassen. Das Tag muss im `body` stehen und darf nicht fehlen.

Referenz: [Tags zum Upload-Modul](https://dokumentation.websale.de/v8s/referenz/tags/upload-modul-tags.md)

## Schritt 9: Die Benachrichtigung an den Shopbetreiber (optional)

Konfigurieren Sie den Abschnitt `<InquiryEmail>` in `anmeldung.config`.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<InquiryEmail>
   SendEMail     = yes
   EmailSubject  = Neue Anmeldung
   EmailAddress  = info@ihr-shop.de
   EmailTemplate = mail_anmeldung_inquiryemail.htm
</InquiryEmail>
```

Im Template genügt ein Tag, das den gesamten Inhalt der Anmeldung ausgibt.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<body>
   ~AUTOGENERATE-full~
</body>
```

Mehrere Empfängeradressen trennen Sie in `EmailAddress` durch Kommas.

## Schritt 10: Die Bestätigung an den Kunden (optional)

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ConfirmEmail>
   SendEmail     = yes
   EmailSubject  = Ihre Anmeldung
   SenderName    = Ihr Shop
   SenderEmail   = neuanmeldung@ihr-shop.de
   EmailTemplate = mail_anmeldung_confirmemail.htm
</ConfirmEmail>
```

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<body>
   ~A-Salutation_complete~<br>
   wir führen Ihre Anmeldung unter der Referenznummer ~INFO-Reference~
   und melden uns so bald wie möglich bei Ihnen.
</body>
```

`SendEmail` kennt neben `yes` und `no` auch `userselect`. Damit entscheidet der Kunde im Formular selbst, ob er eine Bestätigung möchte.

Die Referenznummer gehört in diese E-Mail. Sie ist die einzige Angabe, mit der sich der Kunde bei einer Rückfrage auf seine Anmeldung beziehen kann.

## Verwandte Themen

* Wegweiser: [Formulare für Kundenanfragen](https://dokumentation.websale.de/v8s/formulare-fuer-kundenanfragen/formulare-fuer-kundenanfragen.md)
* Wegweiser: [Upload-Modul](https://dokumentation.websale.de/v8s/upload-modul/upload-modul.md)
* Wegweiser: [Upload-Modul integrieren](https://dokumentation.websale.de/v8s/upload-modul/upload-modul-integrieren.md)
* Dokumentation: Formulare mit INQUIRY4


## Related topics

- [Formulare mit INQUIRY4](https://dokumentation.websale.de/v8s/upload-modul/formulare-mit-inquiry4.md)
- [Formulare für Kundenanfragen](https://dokumentation.websale.de/v8s/formulare-fuer-kundenanfragen/formulare-fuer-kundenanfragen.md)
- [Materialien INQUIRY](https://dokumentation.websale.de/v8s/materialien/materialien-inquiry.md)
- [WS-Anfragedaten](https://dokumentation.websale.de/v8s/schnittstellen/service-und-app/ws-anfragedaten.md)
- [Konfiguration wsupload.config](https://dokumentation.websale.de/v8s/referenz/konfigurationen/konfiguration-wsupload-config.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.