SUMMARY
Step 1: Form design
The form element
Adding and positioning fields
Step 2: The different fields
Field types
Pre-configured fields
Step 3: Field settings
Specific parameters according to field type
Specific settings based on preconfigured fields
Step 4: Advanced Form Settings
Double button on the form
Configure conditional fields
Step 1: Form design
The form element
Select the form you wish to add to your page from the list of elements.
On the form, you can access the display parameters, which allow you to deactivate the appearance of labels ( def: represents a label for a form field ) and placeholders ( def: is an attribute that allows you to enter a default indicative text in a form field).
You’ll also have access to settings that allow you to restrict temporary email addresses (def: restricting temporary email addresses blocks form submissions when domains such as yopmail… are used) and to the form autocomplete option (this allows participants to automatically fill in their information. The form auto-fill settings thus allow the form to be pre-filled using data that is already known.)
When enabling this option, you must first select the data source. Several sources are available, such as an SDK/URL, an operation, participant recognition, or other methods of data retrieval.
Once you've determined the source, you'll need to choose the operating method :
Auto-complete form: The form is automatically pre-filled using retrieved data. This information may come from a game link configured with auto-fill, an SDK, a flow between a parent and child operation, or the recognition of a previous entry, depending on the selected source. The form remains visible, and the participant can verify or modify the displayed information.
Auto-fill and automatic form submission: The form is pre-filled and then automatically submitted. It is therefore not displayed to the participant, who is redirected directly to the next step in the flow.
📢 When setting up autocomplete via an SDK or URL, you’ll need to add attributes either in the advanced settings of your SDK code or in the game URL, in addition to enabling the option. You’ll need to retrieve the IDs for the standard fields (see list below); however, for extended fields, the format must be “extend_” followed by the field’s hash_id.
exemple : ?email=test@test.fr&firstname=Test&extend_kZq42b=magasin,
To retrieve the IDs of the `extend` fields, simply go to the list of elements, where you'll find the `hash_id`s of your form's fields. You can copy them to make it easier to retrieve them later.
List of fields supported by auto-fill
Name | Description |
Participant's Email | |
firstname | Participant's firstname |
lastname | Participant's lastname |
address | Participant's adress |
city | Participant's city |
postal_code | Participant's postal code |
birthday | Participant's birthday |
phone | Participant's phone |
access_codes | Access code |
customer_number | Customer number |
extend_kZq42b | The format must be “extend_” followed by the field’s hash_id.
The affected extend field types are:
|
You’ll be able to edit the error messages for the form fields. You’ll also be able to customize the form’s appearance by setting the spacing between fields and columns.
You’ll be able to change the color, height, and font of the text for each form component: fields, labels, placeholders, and error messages.
Tip💡 You can add multiple form pages to your flow. Simply add a single page and insert a form element into it.
2. Adding and Positioning Fields
To insert new fields into your form, click the button with the “+” icon to select a field from the list and drag it into the form.
Then, you can change the position of a field by selecting it and moving it within the form.
💡Tip: To organize your form, you can create a form with multiple columns. Simply drag and drop the field to place it next to another field.
For desktop, we recommend a form with a maximum of 3 columns, while for mobile, we recommend a maximum of 2 columns.
Step 2: The Different Fields
Field Types
In the list provided, you’ll find several types of fields that you can customize:
Simple Field
Import Field (used to allow participants to upload proof of purchase for a contest requiring a purchase, or images, etc. You can add only one of these fields to your form)
Checkbox Field (a single field with a checkbox)
Multiple-Choice Field (a field for selecting one or more answers)
Dropdown Field (a field with a dropdown menu for selecting an answer)
Date Field
Access Code Field (allows users to enter an access code)
💡 Tip: To add an opt-in field and a rules field to your form, you’ll need to use a checkbox field.
As for the opt-in, you’ll need to enable the option during setup so that the data is properly reported in the back office statistics.
2. Preconfigured Fields
In addition to the various fields you can configure, we also offer preconfigured fields that you can insert into your form.
Phone Number Field
ZIP Code Field
Email Field (this field can only be included once per form in the game)
Civility Field
FirstName Field
Date of Birth Field
LastName Field
Address Field
City Field
Customer Number Field
IBAN Field
BIC Field
Store Field
📢 Note: When setting up your form, use preconfigured fields for information such as email address, first name, last name, etc., rather than simple fields.
This is because when you export submissions, simple fields will not be recognized as standard fields and will appear as extended fields.
In addition, if you need to collect the same type of information multiple times (for example, a birth name and a married name), do not add the same preconfigured field multiple times. The data would be overwritten because it would be saved in the same field.
In this case, we recommend using a preconfigured field for the primary information (such as the first name) and a simple field for the secondary information (such as the married name). This way, the two pieces of information will be stored separately.
For each field type, you'll find common settings such as spacing adjustments and customization options for the appearance of fields, labels, placeholders, and error messages.
You’ll be able to add regular expressions to fields (these are technical tools that allow you to validate the format of the data entered in the form)
❔Check out here this article on how to write regular expressions.
In addition, there are specific configurations for each type of field.
Step 3: Configuring Fields
Specific settings based on field type
Simple Field
- Option to edit the text for the label and placeholder
- Option to make the field required
- Option to enable duplicate detection (the duplicate detection option allows you to create a “profile” for the participant upon their first submission of the form. For duplicate detection to work, it must be linked to the unique identifier, which is the email field. Duplicate detection will block submission validation if the data from the second submission differs. The purpose of duplicate detection is to prevent the use of different data when the same person submits the form again.)
- Option to make the field non-editable and non-visible as part of the form’s autocomplete feature.
Import Field
- Option to edit the text for the label, placeholder, and import button caption
- Option to make the field required
Checkbox Field
- Add field text
- Option to make the field required
- For an opt-in field, enable the opt-in option
- Option to make the field uneditable and invisible as part of form autocomplete.
Choice field
- Edit the label text
- Option to make the field required
- Option to enable multiple selections by setting a minimum and maximum number of responses to select.
- Option to make the field read-only and hidden during form autocomplete.
- Add the field’s various options
Select Field
- Ability to edit the text for the label and placeholder
- Ability to make the field required
- Ability to make the field read-only and hidden during form autocomplete.
- Addition of various field options
Date Field
- Ability to edit the text for the label and placeholder
- Ability to make the field required
- Option to make the field read-only and hidden during form autocomplete.
- Configure the minimum and maximum years
Access Code Field
- Option to edit the text for the label and placeholder
- Option to make the field required and/or unique
TIP💡When adding access codes, you have two options: you can either let the platform automatically generate the codes by specifying the desired number and format, or you can import your own CSV file containing the codes.
For the import to be valid, the CSV file must include a header line.
2. Specific settings for preconfigured fields
Phone number field
- Option to edit the text for the label and placeholder
- Option to make the field required
- Option to enable duplicate detection (the field is used to detect duplicate entries; in other words, if a participant attempts to re-enter by changing the data, they will be blocked)
- Option to make the field read-only and hidden as part of the form’s autocomplete feature.
ZIP Code Field
- Option to edit the label and placeholder text
- Option to make the field required
- You can enable duplicate detection (the field helps prevent duplicate entries; in other words, if a participant tries to resubmit by changing the data, they will be blocked)
- You can make the field non-editable and hidden during form autocomplete.
Email Field
- Option to edit the text for the label and placeholder
- Option to make the field required
- Option to enable duplicate detection (the duplicate detection option creates a “profile” for the participant upon their first submission of the form. For duplicate detection to work, it must be linked to the unique identifier, which is the email field. Duplicate detection will block submission validation if the data from the second submission differs. The purpose of duplicate detection is to prevent the same person from resubmitting the form using different data.)
- Option to make the field non-editable and hidden as part of the form’s autocomplete feature.
- The “Automatically Generated Email” option automatically creates an email address for each participant. This feature simplifies the process when it is not necessary to collect a valid email address.
The Email field remains on the form by default, but you can choose to hide it if you do not want it to be visible to participants.
TIP 💡The “Email” field can only be added once in your game flow. It is essential for instant-win mechanics, as it is required to deliver prizes and send communications to participants.
Civility Field
- Option to edit the text for the label and placeholder
- Option to make the field required
- Configure title options and enable the “gender-neutral” option
- Option to make the field uneditable and hidden as part of the form’s autocomplete feature.
Firstname and Lastname Fields
- Option to edit the text for the label and placeholder
- Option to make the field required
- Option to enable duplicate detection (the duplicate detection option creates a “profile” for the participant upon their first submission of the form. For duplicate detection to function, it must be linked to the unique identifier, which is the email field.) Duplicate detection will block submission validation if the data from the second submission differs. The purpose of duplicate detection is to prevent the same person from resubmitting the form using different data.)
- Option to make the field read-only and hidden as part of the form’s autocomplete feature.
Date of Birth Field
- Option to edit the text for the label and placeholder
- Option to make the field required
- Option to make the field read-only and hidden as part of form autocomplete.
- Configure the minimum and maximum years
Address and City Field
- Option to edit the text for the label and placeholder
- Option to make the field required
- Option to enable duplicate detection (the duplicate detection option creates a “profile” for the participant upon their first submission of the form. For duplicate detection to function, it must be linked to the unique identifier, which is the email field.) Duplicate detection will block submission validation if the data from the second submission differs. The purpose of duplicate detection is to prevent the same person from resubmitting the form using different data.)
- Option to make the field read-only and hidden as part of the form’s autocomplete feature.
Customer Number Field
- Option to edit the text for the label and placeholder
- Option to make the field required
- Option to enable duplicate detection (the duplicate detection option creates a “profile” for the participant upon their first submission of the form. For duplicate detection to work, it must be linked to the unique identifier, which is the email field. Duplicate detection will block the submission from being validated if the data from the second submission differs. The purpose of duplicate detection is to prevent the use of different data when the same person submits the form again.)
- Option to make the field non-editable and hidden as part of the form’s autocomplete feature.
IBAN and BIC Fields
- Option to edit the text for the label and placeholder
- Option to make the field required
- Option to enable duplicate detection (the duplicate detection option creates a “profile” for the participant upon their first submission of the form. For duplicate detection to function properly, it must be linked to the unique identifier, which is the email field. Duplicate detection will block the submission from being validated if the data from the second submission differs. The purpose of duplicate detection is to prevent the same person from submitting the form multiple times using different data.)
- Option to make the field non-editable and non-visible as part of the form’s autocomplete feature.
Store Field
- You can edit the text for the label and placeholder
- You can make the field required
You can configure your stores by clicking the “+” button. There are two ways to add stores: importing via a CSV file or creating them manually.
If you're adding a store manually, you must provide at least the region and the store's location. You can also add more details, such as the store's name, address, ZIP code, and city, to create a more complete store profile.
Once stores have been imported via a CSV file or added manually, you’ll have an overview of all the configured stores. This allows you to easily view information about each store and verify that the import or creation was successful.
Step 4: Advanced Form Settings
Double Form Button
You can now configure two types of form validation:
submission with opt-in acceptance
standard form submission.
To set up a submission with opt-in confirmation, add a submit button to your form, then link it to the corresponding checkbox field. This field can be visible or hidden on the form, depending on your needs.
Once the button is linked to the checkbox field, if the participant submits the form by clicking that button, the value of the checkbox will be automatically saved. This allows you to manage multiple submission actions within a single form, with or without opt-in consent.
2. Configure Conditional Fields
It is now possible to set display conditions for fields in a form.
This feature allows you to dynamically show or hide certain fields based on the participant's responses. Conditions are configured directly from the form editor.
When you click the icon to add a display condition, a configuration window opens.
You can then select the form field to which you want to apply the condition, and choose the operator from the following options: is filled in, is empty, or is equal to. If you select “is equal to,” simply enter the expected value.
For the Date of Birth field, several operators are available to configure your conditions: is equal to, is greater than, is less than, is greater than or equal to, and is less than or equal to.
Finally, choose the field to display when the condition is met.
From the form editor, you can also choose to display conditional fields. This option allows you to view all configured fields and optimize the layout and editing of your form.
