Form Element

The Form Element is a sublayout element from the Essentials group that creates a complete form area with built-in submission handling, validation, and anti-spam protection. When added to your layout, its content is enclosed with a standard <form> HTML element while maintaining full YOOtheme Pro builder capabilities.

Content

The content area allows you to structure your form however you need. Combine form field elements with any other YOOtheme Pro elements—add headings, text, images, dividers, or even complex layouts. You have complete control over the form's appearance and flow, enabling you to create anything from simple contact forms to multi-step wizards.

For detailed information about each field type and its configuration options, see the Form Field Elements documentation.

Actions

Actions define what happens after a form is successfully submitted. They execute sequentially in the order configured, allowing you to chain multiple operations—send emails, store data, redirect users, or integrate with external services.

For detailed information about each action type and its configuration options, see the After Submit Actions documentation.

Hooks

Hooks enable you to execute custom JavaScript at key moments in the form lifecycle. These events are triggered automatically as users interact with the form, giving you precise control over behavior and enabling sophisticated features like multi-step forms, conditional logic, dynamic field updates, and third-party integrations.

Event	Scope Variables	Description
Before Submission	event, form, data	Executes before the submission allowing to prevent it by returning false.
After Submission	event, form, data, response	Executes after successful submission.
On Field Change	event, form, field, data	Executes after any form field value has changed.
On Submission Error	event, form, data, errors, validation	Executes after server side submission error, including validation errors.
On Validation Error	event, form, data	Executes after front-end validation error.

TIP

For more advanced integrations and details consult Form Events section.

Settings

Configure how your form behaves through several setting categories, each controlling different aspects of form submission and validation.

Submission Settings

Setting	Default	Description
Reset After	true	Whether to reset the form to its initial state after a successful submission.
Override Action	false	Submit the form to a custom URL and method, useful for 3rd party form integrations.
Action URL		The URL where the form should submit the data to (when override is enabled).
Action Method	POST	The HTTP method to use for submitting the data: GET or POST (when override is enabled).

Side Effects

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

Validation Settings

Setting	Default	Description
HTML 5	true	Whether to execute client-side HTML5 validation before submission. Server side validation is always executed.
Display Errors in Modal	false	Whether to display server side errors in a Modal instead of the bottom block.
Modal Content		The content to be displayed in the modal, use {errors} as placeholder for the list of errors.
Center Modal	false	Whether to vertically center the modal.

TIP

For field-specific validation refer to form field elements settings.

Custom Error Message

At the moment, it is only possible to customize the validation error messages for server-side validation, not for HTML5 validation. A workaround is to disable HTML5 validation in the Form Element configuration.

Anti-Spam Settings

Setting	Default	Description
Honeypot	false	Honeypot protection uses two techniques: a hidden field that bots fill but users don't see, and time-based validation that rejects submissions faster than the minimum threshold.
Min Seconds	5	A submission done in less than the specified seconds will be considered invalid.
Error Message		Override the honeypot validation error message.

Recommendations

• Enable on all public-facing forms (lightweight and effective)
• Combine with CAPTCHA elements for enhanced protection
• Set minimum seconds based on form complexity:
  • Simple forms (2-3 fields): 3-5 seconds
  • Medium forms (5-10 fields): 5-10 seconds
  • Complex forms (10+ fields): 10-15 seconds
• Test to avoid rejecting legitimate users with autofill/password managers

Advanced Settings

Customize HTML attributes for the form element to enable custom styling, JavaScript targeting, or third-party integrations.

Setting	Description
ID	Set a unique identifier for the form element. Useful for CSS targeting, JavaScript manipulation, or analytics tracking.
Classes	Add custom CSS classes to apply styling or enable framework-specific behaviors.
Attributes	Define custom HTML attributes such as data-* attributes for JavaScript frameworks, accessibility attributes, or tracking parameters.