Creating a Profile Update Form Hosted on Dialog Insight

A profile update workflow is configured by default in the Opt-in module. You must customize the elements of this workflow to adapt them to your case and goals. The workflow includes an entry point (a link) that you integrate into a message or an interceptor, the form itself, a confirmation page and a welcome email (optional). 

Step 1: Generate the Workflow

Start by clicking Create a form. Select Opt-in and Dialog Insight, then indicate the language of the form:

Step 2: Edit the Form

Click on the pencil to edit the update form:

A form template is offered by default to help you with the editing. This template comes with predefined fields and texts. You must, however, adjust the template form to your goals. If you want to retrieve more information than the one presented in the template, you must do so from the Form configuration page (see step 3 for more details).

☑ Header and footer
You can add content to the header and footer (your logo, a description, a title, contact details). You must first add a structure block into which you drag a content block. Modifications will apply to all the pages of the workflow.

☑ Global configurations (global styles)
You can modify styles for all pages of the workflow. However, if styles are applied to a specific element, this style will prevail for that element and replace the global one.

☑ Form styles
In the main section of the form, modify the colors, widths and fonts of the elements (fields, buttons, texts):

☑ Adding content
The form template comes with only one column that includes predefined sections for the header, the form and the footer. You can add a zone by dragging a structure block (columns) in which you drag content blocks. Editing works the same way as the email editor. The available content elements can be inserted in any section except the section for the form itself (the inputs). In the next step, we will see how to edit or add new fields.   

Block List and Description

Text	Section Description Content Section to type text. Note that it is possible to insert an image in the text using the hosted or Web image icon. If you have selected a layout that has more than one column, it will be indicated if it is the left, center or right text. Also, the height of the columns is adjusted based on the column with the most text. The styles selected within the editor prevail on the global styles set in the Styles section. Styles Section used to define styles to be applied to all text elements inserted in the content section. Settings Section that offers spacing options around the text.
Image	Element that lets you add an image. It can be used to insert your company's logo or a relevant image. In addition to adding an image, you can define its width, alternate text to be displayed when images are not shown, and, if needed, a redirection link to a page to show when the image is clicked. You can also choose an image that is not yet hosted by clicking Upload an image. ** PNG, GIF and JPG images are best. Make sure the image dimensions fit. If needed, you can edit your image before inserting it in the message (or form) by clicking on the edit icon. The image editor will open to let you re-size, crop or make any other necessary changes. If you have a lot of images and have created categories to group them, select in the Category list the one to hold you new image, if needed. Section Description Image (URL) Type the URL address of the image or select an image using the file selector displayed when clicking on the image icon . To make changes to an image, whether it be the size, color, orientation, or any other, click on the edit icon  to open the image editor. Width Maximum width of the image, in pixels. * To be certain the image displays properly, it is recommended to select an image that has the same dimensions as the one you want in your form. Having the right size image reduces downloading time. **As the content is responsive, the image's size will be adjusted to the display device. Alt-Text Text used in replacement of the image. This text is shown when the image is not displayed, or for accessibility purposes for people with a disability or impairment. Link Complete URL of the page you want to display when the image is clicked. Settings Alignment and padding around the image.
Divider	Element that adds a horizontal line, mostly used to separate sections. Section Description Styles Section to define the line's styles. Settings Section to define the line's width and spacing.
Button	Element that adds a call-to-action button, which redirects the visitor to a new page. Section Description Content Section that lets you define the text to show on the button and the landing page URL. Styles Section to define the styles applied to the button's text and box. Settings Section offers settings to define the width and spacing around the button.
Form	This area displays the input fields used to collect information on the people who wish to subscribe to communications. Some fields are already included in the form template, mostly those part of the primary key, which cannot be edited nor deleted as they are required for contact identification in Dialog Insight. **There can only be one input area per form.
Social media follow	Element that lets you add links to your social media pages (icons and related links). The provided images cannot be changed. However, you can choose however which one to display and the text and link for each. Section Description Content Section that lets you choose the applications to display and define the link text and URL. Styles Section to define the styles applied to all social media links and texts. Settings Settings to define spacing, alignment and positioning of application icons.

Step 3: Configure the Fields

☑ Default fields
In the Form configuration section, you can modify the fields from the default template. First, check if these default fields fit your needs, particularly those related to subscriptions. You can add new fields depending on the data you want to collect on the people who subscribe to your communications. You can remove fields you don't need. Note that it is impossible to delete fields that are part of the primary key, as this information identifies contacts in the application. Data entered in one of the form inputs will be added to a project field.If you modified a field from a published form, you must update the workflow to apply these changes.

The opt-in fields are displayed with a checkbox. You could remove the checkbox and put a "transparent" opt-in by selecting Hidden field:

The person who submits the form will automatically be subscribed. Thus, it is important to explain with a text that submitting the form gives consent to opt-in. If you don't need opt-in fields update in the form, you can remove them.

☑ Field labeld layout
Under the Form options tab, define how you want field labels to display, either on the left, right or inside of the input area.

☑ Authentication process
If you want to be sure that the person who fills the form 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 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. 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 Manage keys.
3. Choose your domain, if already configured. If not, click 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.

Step 4: Edit the Confirmation Page

After submitting a form, we are redirected to a confirmation page. Edit the text and the visual to adapt it to your brand and use case:

Step 5: Add a Confirmation Email (optional)

You can add a welcome message that is sent automatically when the form is submitted. It is a useful tool if you have relevant additional infos. Avoid repeating the content of the confirmation page.

Step 6: Publish the Form

Before publishing, verify the rendering by clicking Preview in the upper right of the form edition. After the validation, you can publish the form. 

Step 7: Integrate the Form

When the workflow is all set, all you have to do is insert the link of the form in a message (e.g. in a button) or in an interceptor: