You are viewing beta documentation for Formie 4.x.
Frontend

Cached Forms

Cached forms work well, but they need fresh request-specific values.

When a page is served from static cache, the HTML may be older than the current request. That matters for things like CSRF tokens, request tokens, and render IDs. If those are stale, a form can fail in ways that look random, especially on cached pages using Blitz (opens new window) or another full-page caching layer.

Automatic Refresh

Formie can handle this for you. When static-cache support is enabled, Formie marks the form as cache-aware and refreshes the tokens it needs when the form is initialized. It also refreshes them again after submit attempts, so retries, page changes, and repeated submissions keep using fresh values.

Static-cache support is enabled automatically when Blitz is installed and enabled. For other static-cache setups, enable the staticCacheRefreshOnLoad plugin setting in your Formie config.

In most cases, Formie can support cached forms without extra JavaScript on the site.

Craft Cloud and async CSRF

On Craft Cloud and other full-page caches, a synchronous CSRF token in the rendered HTML can prevent the page from being cache-eligible in the first place — even if Formie refreshes tokens on initialization.

Craft supports async CSRF inputs globally via asyncCsrfInputs in config/general.php (or CRAFT_ASYNC_CSRF_INPUTS=true). Formie calls Craft's csrfInput() helper, so that global setting applies automatically.

When you need per-form control instead of a global setting, pass async CSRF through render options:

{{ craft.formie.renderForm('contactForm', {
    csrfInput: { async: true },
}) }}

You can also omit the CSRF input entirely and let Formie inject it during token refresh:

{{ craft.formie.renderForm('contactForm', {
    csrfInput: false,
}) }}

Use csrfInput: false only when static-cache token refresh is enabled. Formie creates the hidden input on refresh if one is not already present.

When You Might Need More Control

If you are taking over Formie's browser assets yourself, or you are mounting forms through your own browser bundle, make sure token refresh stays enabled. The browser package can receive staticCache and refreshTokens options, but you would normally only set those yourself when you are deliberately replacing Formie's automatic asset output.

If you need to control that setup yourself, see:

How It Works

On load, Formie can send a request to the refresh tokens endpoint and update the form with fresh values before the user submits anything.

After submit attempts, it can refresh them again so the form is ready for the next page submit, retry, or repeated interaction.

The refresh payload can look like this:

{
  "csrf": {
    "param": "CRAFT_CSRF_TOKEN",
    "token": "3YV0bKqQx..."
  },
  "requestToken": "m1f8A2pQ...",
  "renderId": "formie-contact-form-abc123"
}

Formie applies those values back onto the existing form, so the cached HTML can keep working without needing a full re-render. If the CSRF input was omitted at render time (csrfInput: false), Formie creates it during refresh.