Pragmeo's Form Builder offers a wide range of options for configuring form fields. Some of these options are common to all fields, whereas some of the fields are available to only specific fields.


Here's a list of all the available Form Fields:


  1. Required
  2. Inline [Checkbox Group]
  3. Name
  4. Placeholder
  5. Other
  6. Options [Checkbox]
  7. Type [Header]
  8. Type [Text]
  9. Allow Multiple Selection [Select]
  10. Value
  11. Min [Number]
  12. Max [Number]
  13. Step [Number]
  14. Content [Paragraph]
  15. Type [Paragraph]
  16. Inline [Radio]
  17. Options [Radio]
  18. Options [Select]
  19. Type [Textarea]
  20. Max Length [Textarea]
  21. ROWS [Textarea]
  22. Label
  23. Helptext
  24. Width
  25. Height
  26. Offset
  27. Control Visibility
  28. Calculated Field
  29. Formatting

 

To access the configuration options of a form field:


  1. From Fields List on the right, drag the required fields to the canvas.
  2. Mouse over the added field to display further options: Delete, Edit, and Duplicate.

  3. Click the Edit icon

The configuration options are displayed.



The configuration options are different for different fields. In the upcoming sections, we will explore each of them.


Required

Click to toggle the field as mandatory or optional for your client.

Inline [Checkbox Group]

Place checkmark to display the Checkbox Group field as an inline form element.


Name

Enter a friendly name for the form field. By default, an auto-generated name is used for the form field but you can always modify this field.


TIP: Make sure the name is easy to remember as you may need to use it at several other places while designing the form behavior.

Placeholder

Enter a text that guides your client about the type of information they need to provide.

Other

Place a checkmark to allow your clients to add an unlisted option.

Options [Checkbox]

A set of controls allowing you to manage the options that you need to display on the checkbox group field.


Options Include:

  • Place a checkmark to make the option selected by default for your client.
  • Text
    Enter a caption for the option. This caption is visible to your client.
  • Value
    Enter a value for the option. This value is used in handling the form data and not visible to your client.
  • Click to remove the option from the checkbox group field.
  • Add Option +
    Click to add a new option to the checkbox group field.



Type [Header]

Select the heading level from the dropdown.


Type [Text]

Select to specify the type of input (password, email, color, telephone) you need from your client.


Allow Multiple Selection [Select]

Place checkmark to allow the user to make multiple selections in the Select field


Value

Enter a default value for this field.


Min [Number]

Enter the minimum allowed number for this field.

Max [Number]

Enter the maximum allowed number for this field.

Step [Number]

Enter the step value that will be used for incrementing or decrementing the number using the field slider. For example, adding will always allow your client to increment/decrement the number.

In this case, the field is expected to behave as follows:


Content [Paragraph]

Enter the long-form paragraph text here.

Type [Paragraph]

Select the type of paragraph like address, quote, canvas, output, etc.



Inline [Radio]

Place checkmark to display the Radio Group field as an inline form element.

Options [Radio]

A set of controls allowing you to manage the options that you need to display on the radio group field.

Options Include:

  • Text
    Enter a caption for the option. This caption is visible to your client.
  • Value
    Enter a value for the option. This value is used in handling the form data and not visible to your client.
  • Click to remove the option from the radio group field.
  • Add Option +
    Click to add a new option to the radio group field.

Options [Select]

A set of controls allowing you to manage the options that you need to display on the select field.

Options Include:

  • Text
    Enter a caption for the option. This caption is visible to your client.

  • Value
    Enter a value for the option. This value is used in handling the form data and not visible to your client.

  • Click to remove the option from the select field.

  • Add Option +
    Click to add a new option to the select field.

Type [Textarea]

Select the type of textual information you need from your client like TinyMCE, quill, etc.

Max Length [Textarea]

Enter the maximum allowed number for the characters in the field.

ROWS [Textarea]

Enter the number of rows you need in this field. Higher the number of rows, the more you can write in.


Label

Enter the caption for the field. This caption will be visible to others as well.


NOTE: This option is not available on Paragraph and Header fields.


Helptext

Enter a text that guides the user about the field. 


NOTE: This option is not available on Paragraph and Header fields.


The following image illustrates how a helptext would be displayed to your clients.


Width

Select to specify the width of the checkbox group field on a 12 column grid system.

NOTE: The behavior of the grid system is based on the Materialize framework. In case you want to learn more about it, feel free to check out this Materialize documentation.

The following image illustrates an example where width is set to 6, which is half of the 12-column grid. This means the checkbox group field will take only half of the available space.

Height

Enter a number to specify the height of the field on the canvas. The height is specified in pixel units. 


Offset

Select to specify the number of columns from where you want to start the checkbox group field on a 12-column grid system.

NOTE: To learn more about offsets, use this Materialize documentation.

The following example illustrates an example where the offset is set to 2. This will start the checkbox group field from the second column.

Control Visibility

Enter a condition that checks the data of the reference field. If the condition is met, the current field will be displayed to your client. With this feature, you can design simple to complex form behaviors. 


To learn how to use control visibility, click here.


Calculated Field


Enter a formula, like you would do in Excel, to calculate the result of two form fields. The result will be displayed in the current field. 


To learn how to add a calculated field in your form, click here.


Formatting

!!!Awaiting information from Anders