Designing a User Interface to Capture User Feedback
PreviousDesigning a User Interface to Visualise InformationNextDesigning a User Interface from Scratch
Last updated
Last updated
This article shows how to design a form to capture user feedback using an existing database.
The purpose of these forms is to simplify data collection, streamline processes, and enhance communication between users and organizations. By capturing and storing data in a database, businesses and organizations can better manage and utilise the information for diverse purposes, including providing services, making informed decisions, and improving user experiences. For instance, consider feedback forms.
Tip: When creating a form to capture information, you can always start from scratch, yet it is generally advisable to start creating a form from a database.
The process of creating a user interface to capture user feedback involves four main steps.
As the initial step, you should have a database in place before creating a form.
Below is an image showing a database (e.g., Complaints) created to record complaints raised by customers.
For detailed instructions on creating a new database, refer to the article below for further insights.
Follow the below steps to design a form from a database.
On the Lucy app homepage, go to the My Work tab on the left sidebar.
Search and click on the folder you want to open.
Go to the Databases tab.
Search and select the desired database.
Hover over the database click the Edit icon that displays.
Click Create a form to open the form on the widget designer page.
By default, the widget designer will be opened in its Design mode.
You can do required customisation to the form in the Design mode.
Tip: Once you open the widget designer, its default mode will be the Design Mode (design mode will be selected).
There are two modes in a widget designer page:
Design mode - Used to design, edit, and customise the widget
Preview mode - Used to view a live version of the widget
The Widget Designer offers a user-friendly interface for creating and customising your widgets. This functionality empowers users to tailor the appearance, behavior, and content of their widgets to meet specific needs.
To customise the form's appearance, including elements such as the header, body, or individual items/fields within the body, simply click on the desired section. This action opens the Properties panel, allowing you to make adjustments like changing the header background.
In the Widget Designer's Design mode, you can make several basic modifications to the form, such as:
To add a background colour to the form header/body:
In the Design mode of the widget designer, click on a specific section, for example, the form's header section.
The Properties panel will be opened on the right.
Head to Container section and pick a Background Colour. The selected background colour will be applied to the form's header.
Instead, you can pick a background image if needed.
To add a background image:
Click the Search button of the Background Image field.
It will prompt a image gallery window to select a background image.
Pick a background image from the gallery.
Alternatively, you can upload your own image.
To upload your own image:
Click Upload your image button on the image gallery window.
Drag your image onto the marked area or click on the area to select the image and upload it.
After selecting a background image, you can choose the appropriate size for the header/body sections of the form.
The following are the background image sizes you can select:
Original Size - The default size of the background image will be applied to the selected header/ body.
Fill Area - The background image will fill the entire area of the header/body.
Fit into Area - The entire image will be visible within the header/body without any part being cropped.
To select a background image size:
In the Design mode of the widget designer, click on a specific section, for example, the form's header section.
The Properties panel will be opened on the right.
Under the Container section, pick a suitable Background Size e.g., Fill Area. The selected background size will be applied to the respective section of the form.
Selecting the alignment of the background image of the form header/body section denotes adjusting the way the background image of the form header/body is placed.
To select the background image alignment:
In the Design mode of the widget designer, click on a specific section, for example, the form's header section.
The Properties panel will be opened on the right.
On the Properties panel, go to the Container section.
In the Background Position True field, you'll find a diagram displaying multiple background image positions represented by circles. Choose an appropriate circle that corresponds to where you'd like to position the background image within the widget's header section.
To header title properties:
In the Design mode of the widget designer, click on the form's header section.
The Properties panel will be opened on the right.
On the Properties panel, go to the Title section. Modify the header title and customise header title properties to suit your specific preferences.
To modify the header title, go to the Text field and type in the desired title.
To change the colour of the title, select a colour from the displayed options or choose one from the colour palette.
To change the font size of the header, type in the required size in the Size field.
Users can customise fields of the form as follows:
In the Design mode of the widget designer, click on the form's body section.
Click on the desired field within the body section, and its Properties panel will display on the right.
Adjust the necessary properties of the field accordingly.
To change the position of a field:
In the Design mode of the widget designer, click on the form's body section.
Its Properties panel will be opened.
Within the body section, click on the field you wish to reposition.
Drag the field up or down to the desired location where you'd like it to be within the form's body section.
Note: The position of a field can be changed only within the Body section of the form; in other words, you cannot drag and place it on the Header section.
Besides the fields available on the form, users have the flexibility to include additional fields to the form.
To add fields:
In the Design mode of the widget designer, go the the Fields tab on the left.
The fields that capture data of different input types will be listed, such as Drop-down list, checkbox, number input, etc.
Select the desired field (e.g., Dropdown list), and drag and drop it onto the body section of the form.
Provide a Name for the newly added field e.g., Location.
Click Done.
Further, you can customise the properties of each field according to your preference.
Setting properties of a Drop-down List
Users can customise a drop-down list by adding multiple different options to it. You have the choice to add options manually or import options from an external source.
To manually add options to a drop-down list on the form, follow these steps:
In the Design mode of the widget designer, click on the desired drop-down.
On the Properties panel, go to Options section.
Click Add New Option button. A text box will appear, allowing you to enter the name of the new option.
Type in a suitable option name.
Repeat steps 3-4 to add more options to the drop-down.
Besides the default label (a name given to identify a option in the list) of a option which is visible to users, you can configure a internal value which is not visible to users for each option in the list. Alternatively, you can set the same label as the internal values.
To set internal values for options:
After adding your options, deselect Use label as value option (By default, this option will be selected).
Upon deselecting the Use label as value option, a text box will be enabled for each option, allowing you to enter the internal value. This internal value is not visible to users.
Enter the internal value for each option.
To remove a field from the form:
1. On the widget designer, click on the desired field to delete.
2. Click Delete icon. The field will be removed from the form.
To add a background to the entire page:
On the widget designer, go to the General tab on the right.
Head to the Share section.
You can select a background image from the gallery or upload a image of your own for the entire page.
To select a background image from the gallery:
Click the Search button of the Page Background Image field.
It will prompt a image gallery window to select a background image.
Pick a background image from the gallery.
Alternatively, you can upload your own image.
To upload your own image:
Click Upload your image button on the gallery.
Drag your image onto the marked area or click on the area to select the image and upload it.
Fields in the form can be rearranged by dragging and dropping them to the required position in the form. This allows you to customize the layout and flow of your form to better suit your needs and the user experience.
In the Design mode of the widget designer, select the field to be moved.
Drag and drop the field to the required position in the form.
The Thank you screen is displayed after a user submits the respective form. Using the widget designer, you have the capability to customise the appearance of the thank you screen of a form, enabling to see your personalised thank you screen upon submitting the form.
On the widget designer page (Design mode), click the Form toggle button on the bottom bar.
The view will be changed to Thank you screen.
To set the Thank you Screen's Header Properties:
Click on the header section of the Thank You screen. Its Properties panel will be displayed on the right.
Do required changes to the header section from the Properties panel.
Click on the body section of the Thank You screen. Its Properties panel will be displayed on the right.
Do required changes to the body section from the Properties panel.
Preview mode can be used to view a live preview of the appearance and the behavior of the form.
To preview your form:
On the widget designer page, click Preview button to change the mode to Preview.
The widget will be loaded in the preview mode.
To preview the form in a new window:
On the widget designer page, click the Share button at the top right.
Click Open Page.
Your form will launch a new window.
After you have done required customisations, you can save the form for future reference.
On the widget designer page, click Save Widget.
Enter a Name for the widget (adding a name is mandatory).
Go to General tab and enter the name.
Click Save Widget.
After creating the form, you can share it with others. To learn more about this, refer to the article linked below.
Here is a short video on how to create a form to populate data in a database.
