Rendering Options#

There are a number of options you can pass into the craft.formie.renderForm() function.

Base Options#

These options are used by the default Formie template. If you use your own template, these options will not necessarily have an effect.

OptionDescription
fieldsAffect the attributes of specific fields. Accepts a Fields Options object as the value.
buttonsAffect the attributes of the submit/next page and previous page buttons. Accepts a Buttons Options object as the value.
fieldTagSet the tag for the outer-most field container. This is div by default.
fieldNamespaceSet the namespace used by all fields. This is fields by default.
formClassesProvide an array of classes to be merged on the <form> element.
formDataAttributesProvide an object of data attributes to be merged on the <form> element.
formAttributesProvide an object of attributes to be merged on the <form> element.

An example modifying the attributes for the <form> element.

{{ craft.formie.renderForm('contactForm', {
    formAttributes: {
        class: ['custom-form', 'another-class'],
        'data-site-form': true,
    },
}) }}

Buttons Options#

You can affect the attributes of the page buttons. These attributes are merged into the default buttons attributes and rendered using the attr() function.

OptionDescription
submitSet the attributes of the submit/next page button.
prevSet the attributes of the previous page button.

For instance, maybe we want to add some classes or attributes to the submit button on a form. For multi-page forms, this would be for every page's submit button.

{{ craft.formie.renderForm('contactForm', {
    buttons: {
        submit: {
            class: ['custom-submit-btn', 'another-class'],
            'data-form-submit-btn': true,
        },
        prev: {
            class: 'custom-back-btn',
        },
    },
}) }}

Fields Options#

OptionDescription
fieldHandleSet the key to the handle of the field you would like to affect. Accepts a Field Options object as the value

Field Options#

OptionDescription
fieldTagSet the tag for the outer-most field container. This is div by default. Takes precedence over the Base Options fieldTag.
attributesSet the attributes of the outer-most field container. These attributes are merged into the default field container attributes and rendered using the attr() function.

Previous ← Rendering Fields Next Custom Rendering →