Contact Form

Input-Attribute

Du kannst deine Inputs mit bestimmten Attributen versehen:

• submit: Markiere ein Element mit diesem Attribut, wenn du möchtest, dass bei einem Klick auf das Element das Formular versendet wird.
• email: Definiert, dass dieses Feld eine Mail-Adresse enthält, an die das Formular gesendet wird.
• copy: Funktioniert nur in Verbindung mit email und sendet diese Nachricht dann an den Empfänger via CC.
• blind-copy: Funktioniert nur in Verbindung mit email und sendet diese Nachricht dann an den Empfänger via BCC.
• reply-to: Gibt an, dass diese Email-Adresse als Reply-To Adresse gesetzt wird.
• reply-to-name: Gibt an, dass dieser Wert als Reply-To Namen gesetzt wird.
• required: Prüft vor dem Versand, ob das Feld ausgefüllt wurde.
• validate="email|url|number": Validiert das Feld vorab auf einen bestimmten Eingabetypen. Nicht nötig bei Feldern die bereits das email Attribut haben.
• no-reset: Unterdrückt den automatischen Reset auf dem angegebenen Feld.
• header: Weist den Wert des Feldes einem Header-Flag zu. Das Flag selbst ergibt sich aus dem name Attribut.
• messages: Weist das angegebene Element als Container für Nachrichten aus. Falls kein Element angegeben wird, werden Nachrichten automatisch unter dem Formular angezeigt.

Beispiel:

<input type="text" name="test" required email copy/>
<input type="text" name="zahl" required validate="number"/>
<div class="button" submit>Absenden</div>
<div messages></div>

Dateianhänge

Du kannst ein spezielles <upload> Control einfügen, um dem Nutzer Dateiuploads zu erlauben. Diese werden anschliessend als Anhang an deine Email angehängt.

Beispiel:

<upload class="btn btn-primary" name="bilder" size-limit="2048" extensions="png,jpg,jpeg,bmp" multiple>Bilder hochladen</upload>

• class: Die hier angegebenen Klassen stylen den Upload-Button
• size-limit: Maximal erlaube Dateigröße in KB. Bei fehlender Angabe sind 2MB voreingestellt. Wert 0 setzen um alle Größen zu erlauben.
• extensions: Liste von Dateitypen, welche beim Upload erlaubt sind. Falls nicht angegeben sind alle Dateitypen erlaubt.
• multiple: Ist dieses Attribut gesetzt, können mehrere Dateien hochgeladen werden

Ebenfalls werden die Attribute required und no-reset auch hier unterstützt.

Mailtemplate

Dir steht im Mailtemplate die Smarty-Variable $form zur Verfügung. In dieser hängen die gesetzten Werte deiner Inputs.

Beispiel:

Dein Formular sieht so aus:

<input type="text" name="test"/>
<input name="testtwo" type="hidden" value="xyz"/>
<div class="button" submit>Absenden</div>

Im Mailtemplate kannst dann du auf diese Werte zugreifen:

Gesetzter Wert von 'test': {$form.test}
Gesetzter Wert von 'testtwo': {$form.testtwo} // gibt 'xyz' aus 

Javascript Events

Du hast die Möglichkeit via Javascript auf verschiedene Events deines Formulars zuzugreifen:

• beforeValidate: Formulardaten vor der Validierung
• validate: Formulardaten während der Validierung - Du kannst hier eigene Fehler hinzufügen
• beforeSend: Formulardaten kurz vor dem absenden des Formulars - Praktisch um die Daten zu erweitern.
• success: Formular nach erfolgreichem Mail-Versand
• error: Formular nach fehlerhaftem Versand oder sonstigen Fehlern. Betrifft keine Validierungsfehler!

Um dein Formular zu hooken gib ihm zunächst eine ID. Mit Hilfe dieser ID kannst du jetzt folgendes tun:

ContactForms.get('meine_id').on('validate', function(params, next){
    // mache etwas mit params
    console.log(params.test.value); // gibt den Wert des Parameters aus
    params.test.errors.push('Haha, hier ist immer ein Fehler!');
    // Der Call von next(params) muss zur Fortführung der Kette sein.
    next(params);
});

Solltest du einem Parameter einen Fehler hinzufügen wird das Formular nicht mehr gesendet, sondern der Fehler ausgegeben.