With the SmartForm API, forms can be implemented very quickly and easily into an existing website very quickly. You can find detailed information about the SmartForm API you can find in the article "SmartForms API (REST)".
The following is a step-by-step explanation of how to implement forms using the SmartForm API can be implemented into a website. Please have these steps carried out by a technical expert with Java Script, HTML and CSS knowledge.
Create form
First, of course, you need an Evalanche form with a few fields. If you need assistance here, the following articles will help you:
It is also important that in the configuration of the form. check the "Enable form API" checkbox and specify the domain of your website. (without http/https) in the "Allowed domains" field.
Note on Form Integration!
The provided code is for example purposes only. Customers or their agencies are solely responsible for the integration and operation of the form.
Evalanche provides all necessary information and assumes that customers possess the required technical expertise for implementation. The functionality of the form integration is the sole responsibility of the customer.
Support services related to this topic are provided exclusively as technical support and will be billed accordingly. Since support has limited access to external systems and relies on customer input, support can only offer limited assistance with troubleshooting and cannot guarantee correct implementation on the customer's side.
Integrate JavaScript client
After creating an Evalanche form, you still need a website where the form is to be integrated. To invoke the JavaScript client, a simple script is required to pass the various parameters, along with an HTML container into which the form is to be rendered.
The static script snippet:
<script type="module" src="https://scnem-content.com/static/lib/common/smartformclient/smartform-webcomponent.mjs"></script>
The integration URL (direct URL or personalized) can be copied from the integration tab of the Evalanche form. Before doing so, the desired domain should be selected in the "Available domains" dropdown menu.
The integration URL with and without personalization:
// with UID parameter, needed for prefilled forms
<evalanche-smartform integrationurl="https://scnem.com/art_resource.php?sid=xxxxxx,u={$UID}"></evalanche-smartform>
// without UID parameter
<evalanche-smartform integrationurl="https://scnem.com/art_resource.php?sid=xxxxxx"></evalanche-smartform>
Here is the complete sample HTML, including the script section and integration URL. For the example to work, you must enter your form's integration URL.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</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>
The following example CSS is suitable for a simple presentation of form fields and error messages.
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;
}
}
}
Note:
For more info on SmartForms, see the post "SmartForms API (REST)".
Attention:
Please make sure that you also implement suitable protective mechanisms such as ReCaptcha for SmartForms. Also make sure that the rate limit from the form configuration also applies to entries via the Smartforms API. If you implement the API on the server side, it may be useful to adjust or deactivate the rate limit.