Layout, Text and Tab view components

Before you start

• Build a form

Three components shape the page without holding data of their own. Layout puts components side by side. Text adds a heading or an instruction. Tab view splits fields into tabs. Drag any of them from the Components tab into a block, then click its cog icon for Settings.

Add a Layout

1. Drag Layout from the Components tab into a block.
2. Click the cog icon. The panel Layout Configuration opens.
3. Set Number of Columns.
4. Drag components into the drop zone that says “Drop components here”. Click Done.

Drop components into a Layout, and fields into a block or a tab. Use a Layout to put two Buttons next to each other, or a Table beside a Text.

Add a Text

1. Drag Text into a block.
2. Click the cog icon. The panel opens with the title Text Block.
3. Write in Text to be shown. The editor is a rich text editor, so you can use headings, bold and lists.
4. Click Done.

On the card, an empty Text shows “Empty text. Open settings to write it.” The text appears on the form exactly as you write it. Write the final wording.

Tip from a Beezr Consultant

Use Text for the one instruction people always miss, such as “Attach the signed quote before you submit”. Put it directly above the field it explains.

Add a Tab view

1. Drag Tab view into a block. The card says “No tabs yet. Open settings to add tabs, then drop fields into them.”
2. Click the cog icon. The panel Tab Configuration opens.
3. Click Add Tab. A card named Tab 1 appears.
4. Type a Tab title. It is shown in the tab header.
5. Choose Columns: 1 Column or 2 Columns.
6. Repeat for each tab, then click Done.
7. Drag fields into the drop zone under each tab. It says “Drop fields here”.

A tab card also has arrows to move it up or down and a bin icon, Remove tab, that asks “Are you sure you want to remove this tab?”. An untitled tab shows as “Untitled tab” in the Form builder.

What should I know before I start?

• Deleting a component deletes everything inside it. Beezr asks “Delete this component and everything inside it?”.
• Layout takes components. Its drop zone says “Drop components here”. A tab’s drop zone says “Drop fields here”.
• Other components still need their own setup. See Add a table and Add a button.