Menu

Customizing the form template

This guide is intended to give an overview of what the markup for a form looks like and what options are available to customize it. The visualization below shows the different HTML elements that make up a form, classes that can be used to style them and hooks that might be useful.

Some customization can be achieved with the form arguments, for example changing the submit button text. If you want to programmatically change the arguments then use the af/form/args filter.

af-title

Title

Only shown if argument display_title is true

af-description

Description

Only shown if argument display_description is true

af-fields acf-fields acf-form-fields

af/field/before_field

Triggered before each field

af-field af-field-{NAME} af-field-type-{TYPE}
af-label

Label

af-field-instructions

Instructions

Can be moved after the field by setting the instruction_placement argument or using the af/field/instructions_placement filter

af-input

Rendered by ACF

Refer to the ACF documentation for information on how to customize fields. The af/field/before_render filter can be used to alter the field object before it's rendered by ACF.

af/field/after_field

Triggered after each field

af-submit
af-submit-button

Submit button

Button text can be changed using the submit_text argument