Skip to content

Overview

Introduction

FormBuilder (aka afform) is a core building block of the CiviCRM UI.

Editing Forms in the CiviCRM User Interface

The core afform extension is the engine of the Afform framework. However, on its own it does not provide a way to create or edit forms. Two extensions packaged with CiviCRM can be enabled to provide Afform editing interfaces:

  • FormBuilder: documented in the User Guide under FormBuilder.
  • Form Code Editor: (Unmaintained) a simple interface for editing afform html directly. Once the extension is enabled, go to civicrm/admin/afform-html to access it.

Afform Types

  • form: A form which submits through the Afform::submit api, editable in the FormBuilder GUI.
  • block: A snippet meant to be incorporated into a larger form.
  • system (default): Non-editable forms.
  • search: An afform with an embedded SearchKit Display and optional search filter fields.

Form Storage

Unlike most database-backed entities in CiviCRM, Afforms are stored in files. Typically, an Afform consists of a pair of files:

  • *.aff.html (the markup/layout file)
  • *.aff.php or *.aff.json (the configuration/metadata file)

These files are stored in one of the following locations: - An extension's ang directory - Core's ang directory - The site's local files/ang directory

Afforms can also be provided programmatically via the civi.afform.get event.

Afform Markup

Although AngularJS offers extensive functionality, it is recommended that CiviCRM Angular forms are written using standard HTML and core Afform directives.

  • <af-form>: Renders the outer form container.
  • <af-entity>: Specifies the entity being managed (e.g. <af-entity type="Individual">).
  • <af-field>: Renders and binds a specific entity field (e.g. <af-field name="first_name">).
  • <af-repeat>: Allows repeating groups of elements (like address blocks or relationships).
  • Another Afform: The tag for any Afform can be embedded within another.