Purpose group: landing page template builders
In Ternair Campaign, various functionalities can be determined through the HTML code of a landing page. These functionalities guide the user in completing the data capture form used on a landing page.
Use the function keys CTRL-F to search the HTML code.
Standard data capture fields
The data collected through data collection forms is divided into default values and other values.
All collected default values are stored in the entity 'Datacapture' and all other values are stored in the entity 'Datacapture properties' under the source 'Campaign Information (Ternair)'.
Standard values
The following default profile data is stored in the entity 'Datacapture':
EN | NL |
|---|
lastname | surname |
surname | first name |
initials | first name |
prefix | interjection |
gender | gender |
e-mail | email |
phone, phonenumber | phone |
mobile, mobilenumber | mobile |
street | street |
number, housenumber | housenumber |
addition | addition |
postalcode, zipcode | postalcode |
city | place |
ddbirth, birthdate | date of birth |
All values that do not match any of the default values listed above are stored in the 'Datacapture properties' entity.
The following metadata is added to the datacapture records in Ternair Campaign:
date
selection_id
run_id
block_id
Form Attributes
The following form attributes can be used in a datacapture form.
data-capture-form
Attribute to recognize the form. Can be placed in a form or div element.
data-capture-validate-summary
Error messages are displayed below the text box by default. This attribute collects all error messages above the form.
data-capture-validate-summary
Labels for validation are ignored with this attribute (if summary is active).
data-capture-submit
Save button. This attribute can only be used if the <form> tag is not in use. If the <form> tag is used, the default submit can be used: <button type="submit">.
data-capture-success
This attribute replaces the "data-capture-form" content after it has been successfully submitted. This element is placed on both the form and the content. At the form level, this attribute has a value corresponding to the id of the success element.
action
Attribute with value. This attribute can only be used when using a <form> tag. This indicates a second landing page displayed after successful form submission.
Example - Form with success page |
|---|
<div data-capture-form data-capture-validate-summary data-capture-success="successForm"> <div> <label>voornaam</label> <input data-capture value="[voornaam]" placeholder="voornaam"/> </div> <div> <label>email address</label> <input data-capture value="[email]" placeholder="email"/> </div> <button data-capture-submit>Save</button> </div> <div data-capture-success id="successForm"> We received your data. </div> |
Example - After saving data show a second landing page |
|---|
<form data-capture-form data-capture-validate-summary method="get" action="%%landingpage%%DataCapture_Succes%%"> <div> <label>voornaam</label> <input data-capture value="[voornaam]" placeholder="voornaam"/> </div> <div> <label>email address</label> <input data-capture value="[email]" placeholder="email"/> </div> <button type="submit"> Save</button> </form> |
Input elements
The following input elements can be used in a data capture form.
data-capture
This value is stored in the database.
data-capture-required
Field is approved/required.
data-capture-int
Numeric field (integer). Only numeric values can be entered.
data-capture-email
This field contains an e-mail address. The value must contain an @.
data-capture-custom-message
Attribute with value. The value is displayed in case the input is invalid. Use in conjunction with data-capture-email.
data-capture-validate-message
Attribute with value. The value is displayed if the field is empty. This attribute is placed once on list of elements (radio button, checkbox, drop-down).
value
Attribute with value. Values are used to prefill text boxes.
Example |
|---|
Text box last name | <input data-capture data-capture-required value= [Achternaam]" data-capture-validate-message="Achternaam is mandatory"/> |
Text box email | <input data-capture name="email" data-capture-email data-capture-required value="[email]" placeholder="email" data-capture-validate- message="email address is mandatory" data-capture-custom-message="email address is invalid"/> |
Text box shoe size | <input data-capture class="form-control" name="shoe size" data-capture-int placeholder="shoe size" /> |
Radio buttons, check boxes and drop-down elements
data-capture-value
Attribute with value. If the value matches data-capture-value, the value is selected.
Example - Radio button (:radio) |
|---|
Radio button (:radio) <input data-capture type="radio" data-capture-required name="geslacht" value="m" data-capture-value="[geslacht]" data-capture-validate-message="Geslacht is mandatory"> Male <input data-capture type="radio" data-capture-required name="geslacht" value="f" data-capture-value="[geslacht]"> Female |
Example - Drop-down (select) |
|---|
<select data-capture name="land" data-capture-value="[land]"> <option value=""></option> <option value="NL">Netherlands</option> <option value="BE">Belgium</option> <option value="DE">Germany</option> </select> |
Dividing the form into steps
data-capture-step
Container attribute of the step (part of the form). This attribute must contain a value. The first step is 1, an unlimited number of steps is allowed.
Example - Text box last name |
|---|
<form data-capture-form method="get"> <div data-capture-step="1"> [part 1 form] </div> <div data-capture-step="2"> [part 2 form] </div> <div data-capture-step="3"> [part 3 form] </div> </form> |
data-capture-step-next
Button attribute to move to the next step. The next step is determined automatically (ascending).
data-capture-step-prev
Button attribute to go to the next step. Next step is determined automatically (descending).
data-capture-step-goto
Button attribute with value. Button to go immediately to a specified step.
data-capture-ignore-validate
Button attribute to ignore approval. For example button to go back.
Example |
|---|
<div data-capture-form data-capture-validate-summary data-capture-success="successForm"> <div data-capture-step="1"> <div> <label>voornaam</label> <input data-capture value="[voornaam]" placeholder="voornaam"/> </div> <div> <label>email address</label> <input data-capture value="[email]" placeholder="email"/> </div> <button data-capture-step-next>Next</button> </div> <div data-capture-step="2"> <div> <div> <label>woonplaats</label> <input data-capture value="[woonplaats]" placeholder="woonplaats"/> </div> <input data-capture type="checkbox" name="isthiscorrect"> My data is correct</div> <button data-capture-ignore-validate data-capture-step-prev>Previous</button> <button data-capture-submit>Save</button> </div> </div> |
Automatic-fill
Using standard automatic-fill attributes helps users fill out the form. When an autocomplete attribute is recognized by a browser, these fields are filled in automatically.
Note: autocomplete is not (yet) supported by all browsers.
Example |
|---|
<input type="email" name="email" autocomplete="email"> <input type="text" name="family name" autocomplete="family-name"> |
Additional Notes
Functional
The 'Datacapture' check box should be checked in the template settings for the landing page. This ensures that the necessary scripting for the data capture functionalities is created on the landing page.
Further, multiple forms can be placed on one landing page. Use "data-capture-success" if the forms are saved with multiple values.
Technical
jQuery does not need to be loaded into a landing page. This is done by default.
Scripts should be placed at the top of the page to avoid conflicts.
