Skip to content

Captcha

The Captcha element adds an image arithmetic captcha to the form to block automated bot submissions.

Front-end behavior

The Captcha element appears as an arithmetic problem:

  • On the left, a captcha image with numbers (e.g., "3 + 5")
  • In the middle, an = (equals sign)
  • On the right, an input box where the user enters the result (e.g., "8")
  • Next to the input box, a refresh button (circular arrow icon) for a new problem

TIP

The user must solve the arithmetic problem in the image and enter the result to pass validation and submit the form. If the image is unclear or they want a different problem, click the refresh button.

Vs. Anti spam settings

The Captcha element is an image arithmetic captcha the user must solve and enter; it is a visible interactive check. The Google reCAPTCHA in Anti spam settings is an invisible background check that needs no separate field. The two can be used together for stronger spam protection.

One per form

Each form can contain only one Captcha element. Once added, the Captcha icon in the element bar is disabled (grayed out and unclickable) and cannot be added again.

Basic

Basic settings define the element's core properties.

Label (required)

The label text shown above or beside the captcha field (depending on the Label position setting).

Description

Explanatory text shown beneath the captcha field, prompting the user to complete the verification.

Validators

The Captcha element has the Required validator added by default (cannot be removed), so the user must complete the captcha to submit the form.

ValidatorDescription
RequiredRequired (added by default); the user must complete the captcha verification

Error Message

The error shown when captcha verification fails. Default value:

The CAPTCHA verification failed, try again.

Custom message

Change the Error Message to something friendlier, such as "The CAPTCHA verification failed, please try again."

Styles

Label position

Controls where the label appears. Available options:

  • Inherit: Uses the global configuration in Form style settings
  • Vertical: Label above the captcha
  • Horizontal: Label to the left of the captcha
  • Hidden: Label hidden

Next steps

Built with VitePress