SmartForms in die Website integrieren

Mit der SmartForm API können Formulare sehr schnell und einfach in eine bestehende Website implementiert werden. Ausführliche Informationen zur SmartForm API finden Sie im Beitrag "SmartForms API (REST)".

Im Folgenden wird Schritt für Schritt erklärt, wie die Formulare mit der SmartForm API in eine Webseite implementiert werden können. Bitte lassen Sie diese Schritte von einem Techniker mit JavaScript, HTML- und CSS-Kenntnissen vornehmen. 

Schritt 1 - Formular erstellen

Als erstes benötigen Sie natürlich ein Evalanche Formular mit ein paar Feldern. Sollten Sie hier Unterstützung benötigen, so helfen Ihnen folgende Artikel weiter:

• Formulare erstellen
• Newsletter Anmeldeformular erstellen & konfigurieren

Es ist wichtig, dass Sie in der Konfiguration des Formulars die Checkbox aktivieren "Formular API aktivieren" und die Domain Ihrer Website (ohne http/https) im Feld "Erlaubte Domains" hinterlegen.

Schritt 2 - SmartForm Beispiel downloaden

Für die SmartForms API wird ein Javascript benötigt, welches das Formular auf der Website rendert. Das Javascript Beispiel können Sie hier downloaden und einen Beispiel HTML-Code für die Einbindung finden Sie hier. 

Schritt 3 - JavaScript-Client auf der Webseite hochladen

Laden Sie den JavaScript-Client auf die Webseite hoch, in der das Formular integriert werden soll.

Schritt 4 - JavaScript-Client aufrufen

Um den hochgeladenen JavaScript-Client aufzurufen, wird ein Script benötigt, das die verschiedenen Parameter übergibt sowie einen HTML-Container, in den das Formular gerendert werden soll.

Hier ein Beispiel:

<script type="text/javascript">
const smartForm = new SmartForm({
  interface_domain: "scnem.com",
  form_sid: "xxxxxxxxxxxx",
  form_container_id: "form_container",
  form_id_prefix: "smartform_",
  profile_id: "xxxxxxxxxxxx",
});
smartForm.get_form_data();
</script>
<div id="form_container">&nbsp;</div>

• interface_domain: Domain der Webseite, auf der das Formular eingebunden werden soll. Hier muss dieselbe Domain, die in der Konfiguration des Formulars angegeben wurde (siehe Schritt 1)
• form_sid: Das ist die verschlüsselte ID des Formulars in Evalanche. Die "form_sid", beziehungsweise die "sid" finden Sie im Evalanche Formular Objekt. Navigieren Sie dazu in den Reiter "Integration". Ganz oben finden Sie die Box "Direkte URL auf dieses Objekt" mit einer URL, welche ganz am Ende die SID beinhaltet.

• form_container_id: Gibt an, wo auf der Webseite das Formular aufgebaut werden soll. Der Client sucht auf der Webseite nach einem Div mit dieser ID und fügt das Formular dort ein.
• form_id_prefix (optional): Der Client versieht den Quellcode der Formulars an verschiedenen Stellen mit eindeutigen IDs. Kollidieren diese IDs mit anderen IDs der eigenen Webseite, kann hier ein Präfix verwendet werden, das allen IDs des Formulars vorangestellt wird.
• profile_id (optional): Soll das Formular vorausgefüllt angezeigt werden, kann hier eine Profil-ID mitgegeben werden. Die Profil-ID muss aus einer Quelle (Datenbank, URL-Aufruf) geholt und hier eingefügt werden.
• url_profileid_parameter (optional): Es ist auch möglich die verschlüsselte Evalanche-Profile-ID der URL zu entnehmen, wenn diese übergeben wurde. Der Name des Parameters kann hier festgelegt werden.
• class_name (optional): Um das entstehende Formular mit CSS stylen zu können, wird die CSS-Klasse "SmartForm" verwendet. Der Klassenname kann mit diesem Parameter auf einen eigenen Wert überschrieben werden. 
• force_new_profile (optional): Diese Option erzwingt, dass nur neue Profile über das Formular angelegt werden. Es wird kein bestehendes Profil aktualisiert, dadurch können Dubletten entstehen. 
• allow_empty_profile (optional): Wird diese Option aktiviert, werden auch Profile angelegt, wenn das Formular ohne Eingaben abgeschickt wird.
• show_label_in (optional): Die Feld-Überschriften beziehungsweise Feld-Bezeichnungen können je nach Wunsch als Feld-Label (show_label_in: "label"), als Platzhalter-Text in Texteingaben (show_label_in: "placeholder") oder beides (show_label_in: "both") eingesetzt werden.