Einbinden von Webformularen – Evalanche Helpcenter

Das System bietet Ihnen verschiedene Möglichkeiten an Webformulare auf der Website oder im eMailing zu integrieren.

Möglichkeiten der Integration

Da Formulare auf unterschiedliche Arten in Webseiten integriert werden können, ergeben sich daraus verschiedene Vor- und Nachteile.

Evalanche Formulare in iFrame oder Browserfenster:

+ Vorausfüllbare Formulare bei Identifizierung des Benutzers
+ Progressive-Profiling (bereits ausgefüllte Felder nicht abfragen)
+ Schutz vor Fremdeintragungen (CSRF-Token)
+ Änderungen nur an einer zentralen Stelle in Evalanche
- separate Gestaltung des Formulars
- schwierigere Anpassung bei mobilen Darstellungen

Weitere Informationen

Integration als Spiegelformular:

+ Gestaltung des Formular geschieht durch Website
+ leichte Anpassung bei mobilen Darstellungen
- keine vorausfüllbaren Formulare
- kein Progressive-Profiling (bereits ausgefüllte Felder nicht abfragen)
- kein Schutz vor Fremdeintragungen (CSRF-Token)
- Änderungen auf Website und in Evalanche

Weitere Informationen

Integration via SmartForms-API Rest:

+ Gestaltung des Formular geschieht durch Website
+ Leichte Anpassung bei mobilen Darstellungen
+ Vorausfüllbare Formulare
+ Serverseitige Validierung möglich
+ Schutz vor Fremdeintragungen (via Token)
+ Änderungen müssen nur im Evalancheformular vorgenommen werden

Weitere Informationen

Alle Integrations-URLs finden Sie direkt beim Formular unterhalb des Integrations-Tabs.

Im Tab Integration stehen die verschiedenen Code-Schnipsel zur Integration der Formulare zur Verfügung.

iFrame und neues Browserfenster

In diesem Fall ist auf der Website oder im eMailing ein Link einbauen, der das Formular in einem eigenen Fenster öffnet.

<a href="[URL AUF FORMULAR]" target="_blank">Link auf Formular</a>

Einbinden auf der Website als IFrame

< iframe frameborder="0" src="[URL AUF FORMULAR]" width="500" height="800"> 
   Ihr Browser unterstützt keine iFrames. 
   <a href="[URL AUF FORMULAR]" target="_blank">weiter</a> 
</iframe>

(URL AUF FORMULAR steht für die URL des entsprechenden Formulars. Den Link zu dem Formular finden Sie in der Listenansicht des Formulars und unter dem Reiter Integration)

Einbinden im eMailing mit vorausgefüllten Feldern

Hierfür stellen wir eine spezielle Personalisierungsvariable zur Verfügung:

Code für eMail (Text-Variante):

{$FORM:ID}

Code für eMail (HTML-Variante):

<a href="{$FORM:ID}" target="_blank">Link auf Formular</a>

Achtung!

Handelt es sich bei dem Pool des Formulars und dem Pool des übergebenen Profils um unterschiedliche Pools so werden nur die vom System vorgegebenen Standardfelder vorausgefüllt.

Spiegelformular

Bei einem Spiegelformular handelt es sich um ein individuell erstelltes Formular, welches Daten im Post-Format an die URL des Action-Attributs des Formulars sendet. Diese Action-URL sollte die Integrations-URL eines Formulars des eMail-Marketing-Systems sein. Beide Formulare müssen dieselben zu übergebenden Felder enthalten. Auf eine Gestaltung des Formulars im System kann dabei verzichtet werden.

Bei einem Spiegelformular werden die Werte der einzelnen Felder von einem Fremdformular an ein eMail-Marketing-System-Formular übergeben und in den dafür vorgesehenen Pool eingetragen.

Integrations-Arten von Spiegelformularen

Spiegelformulare können auf unterschiedliche Arten in Webseiten integriert werden, daraus ergeben sich verschiedene Vor- und Nachteile.

Statische Integration:

+ Gestaltung des Formulars geschieht durch Website
+ leichte Anpassung und flexibilität bei mobilen Darstellungen
- keine vorausfüllbaren Formulare
- kein Progressive-Profiling (bereits ausgefüllte Felder nicht anzeigen/abfragen)
- kein Schutz vor Fremdeintragungen (CSRF-Token)
- Feld-Änderungen müssen auf Website und in Evalanche erfolgen

Infos zur statischen Integration von Spiegelformularen

Dynamische Integration:

+ Gestaltung des Formular geschieht durch Website
+ leichte Anpassung bei mobilen Darstellungen
+ Änderungen müssen nur an einer Stelle bearbeitet werden (eMail-Marketing-System)
+ vorausfüllbare Formulare
- einmaliger erhöhter Aufwand der Implementierung in die Webseite

Infos zur dynamischen Integration von Spiegelformularen

Weitere Details zur verwendeten Formular-REST-API

Statische Integration von Spiegelformularen

Die Datenübergabe erfolgt mittels eines POST-Requests. Ziel des Requests ist dabei die Integrations-URL des EMS-Formulars, welche im Action-Attribut des <form>-Tags angegeben werden muss. Prinzipiell werden die Feld-Variablen für die Wertübergabe in der Schreibweise „form_FELDNAME“ aufgebaut. Bei „FELDNAME“ handelt es sich immer um den internen Namen des Feldes. Durch Klick auf den Doppelpfeil (oben rechts) in der Formular Vorschau können Sie das Formular in einem neuen Browser Tab öffnen und sich dort den Quelltext des Formulars anzeigen lassen.

<form method="post" action="Integrations-URL" accept-charset="UTF-8">
  <select name="form_SALUTATION ">
    <option value="0" selected="selected">-</option>
    <option value="1">Frau</option>
    <option value="2">Herr</option>
  </select>

  <input type="text" name="form_FIRSTNAME" />
  <input type="text" name="form_NAME" />
  <input type="text" name="form_EMAIL"  />
  .....
</form>

Dem Quellcode können Sie die einzelnen ausformulierten Feld-Variablen entnehmen. Ansonsten finden Sie die internen Feld-Namen auch im Pool unter „Integration“ oder in der Feld-Konfiguration des Formulars. Auch die in der Feld-Konfiguration des Formulars als „versteckt“ gekennzeichneten Felder, welche den Profilen einen festen Wert zuweisen sollen, funktionieren in Spiegelformular-Szenarien. Diese Felder müssen dabei nicht extra vom Fremdformular übergeben werden. Ein im Formular konfigurierter Mail-Versand (Bestätigungsmail, Reportmail) wird automatisch ausgelöst.

Wichtig ist, dass die Fehler-Validierung des Fremd-Formulars schon vor dem Absenden an das E-Mail-Marketing-System stattfindet, da sonst im Fehlerfall das EMS-Formular mit den Fehlermeldungen im Browser angezeigt wird.

So legen Sie ein Spiegelformular an

Neues Formular im System anlegen.
Häkchen in der Konfiguration bei "Action-Paramater setzen" setzen.
Legen Sie die Felder im E-Mail-Marketing-System fest und konfigurieren Sie die Felder mit allen Optionen.
Kopieren Sie den notwendigen Quelltext inkl. Integrations-URL aus der Vorschau in Ihr Fremdformular.

Interne Feldnamen

Die internen Namen für die Ersetzungsvariablen sind unter dem Reiter "Felder"/ "Formular“ zu finden.

Die internen Namen für die Ersetzungsvariablen sind auch direkt im Pool unter dem Reiter „Konfiguration der Poolfelder“ unter „Name“ sowie im Quelltext der Formular-Vorschau zu finden.

Die Integrations-URL

Unter dem Reiter „Integration“ finden Sie zahlreiche Codeschnipsel. Mit diesen Integrations-URLs können Sie das Formular in verschiedene Objekte wie z.B. eMailings, externe Webseiten oder iFrames einbinden.

Dynamische Spiegelformulare

Bei der dynamischen Integration von Spiegelformularen wird die Formularkonfiguration aus dem System per CURL und Ajax abgerufen. Diese Abfrage liefert ein JSON zurück, mit welchem im Anschluss auf Ihrer Webseite das Formular gerendert werden kann.

Um die Konfiguration abzurufen, wird eine spezielle URL benötigt, welche die "SID" des Formulars enthält.

https://DOMAIN/api/form/v1/{$SID}

Die SID finden Sie in der Formular-Integrations-URL hinter den Zeichen "sid=".

Weitere Details zur verwendeten Formular-REST-API

Auf Basis von jQuery haben wir Ihnen ein Beispiel Code zur Verfügung gestellt, welcher Ihnen das Formular rendert:

Code anzeigen

$.get("PFAD_ZUR_PHP_DATEI", function (data) { 
   document.title = data.form.title; 
   var old_protocol = data.form.action; 
   var protocol = old_protocol.search(':'); 
   var new_protocol = old_protocol.slice(protocol); 
   var action = 'https' + new_protocol; 
   var form = $('<form accept-charset="utf-8" action="' + action + '" id="profileform" method="post"></form>'); 
   var wrapper_container = $('<div id="form"></div>'); 
   var content_container = $('<div id="formfields"></div>'); 
   var table = $('<table></table>'); 
   var tbody = $('<tbody></tbody>'); 
   var fields = data.fields; 
   var error = $('<div id="mandatoryerrors">Markierte Pflichtfelder nicht ausgefüllt</div>'); 
   var row = {}; 
   var groupBy = "sort"; 

   $('#beispiel').prepend(form); 
   $(wrapper_container).prepend(error); 
   $(form).append(wrapper_container); 

   wrapper_container.append(content_container); 
   content_container.append(table); 
   table.append(tbody); 
   error.hide(); 

   /*------------------------------- Sort ------------------------------------*/ 
   for (var i = 0; i < fields.length; i++) { 
      if (!row[fields[i][groupBy]]) { 
         row[fields[i][groupBy]] = []; 
      } 
      row[fields[i][groupBy]].push(fields[i]); 
   }; 
   /*------------------------------- row ------------------------------------*/ 
   $.each(row, function (k, v) { 
      var tr = $('<tr></tr>'); 
      var label_container = $('<th scope="row"></th>'); 
      var input_container = $('<td></td>'); 
      tbody.append(tr); 
      tr.append(label_container); 
      tr.append(input_container); 
      $('tr:odd').attr('class', 'odd'); 
   /*------------------------------- Column -----------------------------------*/ 
   $.each(v, function (key, value) { 
      /*------------------------------- Text ------------------------------------*/ 
      if (value.type == "text") { 
         var input = $('<input id="' + value.name + '" name="' + value.name + '" type="' + value.type + '" />'); 
         var label = $('<label for="' + value.name + '">' + value.label + '</label>'); 
         /*------------------------------- Mandatory -------------------------------*/ 
         if (value.required == 1) { 
            $(input).addClass('mandatory'); 
            $(label).addClass('mandatory'); 
         } 
         input_container.append(input); 
         label_container.append(label); 
      } 
      /*------------------------------- Select ----------------------------------*/ 
      if (value.type == "select") { 
         var select = $('<select id="' + value.name + '" name="' + value.name + '" type="' + value.type + '"></select>'); 
         var label = $('<label for="' + value.name + '">' + value.label + '</label>'); 
         /*------------------------------- Options ---------------------------------*/ 
         $.each(value.options, function (okey, ovalue) { 
            $.each(ovalue, function (k, v) { 
               select.append(new Option(v, "value")); 
            }); 
         }); 
         /*------------------------------- Mandatory -------------------------------*/ 
         if (value.required == 1) { 
            $(select).addClass('mandatory'); 
            $(label).addClass('mandatory'); 
         } 
         input_container.append(select); 
         label_container.append(label); 
      } 
      /*------------------------------- Checkbox --------------------------------*/ 
      if (value.type == "checkbox") { 
         var label = $('<label for="' + value.name + '">' + value.label + '</label>'); 
         /*------------------------------- Options ---------------------------------*/ 
         $.each(value.options, function (okey, ovalue) { 
            $.each(ovalue, function (k, v) { 
               var input = $('<div><label><input class="checkbox typemultipleselection option' + k + '" id="' + value.name + ':' + k + '" name="' + value.name + ':' + k + '" value="1" type="' + value.type + '" /> <span class="typemultipleselection option' + k + '" >' + v + '</span></label></div>'); 
               input_container.append(input); 
            }); 
         }); 
         /*------------------------------- Mandatory -------------------------------*/ 
         if (value.required == 1) { 
            $('.checkbox').addClass('mandatory'); 
            $(label).addClass('mandatory'); 
         } 
         label_container.append(label); 
      } 
      /*------------------------------- Radio -----------------------------------*/ 
      if (value.type == "radio") { 
         var label = $('<label for="' + value.name + '">' + value.label + '</label>'); 
         /*------------------------------- Options ---------------------------------*/ 
         $.each(value.options, function (okey, ovalue) { 
            $.each(ovalue, function (k, v) { 
               var input = $('<div><label><input class="checkbox" id="' + value.name + ':' + k + '" name="' + value.name + '" type="' + value.type + '" value="' + k + '" /> <span>' + v + '</span></label></div>'); 
               input_container.append(input); 
            }); 
         }) 
         /*------------------------------- Mandatory -------------------------------*/ 
         if (value.required == 1) { 
            $('.checkbox').addClass('mandatory'); 
            $(label).addClass('mandatory'); 
         } 
         label_container.append(label); 
      } 
   }); 
}); 
/*------------------------------- Submit -------------------------------*/ 
var action = $('<div class="action"></div>'); 
var submit = $('<input class="submit" name="submit" value="Abschicken" type="submit"/>'); 
wrapper_container.append(action); 
action.append(submit); 

jQuery.validator.addClassRules('mandatory', { required: true }); 
$('#profileform').validate({ rules: { mandatory: { required: true } }, errorPlacement: function () { $('.mandatory').addClass('mandatoryerror'); error.show(); return false; } }); });

Webformulare

Möglichkeiten der Integration

Evalanche Formulare in iFrame oder Browserfenster:

Integration als Spiegelformular:

Integration via SmartForms-API Rest:

iFrame und neues Browserfenster

Einbinden auf der Website als IFrame

Einbinden im eMailing mit vorausgefüllten Feldern

Achtung!

Spiegelformular

Integrations-Arten von Spiegelformularen

Statische Integration:

Dynamische Integration:

Statische Integration von Spiegelformularen

So legen Sie ein Spiegelformular an

Interne Feldnamen

Die Integrations-URL

Dynamische Spiegelformulare

Verwandte Beiträge