Skip to content

Overview

Introduction

FormBuilder (aka afform) is a core extension currently in active development. It is intended to become the main building tool for CiviCRM forms and layouts going forwards.

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: 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.

Afform markup

Althought angularjs offers extensive functionality it is recommended that, where possible, CiviCRM Angular forms are written using just html and CiviCRM afform markup. The reason being that there is demand to be able to render these forms using different front end libraries (eg. React) and funding is being sought to that end. If this does proceed then the first piece of work is likely to be rendering existing FormBuilder forms via React - something that would work seamlessly if no native angularjs markup is used.

The CiviCRM Afform markup includes

Type Example Notes
form embedding markup <contact-basic></contact-basic> Embed a FormBuilder form as defined in contactBasic.aff.html & contactBasic.aff.js
api 3 access markup <div af-api3="af-api3="['Contact','getsingle', {id: options.contact_id}]" af-api3-ctrl="contact"> </div> Call api v3 & assign results to variable contact
api 4 access markup <div af-api4="['Afform', 'get', {select: ['name','title','is_public','server_route', 'has_local', 'has_base'], orderBy: {name:'ASC'}}]" af-api4-ctrl="listCtrl"></div> Call api v4 & assign results to variable listCtrl