Forms for Editors

Forms for Editors is tool for creating forms, which in turn enable you to collect data from visitors in a structured manner.

Forms for Editors consists of two different parts:

• A configurable app which is used to create forms and view form submits
• A paragraph app which is used to publish forms to frontend

So forms are created from the Dynamicweb administration interface, and then published to a paragraph using the Forms for Editors paragraph app.

To a website visitor a form might look like Figure 1.1) – although the actual styling depends on how your website design is put together.

Figure 1.1 A form

In this document we will look at both the configurable app and the paragraph app.

Forms are created and configured in the Dynamicweb administration, and then later added to a paragraph using the Forms for Editors app.

To create a new form:

• Go to Apps > Forms for Editors and click New form in the toolbar
• Name the form
• Save

You have now created a(n empty) form (Figure 2.1).

Figure 2.1 An empty form

When viewing or editing a form you can use the ribbon bar buttons (Figure 3.1) to add fields to it - these are the fields which the user will fill inand submit in frontend.

You can add the following types of fields:

• Fields
• List
• Buttons
• Elements

Figure 3.1 The forms for editor ribbon bar buttons

You can add the following fields:

These are the list fields at your disposal:

You can add the following buttons to your form:

The following elements can be created:

You can add any combination of these fields to the form to create the forms you need (Figure 3.2).

Figure 3.2 A form with fields

By default, the field you create are shown in form-mode (Figure 4.1).

Figure 4.1 Form-mode

Form mode is useful because it shows you an approximation of how this form will be rendered in frontend - but in some cases you may need to change the view to list-mode (Figure 4.2).

Figure 4.2 List-mode

The List-mode is useful because it lets you review the structure of large forms without being distracted by the controls used, and because it provides you with more information about each form field.

All fields you create are preconfigured and should work out of the box - but in some cases, you may want to change the default configuration. Click the field to open the field details view (Figure 5.1).

Figure 5.1 Editing a field

You can:

• Change the label and placeholder
• Set the field to:
  • Required
  • Active
  • Hide field in receipt
• Change the field type - if you select a text type you can mark the field as the Email field. This is relevant for the app setting Get from Email field which will then refer to this field
• Specify a value for the input pattern attribute

The type dropdown allows you to select HTML5 input types - please be aware that not all browsers fully support HTML5.

When editing a field, you can use the Layout and Values tools to set up more advanced behaviors.

​The Layout tool allows you to control and set layout-specific values (Figure 6.1).

Figure 6.1 Layout settings

• Set values which should be prepended or appended to the field value on submit, e.g. a currency symbol
• Set a CSS class value or a size in pixels to a field
• Customize the system name of the field

The values specified here are then made available in the template context.

The Values tool (Figure 6.2) is used to configure more advanced behavior relating to form values.

You can:

• Set a default value
• Map to an existing value in user management (for logged in users) and use that as an automatic value
• Set a max length on the field

All forms appear in a list view when you open the Forms for Editors app (Figure 7.1).

Figure 7.1 The form list

As you can see you have access to a lot of interesting information from the list view:

• Name & adornments (associated consent-activity, auto-values, etc.)
• Email field/no email field specified
• Fields count
• Displays, submits, and the calculated conversion rate
• Last submit
• Last edit

You can right-click a list item to open a context manu which allows you to edit, copy, rename, or delete a form - and to view a list of the form data submitted by visitors.

When a form has been filled out and submitted the form data is stored in Dynamicweb. You can then browse or download it via the Forms for Editors configurable app.

There are two ways to access form data:

• Right-click a form in the form list and select Form data
• Open the form and click Form data in the ribbon bar

Either way will take you to the Submits overview (Figure 8.2).

Figure 8.2 The submits overview

From the Submits overview you can see all submits for the current form, including:

• The submit ID
• The date and time of submission
• The page id of the page from which the form was submitted
• The user name of the submitter (if the user is registered)
• The referrer
• A summary of the form data (click the date column to see the full data for each submit)
• The number of fields filled out in the form, and the IP & session key of the visitor

From the toolbar, you can export all the submitted data as either .csv or a .xls file, or delete any checked submits if necessary.

To show a form in frontend, you must attach the Forms for Editors app to a paragraph. This app allows you to select a form and control how it is rendered, what happens when the form is submitted, and more.

The Form settings (Figure 10.1) are used for baseline functionality, like selecting which form to render.

Figure 10.1 The form settings

You must:

• Select a form to publish
• Select a template for rendering the form.
  • Automatic uses an automatic system template
  • Template allows you to create or select a template manually

You can also specify a custom text for the submit button (e.g. for localization purposes), and export the submitted form data in a .csv file.

The when submitting form settings (Figure 11.1) allows you to control what happens when a user submits a form.

Figure 11.1 The 'When submitting form' settings

With the when submitting form settings you can:

• Specify a page to redirect the user to after they submit the form
• Select or create a confirmation template to use, and specify a text to publish using that template

To both redirect AND show a receipt, simply set up the forms for editors app with the same form and the confirmation template you want to use on the page you redirect users to. The redirect will contain a submit token that will allow the receipt page to load the result of the form and display the information on the page.

A form can be used to collect consent for a particular GDPR activity and store them in the Data Processing app – read more about the Data Processing app here.

To collect consent using a form:

• Go to Apps > Forms for Editors and open or create a form
• Create a new checkbox field
• Click the field to edit it
• Select an appropriate consent activity using the Consent dropdown (Figure 12.1)

When this form is submitted in frontend with the checkbox checked, a new consent is created in the database based on either the user ID, an email field on the form, or (for truly anonymous users) a checksum value.

Figure 12.1 Collecting consents using the Forms for Editors app

The email settings (Figure 13.1) allow you to set up automatic email notifications when a form is submitted.

Figure 13.1 The email settings

With the email settings you can:

• Specify a subject for the email
• Specify a sender name and email – or retrieve it from the form using the Email field setting from the list view
• Specify one or more recipients (CC or BCC)
• Select a template for rendering the email. Choose between the automatic system template or select or create a custom email template from the dropdown menu
• Enter a text (if using a custom template)

You can use the receipt settings (Figure 14.1) to email a receipt to the visitor submitting the form.

Figure 14.1 The receipt settings

With the receipt settings you can:

• Specify a subject for the email
• Specify a sender name and email
• Specify one or more recipients (CC or BCC)
• Select a template for rendering the email - you can choose between the automatic system template or select/create a custom email template from the dropdown menu
• Enter a text (if using a custom template)

The max submit settings (Figure 15.1) allow you to control if and how the form should limit users from submitting form data.

Figure 15.1 The max submits settings

With the max submit setting you can:

• Specify how many times a form can be submitted from this page
• Specify what to do when a max submits limit is reached:
  • Redirect the visitor to a specific page
  • Select or create a template to render

Finally, you can use the upload settings (Figure 16.1) to specify a path to where you want user-submitted files to be stored.

Figure 16.1 The uploads settings

The User Management settings (Figure 17.1) are used to create users on form submit and add them to one or more user groups.

This is particularly useful for signing users up for newsletters - simply add users to a newsletter group and use email marketing to target that group.

Figure 17.1 Creating users on submit

To use this feature:

• Check the Create user on form submit and select one or more user groups to add new users to
• Edit your form fields and map them to the corresponding user management field (Figure 17.2) 

Figure 17.2 Mapping field values to user management fields

When using this feature, you must always have a field mapped to the standard Email field, and this form field should be marked as an Email field in the form field settings.

The following behavior rules apply to this feature:

• If the email corresponds to an existing user, only the email permission field and group membership is updated. This makes it possible to sign existing users up for newsletters. You cannot update other fields this way - use the Extranet app.
• If no user with the email is found, a new user is created using the value from the email field as the Username and Email. Email permission will be set to 'true'. If mapped to, the following fields will also be updated on submit:
  • Name
  • FirstName
  • MiddleName
  • LastName
  • Address
  • Address2
  • Zip
  • City
  • Country
  • Phone
  • PhonePrivate
  • PhoneMobile
  • Company
  • Department
  • JobTitle
  • Any custom fields

Checkboxes can be set to checked by passing either “True” or the specified value of the checkbox:

By accessing the page with the form with the URL parameter ‘?enable=true’, the field will be checked:

For checkbox lists, radio buttons and select boxes, by adding the field system name with the desired selected value to the query string the default selected option is bypassed, and the option(s) whose values are in the query string are set to selected.

A comma separated list of values can be used to set several options to selected for checkbox lists.

For instance, consider the following checkbox list:

By accessing the page with the form with URL parameter ‘?Pleasechoose=Extra,Additional’ the specified fields will be checked (selected):

All three templates used on the Form for Editors app – Form, Email, and Receipt – have an Automatic option, which uses a system template to render the form or email content in frontend.

While this template cannot be accessed, it be overridden at the website level.

To do so:

• Go to Apps > Forms for Editors
• Click Templates in the toolbar to open the Templates interface (Figure 23.1)

Figure 23.1 Selecting default 'Automatic' templates on a website basis

Using this interface, you can select or create website-specific templates to use when a user selects the Automatic option in a forms for editors app.

As with other hierarchies, the more specific option ”wins”:

1. If the form has a template specified in the form settings it is used
2. If not, the template specified in the interface above is used
3. If no such template is selected, the original system template is used

These are the database tables associated with the Forms for Editors feature: