Skip to content

Form Area

A form area is a layout section, column or sublayout defined as such in the Advanced Tab settings. It configuration and fields structure is scoped, making possible the placement of multiple forms in the same layout.

Form Area Shortcut

For every form area a paper-plane icon will appear in the builder's main panel to both state that the node is a form area as well as to allow directly opening its configuration panel when clicked.

After Submit Actions

After Submit Actions, or simply actions, are multi-instance functions that will run sequentially, after a form has been successfully submitted, as long as the chain is not disrupted by an error. These are crucial for the form workflow, as submission data is not processed or logged unless there is an action set for the task.

Actions are set in the form area configuration and tipically involves sending an email or saving the submission data to the database. For a full overview of available actions and their capabilities, consult the actions section.

After Submit Actions

Actions will by default be always executed unless their status has been manually set to disabled, or it execution condition dynamically been resolved to false. The execution condition supports Dynamic Content, including the form submitted data.

Actions Dynamic Execution

TIP

Use execution conditions for advanced workflows, e.g. subscribing to a newsletter only if a specific checkbox has been checked on.

Form Area Configuration

The form area configuration panel contains form specific settings, including after submit actions.

Form Area Actions

Form Area Settings

SettingDefaultDescription
After Submit Actions[]List of actions to execute after a successful submission. At least one action is necessary.
HTML 5 ValidationtrueWhether the front side HTML5 validation should be executed before submission. Server side validation is always executed.

Note

For field specific validation refer to elements field settings.

Form Area Errors Display

SettingDefaultDescription
Display in ModalfalseWether to display server side errors in a Modal instead of the bottom block.
Modal ContentThe content to be displayed in the modal, use {errors} as placeholder for the list of errors.
Center ModalfalseWether to vertically center the modal.

Form Attributes

SettingDefaultDescription
NameA custom name attribute for the form dom node.
IDA custom ID attribute for the form dom node.
ClassCustom classes for the form dom node.

Form Action Override

SettingDescription
Action URLThe URL where the form should submit the data to.
Action MethodThe method that should user for submitting the data, GET or POST.

Side Effects

Notice that when a custom action URL is set, server-side validation and after submit actions will not be executed.

Form Area Custom Scripts

EventScope VariablesDescription
Before Submissionevent, formExecutes before the submission allowing to prevent it.
After Submissionevent, form, data, responseExecutes after successfull submission.
After Submission Errorevent, form, data, errors, validationExecutes after server side submission error, including validation errors.
After Validation Errorevent, form, dataExecutes after front-end validation error.

TIP

For more advanced customizations consult Extending Forms section.

Form Area Dynamic Source

For each form area, a dynamic content source is created as an alternative, and more convenient, way of accessing submitted data during actions configuration. As a dynamic source, it has all the advantages of YOOtheme Pro Dynamic Content, like the ability to alter the submitted data with filters.

The mapping option for the form area source will be listed as part of each field Dynamic options under the Submission Group.

Form Dynamic Content

Form in a Modal

Out of the box, a form cannot be displayed in a Modal, but there are 3rd party solutions.