Forms for Editors

Create forms, render them in frontend, and collect data from visitors.

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

This feature consists of two parts:

• A configurable app, which is used to:

  • Create forms
  • Select templates for how to the forms should look in frontend
  • Browse form submissions

• A Forms for Editors paragraph app which is used to show the form in frontend and allow a visitors to submit it.

This article is about the configurable app and how you use the Forms and Templates sections.

Forms

The Forms node is where you create forms and work with existing forms. When you click this node you will see a list of all existing forms with key information:

• Name
• Form fields count
• Number of displays and submits
• Last submit
• Last edit

From the action menu you can use the manage columns option to customize what you want to see in the list - and the save view and select view options to save and switch between saved list view configurations.

From this view you can do the following:

• Create a new form
• Edit existing forms
• Inspect form data
• Copy a form
• Delete a form

All of the above functionality, except creating a new form, is accessed via the context menu of an existing form.

If you want to create a new form:

1. Click New Form
2. Fill in the general form settings:
   • Provide a Name
   • Select an Email field (used by the forms for editors app to send receipts)
   • Select a Default template
   • Specify the Max submits pr user allowed
   • Add a CSS class which will be added to all input fields
   • Add a hardcoded input field size in pixels
   • Set an Icon for required field
3. Save

The form is now created but does not have any form fields. Click it in the list to open the form workspace: The form workspace is made up of three widgets:

• Form preview - manage form fields and see a preview of the form
• Form settings - edit the general settings for the form
• Form data - get an overview of the data and further inspect it

If the form does not have any form fields the Form preview and Form data widgets will display No results found.

Form fields

To create or alter form fields first click Manage on the Form preview-widget - then:

1. Click the New form field button
2. Choose a field type
3. Configure the field form in the following tabs:

• Settings
• Layout
• Values

On the Settings-tab you can:

• See a preview of the field, both rendered and the html element
• Change the name and placeholder
• Set the field to:
  • Required
  • Active
  • Hide field in receipt
• Give a description
• Set a title
• Change the field type - if you select a text type you can mark the field as the Email field. This is relevant for the front-end app setting Get from Email field which will then refer to this field
• Specify a value for the input pattern attribute

Form data

When a form has been filled out and submitted the form data is stored in DW10.

There are two ways to access form data:

• Right-click a form in the Form area and select Form data
• Open the form and click Manage in the Form data-widget workspace

Either way will take you to 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 number of the submitter (if the user is registered)
• The referrer
• A summary of the form data (click the data column to see the full data for each submit)
• The number of fields filled out in the form

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

Templates

The Templates area is where you can override the system template and select a specific template for the forms on your different websites:

Your websites are nodes to the Templates folder, and when selected one you can configure a:

• Form template
• Email template
• Receipt template

The Form for Editors app has an automatic option which uses a system template to render the form, receipt or email content in frontend, if no specific template is selected here. If you want to override this, you can select or create a website specific template here.

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

• If the form has a template specified in the form settings it is used
• If not, the template specified in the Templates area is used
• If no such template is selected, the original system template is used