Eigene Formulare erstellen

Formular über Thema einbauen

Beispiel

Im nachfolgenden Block ist ein Beispiel für ein individuelles Formular, wie es im Thementext eingebaut werden kann. Die einzelnen Bestandteile werden im folgenden Abschnitt noch Schritt für Schritt erklärt.

<div class="error">{errormsg}</div>

<form method="POST" class="w-max--320px" name="contact" id="special_form" action="{URL}contactsend">
  <input type="hidden" name="arrayname" value="mail_special_formular">
  <input type="hidden" name="p" value="311">
  <div class="input-field mandatory m-t--m-r error-placement"><input class="w--100" type="email" name="feed_email" value="{feed_email}" placeholder="E-Mail-Adresse"></div>
  <div class="input-field mandatory m-t--m-r error-placement"><input class="w--100" type="text" name="name" value="{name}" placeholder="Name"></div>
  <div class="input-field m-t--m-r error-placement"><input class="w--100" type="textarea" name="textarea" value="{textarea}" placeholder="Bitte geben Sie hier Ihren Text ein"></div>
  <div class="input-field m-t--m-r error-placement">
    <select name="dropdown" size="1" class="w--100">
      <option value="1" {1_selected}>Option 1</option>
      <option value="2" {2_selected}>Option 2</option>
    </select>
  </div>
  <div><span class="radio"><input type="radio" name="radiobutton" value="1" id="radio1" {radio_1_checked}><label for="radio1"></label></span><label for="radio1">Radio Button 1</label></div>
  <div><span class="radio"><input type="radio" name="radiobutton" value="2" id="radio2" {radio_2_checked}><label for="radio2"></label></span><label for="radio2">Radio Button 2</label></div>
  <div><span class="checkbox"><input type="checkbox" name="checkbox" value="ja" id="checkbox" {checkbox}><label for="checkbox"></label></span><label for="checkbox">Checkbox</label></div>
  <div class="input-field mandatory-- m-t--m-r contact_name">
    <label>Sollte leer bleiben</label>
    <input type="text" id="email_address_name_search" name="email_address_name_search" class="w--100" autocomplete="off">
  </div>
  <input type="submit" name="senden" class="button_default big m-t--s-r" value="Formular abschicken" title="Formular abschicken">

</form>

Erklärung

Grundaufbau des Formulars

<div class="error">{errormsg}</div>

<form method="POST" class="w-max--320px" name="contact" id="special_form" action="{URL}contactsend">
  <input type="hidden" name="arrayname" value="mail_special_formular">
  <input type="hidden" name="p" value="311">
  .
  .
  .
  <div class="input-field mandatory-- m-t--m-r contact_name">
    <label>Sollte leer bleiben</label>
    <input type="text" id="email_address_name_search" name="email_address_name_search" class="w--100" autocomplete="off">
  </div>
  <input type="submit" name="senden" class="button_default big m-t--s-r" value="Formular abschicken" title="Formular abschicken">

</form>

Die Zeile <div class="error">{errormsg}</div> nutzen wir um mögliche Fehler auszugeben, falls es ein Problem beim Abschicken des Formulares mit einem der Felder gab.

Die öffnenden und schließenden Tags <form...> und </form> beschreiben das eigentliche Formular.

Direkt unter dem öffnenden <form..>-Tag gibt es zwei versteckte Felder (<input type="hidden"...>), die im Attribut value individuell angepasst werden müssen.

Feld mit name="p"

Hier wird anstelle von 311 die Themennummer eingetragen, in dessen Thema das Formular eingebaut wird.

Feld mit name="arrayname"

Hier wird anstelle von mail_special_formular die Bezeichnnug für das Array eingetragen, welches Sie in der layout.inc.php für die Parameterübergabe definieren.

Der div-Bereich, der in class auch den Wert contact_name enthält, ist wichtig für die Spam-Abwehr und sollte unbedingt hier mit enthalten sein. Es ist ein Feld, das für die Nutzer außerhalb des Sichtbereichs ist, von Spam-Robots aber befüllt wird und daran werden die Spam-Robots u.a. mit erkannt und entsprechender Spam kann abgefangen werden.

Sofern die eMail-Funktionalität eingebunden wird, haben wir das Recht, bei einer fehlerhaften oder missbräuchlichen Implementierung die Seite oder den gesamten Shop vom Internet zu trennen, um unsere anderen Kunden zu schützen.

Die Zeile <input type="submit" name="senden" class="button_default big m-t--s-r" value="Formular abschicken" title="Formular abschicken">, welche als letztes innerhalb des Formularbereiches steht, erzeugt einen Bestätigungs-Button, mit dem das Formular abgeschickt wird.

Wenn Sie für die folgenden Formularelemente im class-Paramater des umschließenden div zusätzlich mandatory hinterlegen wird der Eingabebereich durch die Templates auch mit einem roten Stern gekennzeichnet. Im folgenden Eingabefeld wurde dies so wie benötigt eingerichtet.

Eingabefeld / Input

<div class="input-field mandatory m-t--m-r error-placement"><input class="w--100" type="text" name="name" value="{name}" placeholder="Name"></div>

Der Parameter für type sollte je nach Inhalt des Feldes gewählt werden (text/number).

Die rot hervorgehobenen Werte name werden durch die gewünschte Bezeichnung für das Feld ersetzt, wie es auch im Übergabearray der layout.inc.php definiert ist. Hierbei müssen Leerzeichen durch Binde- oder Unterstriche ersetzt werden, da es sonst zu Fehlern kommt.

Für den Parameter placeholder wird der Platzhalter gewählt, den der Nutzer sieht, bevor er selber etwas eingibt.

Falls der Kunde noch seine Mail angeben soll um eine Bestätigungsmail zu erhalten muss folgendes Feld definiert werden, hierbei ist der Name "feed_email" bereits vorgegeben und darf nicht umbenannt werden

<div class="input-field mandatory m-t--m-r error-placement"><input class="w--100" type="email" name="feed_email" value="{feed_email}" placeholder="E-Mail-Adresse"></div>

mehrzeiliges Eingabefeld / Textarea

<div class="input-field m-t--m-r error-placement"><input class="w--100" type="textarea" name="textarea" value="{textarea}" placeholder="Bitte geben Sie hier Ihren Text ein"></div>

Die rot hervorgehobenen Werte textarea werden durch die gewünschte Bezeichnung für das Feld ersetzt, wie es auch im Übergabearray der layout.inc.php definiert ist. Hierbei müssen Leerzeichen durch Binde- oder Unterstriche ersetzt werden, da es sonst zu Fehlern kommt.

Für den Parameter placeholder wird der Platzhalter gewählt, den der Nutzer sieht, bevor er selber etwas eingibt.

Dropdown-Auswahl / Select

<div class="input-field m-t--m-r error-placement">

  <select name="dropdown" size="1" class="w--100">
    <option value="1" {1_selected}>Option 1</option>
    <option value="2" {2_selected}>Option 2</option>
  </select>

</div>

Der rot hervorgehobene Wert dropdown wird durch die gewünschte Bezeichnung für das Feld ersetzt, wie es auch im Übergabearray der layout.inc.php definiert ist. Hierbei müssen Leerzeichen durch Binde- oder Unterstriche ersetzt werden, da es sonst zu Fehlern kommt.

size=1 gibt an, dass die Darstellung 1-zeilig erfolgt. Erhöht man diesen Wert, wird die hinterlegte Anzahl an Auswahlmöglichkeiten im Feld direkt untereinander ausgegeben, wodurch sich direkt die Darstellung ändert.

Für jeden auswählbaren Wert muss eine eigener option-tag angelegt werden. Der Text zwischen dem öffnenden <option...> und schließenden </option> wird dem Nutzer ausgegeben, die jeweils bei value hinterlegten Werte werden an die Software übergeben und später im Mailtemplate auch so eingefügt.

Innerhalb der geschwungenen Klammern muss folgende Struktur eingehalten werden:

{(value der option)_selected}

Leerzeichen im value müssen durch Binde- oder Unterstriche ersetzt werden.

Radio Button

<div><span class="radio"><input type="radio" name="radiobutton" value="1" id="radio1" {radio_1_checked}><label for="radio1"></label></span><label for="radio1">Radio Button 1</label></div>
<div><span class="radio"><input type="radio" name="radiobutton" value="2" id="radio2" {radio_2_checked}><label for="radio2"></label></span><label for="radio2">Radio Button 2</label></div>

Die rot hervorgehobenen Werte radiobutton werden durch die gewünschte Bezeichnung für das Feld ersetzt, wie es auch im Übergabearray der layout.inc.php definiert ist. Hierbei müssen Leerzeichen durch Binde- oder Unterstriche ersetzt werden, da es sonst zu Fehlern kommt.

Bei value=“1“ kann anstelle von „1“ der Wert definiert werden der an die Software übergeben und dann auch in der fertigen Mail ausgegeben werden soll wenn die Checkbox aktiviert wurde. Hierbei müssen Leerzeichen durch Binde- oder Unterstriche ersetzt werden, da es sonst zu Fehlern kommt.

Die id des Radiobuttons und der for-Parameter der beiden Label müssen identisch sein. Der Name kann hier beliebig gewählt werden.

Innerhalb der geschwungenen Klammern muss folgende Struktur eingehalten werden:

{radio_(value der option)_checked}

Leerzeichen im value müssen durch Binde- oder Unterstriche ersetzt werden.

Checkbox

<div><span class="checkbox"><input type="checkbox" name="checkbox" value="ja" id="checkbox" {checkbox}><label for="checkbox"></label></span><label for="checkbox">Checkboxbeschreibung</label></div>

Die rot hervorgehobenen Werte checkbox werden durch die gewünschte Bezeichnung für das Feld ersetzt, wie es auch im Übergabearray der layout.inc.php definiert ist. Hierbei müssen Leerzeichen durch Binde- oder Unterstriche ersetzt werden, da es sonst zu Fehlern kommt.

Bei value=“ja“ kann anstelle von „ja“ der Wert definiert werden, der an die Software übergeben und dann auch in der fertigen Mail ausgegeben werden soll, wenn die Checkbox aktiviert wurde.

Der Text Checkboxbeschreibung kann durch einen beliebigen Text ersetzt werden, welcher neben der Checkbox erscheint.

Mailtemplates bereitstellen

Einmal als HTML-Version unter /templ/mail/txt/mail_special_form.txt

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>{s}Formularanfrage{e}</title>
    <style type="text/css">
      div, p, a, li, td, span { font-family:Arial,Helvetica; font-size:14px; -webkit-text-size-adjust:none; } /* Defaults festlegen und Layout glitches in iOS vermeiden*/
      h1, h2, h3, h4 { font-size:22px; } /* Defaults fuer Ueberschriften setzen */
      body { -webkit-text-size-adjust: 100%; } /* Font-Scaling auf iOS verhindern */
      table td, table th { border:0px; padding:5px; }
      img { max-width:100%; height:auto; border:0px; } /*responsive Bildergroessen */

      table[class=button], .button { background-color:#0091d0; min-height:44px; min-width:44px;}
      table[class=button] td, .button td { padding:4px 10px; }
      table[class=button] a:hover span, .button a:active span, .button a:hover span, .button a:active span { color:#eeeeee; }
      table[class=button] span, .button span { color:#ffffff; font-weight:bold; text-decoration:none; }

      @media only screen and (max-width:620px) {
        table[class=headercell] img, .headercell img { width:100%; }
        table[class=content], .content { width:100%; }
      }
    </style>
  </head>
  <body>
    <table width="90%">
      {MAIL_HEADER_LOGO}
      <tr>
        <td align="center">
          <table class="content" width="600">
            <tr>
              <td><h1>Mail an den Shopbesitzer</h1></td>
            </tr>
            <tr><td><hr></td></tr>
            <tr>
              <td>E-Mail-Adresse: </td>
              <td>{feed_email}</td>
            </tr>
            <tr>
              <td>Name: </td>
              <td>{name}</td>
            </tr>
            <tr>
              <td>Beschreibung: </td>
              <td>{textarea}</td>
            </tr>
            <tr>
              <td>Dropdown Auswahl: </td>
              <td>{dropdown}</td>
            </tr>
            <tr>
              <td>Radiobutton Auswahl: </td>
              <td>{radiobutton}</td>
            </tr>
            <tr>
              <td>Zusatzfunktion: </td>
              <td>{checkbox}</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>

</html>

...und einmal als Textversion unter /templ/mail/txt/mail_special_form.txt

{BETREIBER_ZUSATZ}{s}Anfrage über Formular{e}

=========================================

Mail an den Shopbetreiber

{s}E-Mail-Adresse:{e} {feed_email}
{s}Name:{e} {name}
{s}Beschreibung:{e} {textarea}
{s}Dropdown Auswahl:{e} {dropdown}
{s}Radiobutton Auswahl:{e} {radiobutton}
{s}Zusatzfunktion:{e} {checkbox}

{s}Mit freundlichen Grüßen{e}
{s}Ihr Team des Onlineshops {shoptitel}{e}

{ANBIETER}

Die Bezeichnung des Templates, im Beispiel mail_special_form kann beliebig gewählt werden, solange nicht bereits ein Template mit diesem Namen vorhanden ist und es überall als HTML- und Text-Version richtig hinterlegt wird.

Das HTML-Template beginnt mit einer Definition von Formvorgaben und wird wie als HTML-Tabelle strukturiert um Mail-Client übergreifende saubere Darstellung zu sichern.

Die mit geschwungenen Klammern umrahmten Template-Variablen entsprechen dem name-Parameter der im Formular definierten Eingabe-Felder

Zusatz:

Wenn Sie auch dem Kunden auch eine Bestätigung rausschicken wollen, benötigen Sie hierfür 2 weitere Templates, die ähnlich hinterlegt werden. Hierfür müssen im Formular das Feld feed_email befüllt sein und weitere Konfigurationen in der layout.inc.php vorgenommen werden.

layout.inc.php erweitern

Beispiel

Folgender Code wird in der layout.inc.php eingefügt.

$mail_special_formular = array(

  'template' => 'mail_special_form',
  'email' => 'test@e-vendo.de',
  'variables' => array('feed_email',
                       'name',
                       'textarea',
                       'dropdown',
                       'radiobutton',
                       'checkbox'),
  'subject' => 'Formularanfrage',
  'function' => 'special_formular_anfrage',
  'antwort_template' => 'mail_special_form_antwort'
);

1. -------------------------------------------------------------------------
   

  function special_formular_anfrage()

1. -------------------------------------------------------------------------
   

{
  global $mail_special_formular, $tpl, $feed_email, $special_thementextassigns;

  $bNichtSenden = false;

  # alle Felder des Formulars erst mal einlesen
  foreach ($mail_special_formular['variables'] as $key => $item) {
    $$item = postinput2php($item);
  }

  # pruefen, ob die erforderlichen Angaben vorgenommen worden sind
  $strError = ;
  if (!$name)
    $strError .= ($strError ? '<br />' : ).'Bitte geben Sie Ihren Namen an!';
  if ($strError) {
    # es gab einen Fehler, das Formular wurde nicht vollstaendig ausgefuellt, wir moechten also auf die Seite zurueckfallen, die bestehenden
    # Inhalte mit eintragen und auch die Fehlermeldung anzeigen
    $special_thementextassigns = array(
        'errormsg' => "Ihre Anfrage kann noch nicht gesendet werden, da die Daten unvollständig waren.<p>$strError</p>"
      , 'feed_email' => $feed_email
      , 'name' => $name
      , 'textarea' => $textarea
      , $dropdown.'_selected' => 'selected = "selected"'
      , 'radio_'.$radiobutton.'_checked' => 'checked = "checked"'
      , 'checkbox' => $checkbox ? 'checked = "checked"' : );
    $bNichtSenden = true;
  } else {
    # hier können zum Beispiel weitere Dinge definiert werden, die ausgeführt werden, wenn das Formular erfolgreich abgeschickt wird

  }
  return $bNichtSenden;

}

Array mit übergebenen Werten

$mail_special_formular = array(

  'template' => 'mail_special_form',
  'email' => 'test@e-vendo.de',
  'variables' => array('feed_email',
                       'name',
                       'textarea',
                       'dropdown',
                       'radiobutton',
                       'checkbox'),
  'subject' => 'Formularanfrage',
  'function' => 'special_formular_anfrage',
  'antwort_template' => 'mail_special_form_antwort'

);

Der Name des Arrays ohne Dollarzeichen ist der gleiche, der im Formular ganz oben im Form-Tag definiert wurde.

Nachfolgend eine kurze Erklärung der einzelnen Zeilen...

template

Der Name des Mail-Templates welches nach Abschluss des Formulares rausgeschickt werden soll (ohne Dateiendung).

email

An die hier angegebene E-Mail-Adresse wird nach Absenden des Formulars eine Mail verschickt.

variables

Beinhaltet ein weiteres Array mit den name-Parametern der im Formular eingebauten Felder.

subject

Der Titel der ausgehenden E-Mail.

function

Der Name der nachfolgenden Funktion, in deren Inhalt der weitere Ablauf definiert wird.

antwort_template (optional)

Ist dieser Wert definiert und befüllt, erhält der Kunde wenn sämtliche weiteren Bedingungen erfüllt sind (Inputfeld mit E-Mail mit name=feed_email im Formular, Auflistung von feed_email unter den Übergabevariablen und vorhanden sein der entsprechenden Templates als HTML- und TXT-Version) auch eine Bestätigungs-E-Mail. Als Inhalt wird der Name der jeweiligen Mailtemplates ohne Dateiendung hinterlegt.

Funktion für die Formularverarbeitung

# -------------------------------------------------------------------------

&nbsp:; function special_formular_anfrage()

1. -------------------------------------------------------------------------
   

{
  global $mail_special_formular, $tpl, $feed_email, $special_thementextassigns;

  $bNichtSenden = false;

  # alle Felder des Formulars erst mal einlesen
  foreach ($mail_special_formular['variables'] as $key => $item)
  &nbsp:; $$item = postinput2php($item);

  # pruefen, ob die erforderlichen Angaben vorgenommen worden sind
  $strError = ;
  if (!$name)
    $strError .= ($strError ? '<br />' : ).'Bitte geben Sie Ihren Namen an!';
  if ($strError) {
    # es gab einen Fehler, das Formular wurde nicht vollstaendig ausgefuellt, wir moechten also auf die Seite zurueckfallen, die bestehenden
    # Inhalte mit eintragen und auch die Fehlermeldung anzeigen
  $special_thementextassigns = array(
        'errormsg' => "Ihre Anfrage kann noch nicht gesendet werden, da die Daten unvollständig waren.<p>$strError</p>"
      , 'feed_email' => $feed_email
      , 'name' => $name
      , 'textarea' => $textarea
      , $dropdown.'_selected' => 'selected = "selected"'
      , 'radio_'.$radiobutton.'_checked' => 'checked = "checked"'
      , 'checkbox' => $checkbox ? 'checked = "checked"' : );
    $bNichtSenden = true;
  } else {
    # hier können zum Beispiel weitere Dinge definiert werden, die ausgeführt werden, wenn das Formular erfolgreich abgeschickt wird

  }
  return $bNichtSenden;

}

Der Name der Funktion special_formular_anfrage() wurde im vorherigem Schritt unter function definiert. Die grobe Struktur der Vorgabe sollte eingehalten werden, anzupassende Stellen wären unter anderem die Fehlerermittlung...

if (!$name)   $strError .= ($strError ? '<br />' : ).'Bitte geben Sie Ihren Namen an!'

Hier wird geprüft, ob ein Feld, welches wir als Pflichtfeld definieren wollen, auch befüllt ist. Im unserem Beispiel prüfen wir das im Formular hinterlegte Feld mit dem name-Parameter name. Falls dieses bei Absenden des Formulars leer übermittelt wird, landet der Nutzer wieder auf der Formular-Seite und bekommt die rot hinterlegte Fehlermeldung angezeigt. Für jedes weitere Feld, welches auf diese Weise geprüft werden soll, wird ein ähnlicher Eintrag angelegt bei dem der Name in der Prüfung und die entsprechende Fehlermeldung angepasst werden muss.

Innerhalb des Arrays $special_thementextassigns werden sowohl eine allgemeine Fehlermeldung definiert sowie sämtliche Felder mit den vom Nutzer ausgewählten Werten erneut vorbefüllt, falls der Nutzer vergessen hatte eines der Felder zu befüllen.

$special_thementextassigns = array(

    'errormsg' => "Ihre Anfrage kann noch nicht gesendet werden, da die Daten unvollständig waren.<p>$strError</p>"
  , 'feed_email' => $feed_email
  , 'name' => $name
  , 'textarea' => $textarea
  , $dropdown.'_selected' => 'selected = "selected"'
  , 'radio_'.$radiobutton.'_checked' => 'checked = "checked"'

  , 'checkbox' => $checkbox ? 'checked = "checked"' : );

Hierbei muss der jeweilige Aufbau der Zeile vor allem bei Select-Feldern, Radiobuttons und Checkboxen beachtet werden.

Dateiupload in das Formular integrieren

Soll das Formular die Möglichkeit bieten, Dateien hochzuladen, so dass diese den Empfänger der Mail in der Mail als Attachement erreichen, so muss folgendes getan werden:

Formular-Tag um Attribut enctype erweitern

Das Formular-Tag muss das Attribut enctype mit dem Wert multipart/form-data erhalten.

<form method="POST" ... enctype="multipart/form-data" ...>

Konfigurationsarray um 'file_uploads' erweitern

Das für das Formular in der layout.inc.php konfigurierte Array muss um den Eintrag 'file_uploads' erweitert werden.

$mail_special_formular = array(

  ...
  'file_uploads' => array('uploadfieldname1', 'uploadfieldname2')
  ...

);

file_uploads

Array mit den Feldnamen der Dateiupload-Eingabefelder

Eingabefeld(er) für Dateiupload in das Formular aufnehmen

Das Eingabefeld für den Datei-Upload ist mit aufzunehmen.

Eingabefeld für die Aufnahme EINER Upload-Datei:

<input ... name="uploadfieldname1" type="file" accept="application/pdf" ... />

In name wird der Feldname übergeben, type muss den Wert file haben und in accept kann man die akzeptierten Mimetyps angeben.

Eingabefeld für die Aufnahme mehrerer Upload-Dateien:

<input ... name="uploadfieldname2[]" type="file" accept="application/pdf" multiple/>

Hier ist zu beachten, dass an den Feldnamen [] angehängt wird und das Attribut multiple mit aufgenommen wird.

Mail-Template erweitern

Wenn mehr als ein Dateiupload-Feld im Formular ist, dann kann es sinnvoll sein, dass die Mail an den Empfänger eine Information darüber erhält, welche der in der Mail mitgesendeten Dateien über welches Feld mitgegeben worden sind. Von daher stehen in den Mailtemplates zusätzlich Templatevariablen zur Verfügung mit dem Namen der Dateiupload-Eingabefelder. Es werden dann die Dateinamen dort ausgegeben. Wenn es sich um ein multiple-Dateiupload-Eingabefeld handelt und mehr als eine Datei übergeben worden ist, so sind alle Dateinamen mit Komma vonenander getrennt, in der Ausgabe enthalten. Um also auf das obige Beispiel Bezug zu nehmen, würden die Templatevariablen {uploadfieldname1} und {uploadfieldname2} zur Verfügung stehen.