By Chapter 2:
Build your user interface
Let’s build a UI using Anvil’s drag-and-drop editor. The UI will collect the data we want to pass to our send_feedback function.
Step 1: Add the first components
Click on ‘Form1’ in the App Browser to go to our UI. We construct the UI by dragging-and-dropping components from the Toolbox into the page.
The Theme Elements part of the Toolbox contains components that are specific to the current app’s Theme. Here, we’ll find the Card component:
Location of the Card component in the Toolbox
Drop a Card 
, and a Label 
into the page as demonstrated below:
Step 2: Change component properties
Select the Label we just added to the page. Then modify the text of the Label by double clicking the Label in the designer.
Below the Toolbox on the right, we’ll find the Properties Panel where we can edit the styling and behaviour of our components. Under Appearance expand the More Appearance Properties section and change the role to Headline.
Step 3: Add field labels
Our feedback form will ask our users for their name, email address, and to leave some feedback.
We’ll use Labels for our input prompts. Drop three Labels into the page, and change their text to:
- Name:
- Email:
- Feedback:
Step 4: Add input components
Drop a TextBox 
into the page next to our “Name:” label. Then change the component name to name_box by clicking the component name in the Object Palette. Repeat this with another TextBox beside our “Email:” label and change its name to email_box. Finally, add a TextArea 
underneath our “Feedback:” label and rename it to feedback_box.
We’re changing the name of each user input component, to make it easier to identify them from code.
Step 5: Add submit button
Finally, we’ll drop a Button 
into the page. In the Properties Panel:
- Change the
namefrom ‘button_1’ to ‘submit_button’ - Change the
textfrom ‘button_1’ to ‘Submit’ - Change the
roleto ‘primary-color’.
In chapter 3, we’ll connect our UI to our server function using client-side Python.