Theme Tag Reference
Theme tags identify the parts of Formie’s rendered markup that you can configure. Use Theme Config for a worked example, then look up the tags below when targeting a particular wrapper, field or control.
Theme Tags
As you can see above, you pass a Twig object with keys for different parts of the rendered HTML. Each key can define attributes, a different tag, or even remove that element entirely by returning false or null.
Formie exposes several of these theme tags. Some apply to the overall form, some apply to all fields, and some are specific to particular field types. Every tag definition can use the following properties:
Type: Boolean
Whether to retain or remove Formie's default formie-* classes for the element.
Type: String
The HTML tag to use for that element.
Type: Object
A collection of HTML attributes for the element. Values such as class, data, style, and aria can be arrays or nested objects. This works much like Craft's attr helper.
Type: Object
CSS custom properties to merge into the element's inline style.
Type: Array|Object
Extra content nodes to inject before or after the element content.
{{ craft.formie.renderForm('contactForm', {
themeConfig: {
pages: {
tag: 'fieldset',
reset: true,
attributes: {
class: ['one', 'two'],
disabled: true,
readonly: false,
style: {
'background-color': 'red',
'font-size': '20px',
},
},
},
},
}) }}The available tags are grouped below.
Form Tags
formformHeaderformMessagesTopformNavigationformBodyformFooterformMessagesBottompagesmessageErrormessageSuccessformTitlepageTabspageTabpageTabLinkpagepageContainerpageHeaderpageBodypageFooterpageCaptchaspageButtonspageTitlerowsrowcaptchaContainerbuttonContainersubmitButtonsaveButtonbackButtonprogressWrapperprogressprogressContainerprogressValueerrorserror
Shared Field Tags
fieldfieldLayoutfieldLabelfieldRequiredfieldOptionalfieldInstructionsfieldContentfieldControlfieldErrorsfieldErrorsubFieldRowssubFieldRownestedFieldRowsnestedFieldRow
Address Field
subFieldRowssubFieldRowfieldInput
Agree Field
fieldOptionsfieldInputfieldOptionfieldOptionLabel
Checkboxes Field
fieldInputfieldOptionsfieldOptionfieldOptionLabel
Date/Time Field
subFieldRowssubFieldRowfieldInput
File Upload Field
fieldInputfieldSummaryfieldSummaryContainerfieldSummaryItem
Group Field
nestedFieldRowsnestedFieldRownestedFieldContainer
Heading Field
fieldHeading
Multi-Line Text Field
fieldInputfieldLimitfieldRichText
Name Field
subFieldRowssubFieldRowfieldInput
Phone Field
fieldInputfieldCountryInput
Radio Field
fieldInputfieldOptionsfieldOptionfieldOptionLabelfieldOtherOptionfieldOtherOptionInputfieldOtherOptionLabelfieldOtherOptionText
Survey Likert Field
likertFieldLayoutfieldColumnLabelsfieldColumnLabelsRowfieldColumnLabelfieldInputsfieldInputsRowfieldOptionfieldOptionLabelfieldInput
Likert presentation styling is controlled through CSS custom properties on likertFieldLayout:
--formie-survey-likert-label-color--formie-survey-likert-option-background
Likert radios reuse the standard radio field styles and behaviour.
{{ craft.formie.renderForm('surveyForm', {
themeConfig: {
surveyLikert: {
likertFieldLayout: {
cssVars: {
'--formie-survey-likert-option-background': 'var(--formie-color-surface)',
},
},
},
},
}) }}Survey Rank Field
rankFieldLayoutfieldOptionsfieldOptionfieldRankHandlefieldOptionLabelfieldInput
Rank presentation styling is controlled through CSS custom properties on rankFieldLayout:
--formie-survey-rank-list-gap--formie-survey-rank-item-background--formie-survey-rank-item-border-color--formie-survey-rank-handle-color
Survey Rating Field
ratingFieldLayoutfieldOptionsfieldOptionfieldInputfieldOptionLabel
Rating presentation styling is controlled through CSS custom properties on fieldOptions:
--formie-survey-rating-star-size--formie-survey-rating-star-spacing--formie-survey-rating-star-outline--formie-survey-rating-star-filled
{{ craft.formie.renderForm('surveyForm', {
themeConfig: {
surveyRating: {
fieldOptions: {
cssVars: {
'--formie-survey-rating-star-size': '32px',
},
},
},
},
}) }}Repeater Field
nestedFieldnestedFieldWrappernestedFieldRowsnestedFieldRownestedFieldContainerfieldAddButtonfieldRemoveButton
Section Field
fieldSection
Signature Field
fieldCanvasfieldInputfieldRemoveButton
Single-Line Text Field
fieldInputfieldLimit
Summary Field
fieldSummaryfieldSummaryBlocksfieldSummaryBlockfieldSummaryContainerfieldSummaryHeadingfieldSummaryItemfieldSummaryLabelfieldSummaryValue
Table Field
fieldTableWrapperfieldTablefieldTableHeaderfieldTableHeaderRowfieldTableHeaderColumnfieldTableBodyfieldTableBodyRowfieldTableBodyColumnfieldAddButtonfieldRemoveButtonfieldTableRemoveColumntableCheckboxInputtableColorInputtableDateInputtableEmailInputtableHeadingInputtableMultilineInputtableNumberInputtableSelectInputtableSinglelineInputtableTimeInputtableUrlInput
Captcha and Integration-Specific Tags
captchastripePlaceholder