Form Building - Part 1

Instructions

Step 1: Apply Theme and Background Color to the Main Container

1. Select Container element
2. In the right panel, under Theme, choose Rounded shadow
3. Click Add new style
4. Choose Background color
5. Select a light blue color (or any light tone)
6. Adjust the slider to make the color even lighter
7. Click OK
8. Click Save

Step 2: Add Padding to the Container

1. Click the pencil icon next to the saved style to edit it
2. Set Padding to 10px
3. Click Save

This makes sure your content inside the container doesn’t stick to the edges.

Step 3: Nest a Container Inside the Main Container

1. Drag a new Container inside the existing top-level container
2. With the new inner container selected:
   • Click Add new style
   • Select Border
   • Choose Black as the color
   • Click OK
   • Click Save

This will visually separate the nested section from the rest of the form.

Step 4: Add a Field and Customize Its Label

1. Drag the Title field into the new (bordered) container
2. Select the field and update its Label from “Title” to “Request”

This improves clarity for the user by replacing generic column names with meaningful labels.

Step 5: Let’s go back to our header.

• With the Header selected, click Add new style
• Choose Background color
• Select Light Yellow (or another soft color)
• Click OK
• Set Padding to 2px
• Click Save
• Choose Align -> Center

This makes your Header pop and visually separates it from the rest of the form.