Forms

Forms

Forms is a feature that allows users to manage their forms, including creating, editing, and deleting them. Forms are based on a pre-defined form configuration.

Forms Dashboard

Loading the image...

To access Forms Dashboard, simply navigate to the Forms section in the navigation menu of the application.

Search

The search bar in Forms Dashboard allows you to search for forms by entering relevant keywords in the search field.

Create Form

Loading the image...

To create a new form, click on the "Create Form" button, which will prompt you to enter a description and the form configuration relation. Once entered, you can proceed to the form builder to fine-tune and preview your form.

Description

The description is the unique name of the form, provided during its creation. It can be edited if necessary to reflect the utility of the form.

Form Configuration

The Form Configuration column displays the form configuration that the form is connected to. The connected form configuration allows the mapping of form fields to a specific connector. If necessary, the connected form configuration can be changed in the edit view.

Actions

Loading the image...

The three-dot action button for each form provides additional utility actions per form. You can easily edit, duplicate, and delete the form via the dropdown.

Edit Form

To edit a form, click on "Edit" in the three-dot action dropdown for the form you want to modify.

Form Builder

Loading the image...

The Form Builder enables you to customize the form needed for your campaign. On the left side, you can select and add layout components to enhance your form. You can choose from elements such as Submit buttons, tables, HTML elements and more. You can drag and drop new Layout Components in the form to change the general layout.

Form Component Actions

Loading the image...

For the the form, you can find the form fields inherited from the form configuration. Each form has actions visible on hover.

• Edit: Shows a powerful component editor based on Formio (opens new window)
• Move: Holding and dragging the move button lets you rearrange form elements
• Edit JSON: Enables edit of the JSON object of the specific form element
• Copy: Makes a copy of the selected form element in memory
• Paste below: (Only visible when form element is copied)
• Delete: Removes the form element from the form

General

Loading the image...

In the General section, you can edit the description or change the form configuration relation of the form.

Translations

By configuring translations you enable the form to be used within a multi-language page. The key of the translations should be the label in the form field. As example, you've defined all the labels in the form to be English. So we're taking First Name as example

e.g.

label	language	key	value
First name	en-UK	First name	First Name
First name	nl	First name	Voornaam
First name	de	First name	Vorname

TIP

You should also take into account the error messages. They can be configured as the following:

language	key	value
en-UK	error	Please fix the following errors before submitting.
en-UK	invalid_date	{{field}} is not a valid date.
en-UK	invalid_email	{{field}} must be a valid email.
en-UK	invalid_regex	{{field}} does not match the pattern {{regex}}.
en-UK	mask	{{field}} does not match the mask.
en-UK	max	{{field}} cannot be greater than {{max}}.
en-UK	maxLength	{{field}} must be shorter than {{length}} characters.
en-UK	min	{{field}} cannot be less than {{min}}.
en-UK	minLength	{{field}} must nog be longer than {{length}} characters.
en-UK	next	Next
en-UK	pattern	{{field}} does not match the pattern {{pattern}}.
en-UK	previous	Previous
en-UK	required	{{field}} is required.
de	required	{{field}} is erforderlich.
...	...	...

Loading the image...

Revisions

Loading the image...

The Revisions tool allows you to monitor editorial changes made to the form by workspace users. This will enable you to easily detect mistakes using the timeline and the visual edits of the form.

The timeline shows the activity history of all the users. The top revision shows your latest/current edit, and the revisions below show earlier versions. By clicking on each activity, you can see the changes in the preview tab on the right.

Dynamic Payment Methods

To begin using Dynamic Payment Methods on Novti, you should map the shared field labelled as Dynamic Payment Methods with the name [dynamicpaymentmethods][paymentmethod].

If you need comprehensive guidance on how to map fields, it is highly recommended that you consult the Form Configurations documentation. This resource provides an in-depth look into the process, giving you step-by-step instructions to ensure you can effectively navigate the mapping fields operation.

Mapping this field will enable the configuration of payment methods within the Form Builder.

Configuration

When you're setting up your dynamic payment methods, there are two essential sections you need to focus on within this component. The first is the Data section, which is where you'll input all the relevant information regarding your various payment methods. The second crucial part is the Validation settings. This is where you'll set the rules to ensure that the data entered is correct and valid, which is a critical step for the smooth operation of your form.

Your payment methods settings include the default frequency and amounts setting, as well as a list of available payment methods. This list comprises the payment methods currently supported and enabled by Novti. We're constantly working on expending our list. Feel free to contact us if your desired payment method is missing in the supported list.

Each payment method has these fields enabled by default:

• Name: data representation of the payment method and will be used inside the transaction.
• Label: visual representation of the payment method and will be shown to the end user.
• Settings: all the dynamically set fields of the payment method and differs for each one. The possible fields are:
  • Image: URL pointing to an icon you want to use to enhance your form visually.
  • Frequencies: controls if your payment method is only enabled on a certain frequency and works in conjunction with the Frequency & Amounts component.
  • Description: provide the end user with more information about the payment method.
  • Fields: configure text fields to request additional information for the payment method, such as asking the user for a banking number.
  • Options: add options to a select or radio input depending on the payment method.

Transactions

Documentation is on the way....