Assets

Most of the time, renderForm() handles assets for you.

You only need to think about assets directly when you are rendering pages or fields manually, or when you are working with Formie's browser layer more explicitly.

formie.css includes both the base CSS needed for form behaviour and Formie's visual theme. Choosing the none theme keeps the base CSS and JavaScript while leaving visual styling to you. See Front-End Assets for the separate CSS files.

craft.formie.formAssets(form)

Use formAssets() when you are rendering a specific form manually and still want Formie's browser assets resolved in the right way for that form.

{% set form = craft.formie.forms.handle('contactForm').one() %}

{{ craft.formie.formAssets(form) }}

This is the normal helper to use with Rendering Pages and Rendering Fields.

craft.formie.browserAssets()

Use browserAssets() when you need the browser assets without resolving a specific form.

{{ craft.formie.browserAssets() }}

This is more of an advanced helper. Most template-driven sites will use formAssets(form) instead.

Options

These helpers can accept options such as:

• includeCss
• includeJs
• inline
• cssAttributes
• scriptAttributes
• jsAttributes
• useObserver

For example:

{{ craft.formie.browserAssets({
    includeCss: false,
    includeJs: true,
    scriptAttributes: {
        nonce: cspNonce,
    },
    useObserver: false,
}) }}

That is mainly useful when:

• your CSP requires extra script attributes
• you want to suppress CSS or JS in a specific context
• you want finer control over browser initialisation

When Formie outputs the browser JavaScript for you, it also outputs:

• the startup module script with page-level settings such as useObserver
• an inline JSON translations seed for front-end validation and UI messages

initJs is not an asset-level toggle. It belongs on the rendered form markup, such as renderForm(form, { initJs: false }), where it opts that specific form out of automatic startup.

useObserver is the page-level browser-script toggle. You can pass it through whichever render path is outputting the JavaScript for the page, such as renderForm(), formAssets(), or browserAssets().

If you are rendering one form manually, reach for formAssets(form). If you are wiring up Formie's browser assets yourself, reach for browserAssets().