Navigation

Creating an Opt-In Form to Integrate to Your Website

Creating an opt-in form gives you the ability to personalize the default template form provided by Dialog Insightfor visitors to subscribe to your communications. This template comes with predefined texts and fields that can be edited. You can edit or delete existing contents and add new ones. The only elements that cannot be deleted are the fields that compose the primary key, as they are essential for contact identification in the application.

PrerequisiteHave enabled the opt-in and update form management module.
Access Path > Workflows > Opt-in and Update

 How To

Open the opt-in form
  1. Click on the form icon .

Configure the form

Configuring the form consists in defining the information you wish to collect on people who subscribe to your communications, how these fields will display and how this information will be integrated into Dialog Insight's database if the contact already exists in the application.

To configure the form, you need to go to the Form configuration.

Specify the contact update option

As the information provided in the opt-in form can be different from the information already in Dialog Insight when the CONTACT ALREADY EXISTS IN THE APPLICATION, it is important to specify how you want them to be processed.

To do so:

  1. Under the Profile update tab, choose the desired update option.
Option description
     
Update optionDescription
Complete the profileOnly the new information provided during opt-in will be added to the contact's profile. Therefore, if a phone number already exists in the profile and one is provided during opt-in, it will not be saved and overwrite the phone number already in the profile.
Update profileAll the information provided during opt-in will be registered in the profile. So if a phone number is provided during registration, it will overwrite the one in the profile, if one exists, or be added to the profile if there was none.
Ignore changesThe information provided during opt-in will not be saved in the existing contact's profile; only new contacts will be created.
Specify the field layout
  1. Under the Form options tab, define how you want field labels to display, either on the left, right or inside of the input area.
Enable the authentication process

If you want to be certain that the person that registers to an event is a real person, it is recommended that you enable the reCAPTCHA option so that a validation question is added to the form.

If the registration form is displayed under a domain name other than ofsys.com, you will first need to register the domain used on reCAPTCHA to get you private and public keys.

To register your site or domain with reCAPTCHA, go to https://www.google.com/recaptcha/admin#list and follow the instructions provided on screen. Once saved, reCAPTCHA will give you private and public keys that you'll need to enter in Dialog Insight.

To enable the authentication option

  1. Check the Use Google Recaptcha option.
  2. Click on Manage keys.
  3. Choose your domain, if already configured. If not, click on Add a key to register your domain name or the page to display the registration form, and specify the public and private keys that were assigned by reCAPTCHA when opening an account.
Select the information to collect for opt-in

Choosing the information to collect is done from the list of project fields. You can add, edit, and even delete fields in the Form fields. Note that it is not possible to delete fields that are part of the primary key as this information identifies contacts in the application.

To add a new field
  1. Click on the Add field link.
  2. In the field add window, select the section in which to add the field and then select the field. Can be included in the form any field of the project, and some specific fields. The fields that are already included in the form are not shown in the list, as to avoid using the same field twice.
    • If you want to add the field in a section that does not exist, you must add the section first, by clicking on Add section.

      • In the section add window, enter a label and a description for the new section. If your registration form exists in more that one language, you will need to enter do the same for each language.
      • Click Add.
    • Note on sections
      If there is only one section, its name will not show on the registration form. However, if there is more than one section, all the section labels will display on the form.

  3. Once the field is added, you need to define it by indicating at the least all the required information (fields with ).
To edit a field already in the form

Editing a field is similar to adding a new one, except that some field values cannot be edited.

  1. In the list of fields in the form, click on the edit icon  next to the field to edit.
  2. In the field edit window, edit the desired elements.
    Note that both Field and Required values cannot be edited once the field has been created.
  3. Do not forget to save your changes.
  4. If you edited a field in a form that is already online, you will need to update the workflow process for changes to be applied.
Description of input fields
     
FieldDescription
SectionName of the section that holds the field.
FieldName of the selected field. It can be a field from the project or a field specific to the form.
LabelName of the field as it should display on the form. If multiple languages are offered, you will need to specify a label for each language.
**Warning - If a label is not provided for each available language, the default language label will be used.
SourceIndicates where the field comes from. There are 3 possibilities:
  • Form field - The value is to be entered by the person completing the form.
  • Fixed value - Used to assign the same value to all. This field will not be shown on the form, but the fixed value will be registered in the contact's profile.
    If you choose this option, you will need to specify the value to be assigned in the Fixed value field.
TypeAvailable only when the field value comes from the form.
Field used to define the type of value can be inserted in the field. Any data entered in the field that does not correspond to the indicated type will trigger an error. The available field types are:
  • Textbox - Field that shows a free text area to enter the value.
  • Drop down list - Field that presents a choice of values in a drop-down list. The choice values and labels are shown in the Choices section.
  • Radio button - Field that offers a choice of responses in the format of radio buttons. The response values and fields are defined in the Choices section.
OptionsAvailable only when the field value comes from the form.
  • Required - Check box used to indicate if it is mandatory to enter a value in this field. When a field is required, it shows an asterisk .
    When a field is required, a rule prevents the contact from being added if no valid value is provided. However, if a default value was defined for the required field, the contact will be added, with the default value. Therefore, make sure to define a default value for your required fields if you want the participant to be added as a contact.
  • Multiline - Option to show a text box field on multiple lines. The number of characters that can be entered depends on the maximum length specified.
Maximum lengthAvailable only when the field value comes from the form.
The length of the value in terms of number of characters, only for text fields.
Default valueAvailable only when the field value comes from the form.
Default value to assign to a REQUIRED field if no value is provided.
If a default value is provided for a required field, the contact will be added even if no value was provided.
See a preview of the form before its implementation

Before putting your form online, you want to make sure that it displays properly.

  1. In the edit page of the workflow, click on the preview icon on the Preview page.
Implement the form

Since the form is integrated to your website, and not hosted on Dialog Insight, you must specify when and where it will display so that the code to be copied is generated accurately.

Warning for WordPress users
For step f. below - If you use WordPress to create and edit your website, you will need to enable a specific plug-in for the copied code in WordPress's WYSIWYG editor to work correctly, and for the set form to display as planned. For instructions, see Adding a WordPress Plug-In.

  1. Go to the Implementation page.
  2. Select the key associated to the domain where the form will show.

    If your site does not show in the list, click on Manage keys and then on Add a key to add the domain of the site or page where the from will be shown and specify the public and private keys assigned by reCAPTCHA when you registered.
    **You must first register your domain on reCAPTCHA to get your private and public keys. To register your site or domain with reCAPTCHA, go to https://www.google.com/recaptcha/admin#list and follow the instructions provided on screen. Once saved, reCAPTCHA will give you private and public keys that you'll need to enter in Dialog Insight
  3. Specify where the form will be displayed, either on a page or in a popup window.
  4. Indicate where you want the stylesheet to be generated, either directly into the source code of the form or in a separate file.
  5. Click on Generate for the code to be created. If you use WordPress, refer to Adding a WordPress Plug-In to add the required plug-in.
  6. You must then copy-paste the entire code shown on your website.
  7. If you have chosen to generate the stylesheet code in a separate file, you will need to update your .css file with the one shown under the Stylesheet tab.
Personalize the page informing that the opt-in was successful

Since the form is to be integrated into the client's site, the text shown on the information page that displays once opt-in has been done can only be edited in the code itself, which is generated at implementation. So it is not possible to redirect a visitor to another page; it is the same page as the form that is displayed, except that the text is different.

  1. Go to the Implementation page.
  2. Click on Generate for the code to be created.
  3. Find the code of the text to be modified, and make the necessary changes.
  4. Copy-paste the entire code of the form on the desired site pages.
  5. If you have chosen to generate the stylesheet code in a separate file, you will need to update as well your .css file with the one shown under the Stylesheet tab.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.