FetchIt

FetchIt submits the forms of a MODX site with the Fetch API: no page reload, no jQuery or other libraries. The forms are processed by FormIt, with all its hooks and validation, or by a snippet of your own that returns success, message and data. One package installs on MODX 2.8 and on MODX 3.

Your own markup. All it takes is a form chunk with attributes: data-error for the errors of fields, data-success and data-validation-error for the messages of the form. The classes of invalid fields are system settings, and chunks go through pdoTools, with Fenom and @FILE, on both versions of MODX. A ready example comes with the package.

Spam protection, on by default. Every form gets a signed single-use token that needs no session, a minimum fill time, a hidden trap field with a random name per installation, and a limit of submissions per form and address, which also works behind trusted proxies and CDNs. The checks run before FormIt and before your snippet, for submissions through FetchIt and for forms sent without JavaScript alike, and the service fields are removed from $_POST before FormIt reads them. When the token of a page is stale — a page from a cache, a page open for long, a new key — the script sends the form once more with a new token by itself.

Proof of work and captcha, both off by default, for when spam gets through the main checks. The proof of work asks the browser for a SHA-256 with a given number of zero bits, solved while the visitor fills the form, so every submission costs a bot processor time. The captcha is Cloudflare Turnstile, Google reCAPTCHA v3 or Yandex SmartCaptcha: FetchIt adds the provider's script, gets its answer before sending and checks it on the server last, so bots without a token never reach the provider.

Rules of your own. A plugin on the OnFetchItBeforeProcess event gets the fields sent and the properties of the form and refuses a submission with a message for the visitor.

Without JavaScript a form with FormIt is sent the usual way, and the messages and the values entered come back through its placeholders — the protection included. Only the proof of work and the captcha need JavaScript.

Notifications. The answers of the server can be shown as notifications in a corner of the page. They are FetchIt's own: no library is loaded. Screen readers hear them from two live regions, a notification stays while hovered or focused, and its colours are CSS variables. A site that shows messages its own way sets FetchIt.Message and uses any library.

Events and types. fetchit:before, fetchit:after, fetchit:success, fetchit:error and fetchit:reset are dispatched on document with the form, its data and the answer of the server, and any of them can be cancelled. TypeScript types ship next to the script, and the script is type-checked against them.

No dependencies. The native Fetch API and FormData, files included. The minified script is 19 KB, about 7 KB in gzip, loaded with defer. A page can hold as many forms as you like, each with its own key and handler.

Upgrading. FetchIt 4 replaces the 1.x line for MODX 2 and the 3.x line for MODX 3 and installs over either of them, keeping the system settings and chunks; the snippet calls need no changes. The API of both lines works on both versions of MODX. What may affect your code is listed in the README, under Upgrading to FetchIt 4.

FetchIt submits MODX forms with the Fetch API: no page reload, no jQuery or other libraries. The forms are processed by FormIt, with all its hooks and validation, or by a snippet of your own. One package for MODX 2.8 and MODX 3.

Every form is protected from spam out of the box: a signed single-use token, a minimum fill time, a hidden trap field and a limit per address, both for FetchIt submissions and for forms sent without JavaScript. Optionally: a proof of work in the browser and a captcha (Cloudflare Turnstile, Google reCAPTCHA v3, Yandex SmartCaptcha). Plugins can add their own rules through the OnFetchItBeforeProcess event.

• Your own markup: a form chunk with data-error, data-success and data-validation-error attributes.
• Built-in notifications, or your own through FetchIt.Message.
• JavaScript events: fetchit:before, fetchit:after, fetchit:success, fetchit:error, fetchit:reset.
• TypeScript types next to the script.
• Fenom and @FILE chunks through pdoTools.

FetchIt 4 installs over FetchIt 1.x and 3.x; settings and chunks are kept.

Documentation: https://github.com/GulomovCreative/FetchIt#readme

What's new in 4.0.0

• One package for MODX 2.8 and MODX 3, installs over FetchIt 1.x and 3.x.
• Spam protection on by default: signed single-use token, minimum fill time, trap field, limit per address, also for forms sent without JavaScript.
• Optional proof of work and captchas: Cloudflare Turnstile, Google reCAPTCHA v3, Yandex SmartCaptcha.
• OnFetchItBeforeProcess event for rules of your own.
• Built-in notifications instead of Notyf, accessible, styled with CSS variables.
• TypeScript types for the script and its events.
• Many fixes: see https://github.com/GulomovCreative/FetchIt/releases/tag/v4.0.0