Integrate SmartForms into the website

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.

Step 1 - 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:

• Creating forms.
• Create newsletter signup form & configure

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.

Step 2 - Download SmartForm example

The SmartForms API requires a javascript that renders the form on the the website. You can download the javascript example here download and you can find a sample HTML code for the integration here. 

Step 3 - Upload JavaScript client to the website

Upload the JavaScript client to the website in which the form is to be integrated.

Step 4 - Call JavaScript client

To call up the uploaded JavaScript client, a script is required that passes the various parameters and an HTML container into which the form is to be rendered.

Sample code:

<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 of the website on which the form is to be integrated. The same domain that was specified in the configuration of the form (see step 1)
• form_sid: This is the encoded ID of the form in Evalanche. You can find the ‘form_sid’ or the ‘sid’ in the Evalanche form object. To do this, navigate to the ‘Integration’ tab. At the top you will find the box ‘Direct URL to this object’ with a URL that contains the which contains the SID at the very end.

• form_container_id: Specifies where on the website the form should be created. The client searches the website for a div with this with this ID and inserts the form there.
• form_id_prefix (optional): The client provides the source code of the form with unique IDs at various points. If these IDs collide with other IDs on your own website, a prefix can be used here. prefix can be used here, which is prefixed to all IDs of the form.
• profile_id (optional): If the form is to be displayed pre-filled, a profile ID can be entered here. The profile ID must be retrieved from a source (database, URL call) and inserted here. be inserted here.
• url_profileid_parameter (optional): It is also possible to to take the encrypted Evalanche profile ID from the URL if this has been has been passed. The name of the parameter can be specified here.
• class_name (optional): To be able to style the resulting form with CSS the CSS class ‘SmartForm’ is used. The class name can be overwritten with this parameter to a custom value.
• force_new_profile (optional): This option forces that only new profiles are created via the form. No existing profiles are profile is updated, which can result in duplicates.
• allow_empty_profile (optional): If this option is activated, profiles are also created if the form is sent without any entries.
• show_label_in (optional): The field headings or field designations can be used as field labels (show_label_in: ‘label’), as placeholder text in text entries (show_label_in: ‘placeholder’) or both (show_label_in: ‘both’), as required.