Skip to content

Overview

Introduction

Form-Builder (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.

Embedding

Afforms can be embedded on any CiviCRM page as Angular directives; they also can be configured to automatically appear on the dashboard or contact summary screen. Afforms can be embedded into other Afforms simply by including the directive for one Afform in the markup of another; Angular dependencies will be resolved automatically.

Embedding in Smarty Templates

Adding Afforms to traditional Smarty-based pages or forms can be a transitional step away from legacy screens

PHP Code 

Civi::service('angularjs.loader')
  ->addModules('afformMyForm');

$this->assign('myAfformVars', $optionalVars);

Note - to figure out what to put in 'name' look at the name in the FormBuilder listing for your form. In the above example the 'name' would be the entire 'afformMyForm' (there isn't a magic prefix).

Template Code 

<crm-angular-js modules="afformMyForm">
  <form id="bootstrap-theme">
    <afform-my-form options='{$myAfformVars|@json_encode}'></afform-my-form>
  </form>
</crm-angular-js>

Afform Types

  • form: A form which submits through the Afform::submit api, editable in the form-builder 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.