Commit 04ddcbbb authored by Eileen McNaughton's avatar Eileen McNaughton
Browse files

Add form builder

parent a57a18e2
...@@ -23,4 +23,57 @@ The steps to create a form like this are ...@@ -23,4 +23,57 @@ The steps to create a form like this are
1) Create the form - go to Administer->Customize data and screens->form builder 1) Create the form - go to Administer->Customize data and screens->form builder
As of writing only contact and activity forms are offered - but is expected As of writing only contact and activity forms are offered - but is expected
other entities will be added soon (they can be added programatically) other entities will be added soon (they can be added programatically)
2) ![new form.png](../img/the-user-interface/form-builder/new-form.png) ![new form.png](../img/the-user-interface/form-builder/new-form.png)
2) Configure the form settings
The form configuration screen broadly has 2 parts - a configuration pane (left)
and a layout pane (right). On the left you will specify
- the title (required and visible on the form)
- the description (highly recommended so you can remember why you created the form)
- the permission required to access the form
- the url at which the form will be found (must start with civicrm/)
Once the url has been saved it will be possible to view the form at this
url and a link to it will appear on the right.
![view line](../img/the-user-interface/form-builder/view-form.png)
- whether users can add the form to their dashboard
- whether the form should be available for placement to the contact
layout editor
![Configure the form](../img/the-user-interface/form-builder/configure-form.png)
3) Build the form
The second tab on the left has elements relating to the activity that can
be configured or dragged to the layout on the right
![Build the layout](../img/the-user-interface/form-builder/build-layout.png)
- In the values section are fields with pre-set values - for our example
we have renamed the tab to 'Schedule call' and pre-set 3 values
![Preset values](../img/the-user-interface/form-builder/pre-set-values.png)
- We can then drag the fields we want to the layout. Note that under
'Elements' there are some formatting elements - allowing us to add
blocks of text or other html and to add 'containers' to group fields.
![Layout](../img/the-user-interface/form-builder/layout.png)
To the right of each field is a settings widget. This widget has options to
- change the widget for data entry - for example if you choose
'RichTextEditor' then a full wysiwig input widget will show up.
- specifiy if the field is required
- add a default value
- specify if the label is shown
- add any pre or post help text
In addition you can click on the layout elements to
- rename the label
- add placeholder text that will show in text boxes.
![Field settings](../img/the-user-interface/form-builder/field-settings.png)
The html elements also have a bunch of options
![Container](../img/the-user-interface/form-builder/container.png)
facilitating such dubious artistry as this...
![Art](../img/the-user-interface/form-builder/art.png)
Containers can also be saved as 'blocks' - which can be used on other
forms as well - potentially facilitating updating a bunch of forms at once.
If you had, for example, a number of activity forms for different use
cases but the custom fields you wanted to have filled in changed
quarterly these custom fields could be in their own block and changing
that block once a quarter would change all the forms using that block.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment