Upload-Modul für Formulare mit INQUIRY

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 Materialien: Materialien zu INQUIRY Dokumentation: Formulare mit INQUIRY4

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

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

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

<Upload>
   Allow = yes
</Upload>

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 · Abschnitt Upload

Schritt 3: Das Formular in eine Shopseite einbinden

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

<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()

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.

<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.

<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>.

<+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.

{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 · FORM-SSLTemplate()

Schritt 6: Das Bestätigungstemplate anlegen

Der Name muss zu ConfirmPage passen.

{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.

<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

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.

<!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

Schritt 9: Die Benachrichtigung an den Shopbetreiber (optional)

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

<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.

<body>
   ~AUTOGENERATE-full~
</body>

Mehrere Empfängeradressen trennen Sie in EmailAddress durch Kommas.

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

<ConfirmEmail>
   SendEmail     = yes
   EmailSubject  = Ihre Anmeldung
   SenderName    = Ihr Shop
   SenderEmail   = neuanmeldung@ihr-shop.de
   EmailTemplate = mail_anmeldung_confirmemail.htm
</ConfirmEmail>

<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.

​Die Bestandteile

​Die Namenskette

​Schritt 1: Freischaltung

​Schritt 2: Die Shopkonfiguration ergänzen

​Schritt 3: Das Formular in eine Shopseite einbinden

​Schritt 4: Die Formularkonfiguration anlegen

​Schritt 5: Das Eingabetemplate anlegen

​Schritt 6: Das Bestätigungstemplate anlegen

​Schritt 7: Die Upload-Konfiguration anlegen

​Schritt 8: Das Upload-Template anlegen

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

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

​Verwandte Themen

Die Bestandteile

Die Namenskette

Schritt 1: Freischaltung

Schritt 2: Die Shopkonfiguration ergänzen

Schritt 3: Das Formular in eine Shopseite einbinden

Schritt 4: Die Formularkonfiguration anlegen

Schritt 5: Das Eingabetemplate anlegen

Schritt 6: Das Bestätigungstemplate anlegen

Schritt 7: Die Upload-Konfiguration anlegen

Schritt 8: Das Upload-Template anlegen

Schritt 9: Die Benachrichtigung an den Shopbetreiber (optional)

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

Verwandte Themen