docs.modx.pro
  1. Extras
  2. FetchIt

FetchIt ​

A component for MODX Revolution 2 and 3: submit HTML forms through the Fetch API without a page reload, with spam protection out of the box. By default the forms are processed by FormIt, but you can plug in your own snippet instead.

Why ​

FormIt alone answers with a normal POST and a full reload. FetchIt keeps FormIt (or your code) on the server and adds a client layer: FormData, a JSON response, field errors, notifications and events. And it closes the forms to bots, which usually takes a component of its own.

AjaxForm covers a similar job. The server side is close. FetchIt differs:

  • no required jQuery or jquery-form: the native Fetch API and FormData only, and the script is loaded with defer;
  • spam protection works right after the install, with nothing to configure;
  • notifications are built in, or your own through FetchIt.Message.

Features ​

  • FormIt out of the box. Properties such as &hooks, &validate and &emailTo are passed to FormIt as they are. Instead of FormIt you can name your own snippet.
  • Your own markup. All it takes is a form chunk and the attributes: data-error on field errors, data-success and data-validation-error on form messages.
  • Works without JavaScript too. With FormIt the form is submitted the normal way, and the messages and entered values are output by its placeholders. Except with proof of work and a captcha: they need JavaScript.
  • Spam protection by default: a signed single-use token, a minimum fill time, a hidden trap field and a rate limit. Optionally a proof of work and a captcha — Cloudflare Turnstile, Google reCAPTCHA v3 or Yandex SmartCaptcha. Rules of your own are added with a plugin.
  • No dependencies. Apart from the script of the captcha service, when one is on, the script loads no other files.
  • Built-in notifications or your own through FetchIt.Message: Bootstrap, SweetAlert2, anything.
  • Events fetchit:before, fetchit:after, fetchit:success, fetchit:error, fetchit:reset: add data, cancel a submission, open a modal.
  • TypeScript types sit next to the script.
  • Several forms on one page, each with its own key and processing snippet, as long as the snippet calls differ in their properties.
  • Fenom and @FILE chunks through pdoTools on MODX 2 and MODX 3.

Installation ​

Via Package Manager:

Or build a transport package from GitHub.

FetchIt 4 is one package for MODX 2.8 and MODX 3 instead of the 1.x and 3.x lines. It installs over the version already there: system settings and chunks are kept. What may affect your code: Upgrading to FetchIt 4.

FormIt is installed together with FetchIt when the site does not have it yet.

Next: Quick start.

Requirements ​

  • MODX Revolution 2.8+ or 3.x.
  • PHP 7.4 or later.
  • FormIt, if it is what processes the forms.
  • pdoTools, if the form chunks use Fenom or live in files.