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)".
Es gibt einen speziellen JavaScript Client (SmartForm Client), der die Integration - basierend auf der SmartForm API - von Evalanche Webformularen erleichtert.
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.
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:
Es ist wichtig, dass Sie in der Konfiguration des Formulars die Checkbox "Formular API aktivieren" anhaken und die Domain Ihrer Website ( ohne http:// bzw. ohne https:// ) im Feld "Erlaubte Domains" hinterlegen.
JavaScript-Client einbauen
Nachdem Sie ein Evalanche Formular erstellt haben, benötigen Sie noch eine Website, in der das Formular integriert werden soll. Um den JavaScript-Client aufzurufen, wird ein einfaches Script benötigt, das die verschiedenen Parameter übergibt sowie einen HTML-Container, in den das Formular gerendert werden soll.
Hinweis zur Formular-Einbindung!
Der bereitgestellte Code dient ausschließlich als Beispiel. Für die Einbindung und den Betrieb sind Kunden bzw. beauftragte Agenturen selbst verantwortlich.
Evalanche stellt alle dafür notwendigen Informationen zur Verfügung und setzt auf Kundenseite das erforderliche technische Know-how zur Implementierung voraus. Die Funktionsfähigkeit der Formular-Einbindung liegt vollständig in der Verantwortung des Kunden.
Supportleistungen zu diesem Thema erfolgen ausschließlich als technischer Support und werden entsprechend abgerechnet. Da der Support nur eingeschränkten Zugriff auf externe Systeme hat und auf den Input der Kunden angewiesen ist, kann der Support bei der Fehlerbehebung nur eingeschränkt unterstützen und keine Gewährleistung für eine korrekte Umsetzung auf Kundenseite übernehmen.
Die statische Script-Passage:
<script type="module" src="https://scnem-content.com/static/lib/common/smartformclient/smartform-webcomponent.mjs"></script>
Die Integrations-URL kann im Integrationstab des Evalanche Formulars kopiert werden. Vorab sollte im Abschnitt Domain die gewünschte Domain ausgewählt werden.
Code-Snippet mit Integrations-URL (mit und ohne Personalisierung):
// mit UID-Parameter, wird bei vorausgefüllten Formularen benötigt
<evalanche-smartform integrationurl="https://scnem.com/art_resource.php?sid=xxxxxx,u={$UID}"></evalanche-smartform>
// oder ohne UID-Parameter
<evalanche-smartform integrationurl="https://scnem.com/art_resource.php?sid=xxxxxx"></evalanche-smartform>
Hier das gesamte Beispiel-HTML mit Script-Passage und Integrations-URL. Damit das Beispiel funktioniert, muss die Integrations-URL Ihres Formulares eingetragen werden.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titel</title>
</head>
<body><br />
<script type="module" src="https://scnem-content.com/static/lib/common/smartformclient/smartform-webcomponent.mjs"></script>
<div>Smartforms-Formular<br />
<evalanche-smartform integrationurl="https://scnem.com/art_resource.php?sid=xxxxxx,u={$UID}"></evalanche-smartform>
</div>
</body>
</html>
Für eine einfache Darstellung von Formularfeldern und Fehlermeldungen eignet sich nachfolgendes Beispiel-CSS.
evalanche-smartform .fields-container {
display: flex;
flex-direction: column;
gap: 1em;
}
evalanche-smartform .row {
display: flex;
gap: 1em;
}
evalanche-smartform .field {
display: flex;
gap: 0.25em;
}
evalanche-smartform .errors-container {
border: 2px solid red;
}
evalanche-smartform {
.mandatory-error, .validation-error {
&:is(fieldset), > [name] {
border: 2px solid red;
}
}
}
Hinweis:
Weitere Infos zu den SmartForms finden Sie im Beitrag "SmartForms API (REST)".
Achtung:
Bitte vergewissern Sie sich, dass Sie auch bei den SmartForms geeignete Schutzmaßnahmen, wie ReCaptcha implementieren, und dass das Rate-Limit aus der Formular-Konfiguration ebenfalls für Eintragungen via Smartforms-API Gültigkeit hat. Falls Sie die API serverseitig implementieren, könnte es sinnvoll sein, das Rate-Limit anzupassen oder zu deaktivieren.