The system offers you various options for integrating web forms on the website or in the e-mail.
Possibilities of integration
Possibilities of integration
Since forms can be integrated into websites in different ways, there are various advantages and disadvantages.
Evalanche forms in iFrame or browser window:
+ Pre-fillable forms when the user is identified
+ Progressive profiling (do not query already filled in fields)
+ Protection against external entries (CSRF token)
+ Changes only at a central place in Evalanche
- Separate layout of the form
- More difficult adaptation for mobile presentations
Integration as mirror form:
+ Design of the form is done by website
+ Easy adjustment for mobile displays
- No prefillable forms
- No progressive profiling (do not query fields that have already been filled in)
- No protection against external entries (CSRF token)
- Changes on website and in Evalanche
Integration via SmartForms API Rest:
+ Design of the form is done by website
+ Easy adaptation for mobile displays
+ Pre-fillable forms
+ Server-side validation possible
+ Protection against third-party entries (via token)
+ Changes only have to be made in the Evalanche form
All integration URLs can be found directly at the form below the integration tab.
In the tab Integration the different code snippets for the integration of the forms are available.
iFrame and new browser window
In this case, a link has to be included on the website or in the e-mail, which opens the form in a separate window.
<a href="[URL AUF FORMULAR]" target="_blank">Link to form</a>
Embedding on the website as IFrame
< iframe frameborder="0" src="[URL ON FORM]" width="500" height="800">
Your browser does not support iFrames.
<a href="[URL ON FORM]" target="_blank">further</a>
</iframe>
(URL ON FORM stands for the URL of the corresponding form. You can find the link to the form in the list view of the form and under the Integration tab page)
Embedding in eMailing with pre-filled fields
We provide a special personalization variable for this purpose:
Code for eMail (text variant):
{$FORM:ID}
Code for e-mail (HTML variant):
<a href="{$FORM:ID}" target="_blank">Link to form</a>
Look out!
If the pool of the form and the pool of the transferred profile are different pools, only the standard fields specified by the system are prefilled.
Mirror form
A mirror form is an individually created form that sends data in post format to the URL of the action attribute of the form. This action URL should be the integration URL of a form in the email marketing system. Both forms must contain the same fields to be transferred. The form does not need to be designed in the system.
With a mirror form, the values of the individual fields are transferred from a third-party form to an email marketing system form and entered into the pool provided for this purpose.
Integration types of mirror forms
Mirror forms can be integrated into web pages in different ways, resulting in different advantages and disadvantages.
Static integration:
+ Design of the form is done by website
+ Easy adaptation and flexibility for mobile presentations
- No prefillable forms
- No progressive profiling (do not display/query already filled out fields)
- No protection against external entries (CSRF token)
- Field changes must be made on the website and in Evalanche
Information on the static integration of mirror forms
Dynamic integration:
+ Design of the form is done by website
+ easy adjustment for mobile displays
+ Changes only have to be processed at one place (email marketing system)
- No prefillable forms
- No progressive profiling (do not display/query already filled out fields)
- No protection against external entries (CSRF token)
Information on the dynamic integration of mirror forms
More details about the form REST API used
Static integration of mirror forms
The data is transferred by means of a POST request. The aim of the request is the Integration URL of the EMS form, which must be specified in the action attribute of the <form> tag. In principle, the field variables for value transfer are created in the notation "form_FIELDNAME". FIELDNAME" is always the internal name of the field. By clicking on the double arrow (top right) in the form preview, you can open the form in a new browser tab and display the source code of the form there.
<form method="post" action="Integrations-URL" accept-charset="UTF-8">
<select name="form_SALUTATION ">
<option value="0" selected="selected">-</option>
<option value="1">Ms./Mrs.</option>
<option value="2">Mr.</option>
</select>
<input type="text" name="form_FIRSTNAME" />
<input type="text" name="form_NAME" />
<input type="text" name="form_EMAIL" />
.....
</form>
You can find the individual field variables in the source code. Otherwise, you can also find the internal field names in the pool under "Integration" or in the field configuration of the form. The fields marked as "hidden" in the field configuration of the form, which are to assign a fixed value to the profiles, also work in mirror form scenarios. These fields do not have to be transferred from the external form. A mail dispatch configured in the form (confirmation mail, report mail) is triggered automatically.
It is important that the error validation of the external form takes place before the form is sent to the e-mail marketing system, otherwise the EMS form with the error messages will be displayed in the browser in case of an error.
To create a mirror form
- Create new form in the system.
- Check the box "Set action parameters" in the configuration.
- Set the fields in the email marketing system and configure the fields with all options.
- Copy the necessary source code incl. integration URL from the preview into your foreign form.
Internal field names
The internal names for the replacement variables can be found under the tab "Fields"/ "Form".
The internal names for the replacement variables can also be found directly in the pool under the tab "Configuration of the pool fields" under "Name", and in the source code of the form preview.
The integration URL
Under the tab "Integration" you will find numerous code snippets. With these integration URLs you can integrate the form into different objects like e.g. eMailings, external web pages or iFrames.
Dynamic mirror forms
With the dynamic integration of mirror forms, the form configuration is retrieved from the system via CURL and Ajax. This query returns a JSON, which can then be used to render the form on your website.
To retrieve the configuration, a special URL is required, which contains the "SID" of the form.
https://DOMAIN/api/form/v1/{$SID}
You can find the SID in the form integration URL after the characters "sid=".
Further details about the Form REST API used
Based on jQuery we have provided you with a sample code which renders the form:
$.get("PATH_TO_PHP_FILE", 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">Marked mandatory fields not filled in</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="Submit" 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; } }); });