Design > Layout > Building Components

Building

You can build a form structure by dragging fields into the grid as explained in the post Responsive Layout.

Once you have a structure in place you can add sub-components to components by clicking the Add button in the metadata form.

You can only add the immediate sub-component for the selected component type.

Selected Component To add a... Find this Button...
Section Section Column
Section Column Row
Row Column
Column Field

To add a new Section click the Add Section button at the bottom of the form on the Editor.

Cloning

To make editing a form in formstrap quicker and easier, you can clone any part of the form

For example, if you have a form Section Column asking for personal contact details of an individual and you want to create a new section asking for personal contact details of their next of kin then you can simply Clone the Section Column and make the relevant changes. Everything inside the component that you want to clone is copied across (except Events, unique IDs and names).

For example, the layout and design of the component, all the sub-components, all the fields and field metadata. So your Section asking for contact details with relevant field types and validation requirements is copied and you can just tinker with it to make it suitable for the new Section.

Watch the video:

In addition to clicking the Clone This button you can select the component you want to clone and then use the keyboard shortcut CTRL + ALT + C

Deleting

To delete any component you select it and then click the Delete This button on the metadata form.

Comments

Commenting is temporarily disabled