In this tutorial, a Form with Labels will be created below the fields using the example table “employees” and the following extra resources:
- Blocks.
- Pages .
Creating a Form with Labels below the fields
Note:
If you have any questions on how to create a Form, go to: Creating a new Form
1. Create a new Form- type application , select the “Single Record” option and then select the “employees” sample table .
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/09/image-7.png)
2. Once this is done, if you want a better display of the form, click on the “Edit Fields” tab and change the name of the highlighted fields, as shown in the images below.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/09/image-9.png)
Editing Form fields with Labels below the fields
1. First, in the application menu, access the “Layout” tab and select the “Pages” option.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/09/image-14.png)
2. Once this is done, rename the existing page to “Personal Information” , create a new page, called “Annotations” , and then click on the “Include” button as shown in the image below.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/09/image-15-1024x184.png)
3. Now, still in the “Layout” tab , select the “Blocks” option .
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/09/image-16.png)
4. Once this is done, rename the existing block to “Personal Information” and configure it according to the image below.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/09/2020-09-09_18-17-48-1024x240.png)
5. Still in the block settings, click on the “Create New Block” button and create a new block entitled “Address”.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/09/image-42.png)
6. After creating the “Address” block , create another block entitled “Notes”.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/09/image-43.png)
6. Now, place the “Address” block on “Pag1” and configure it according to the image below.
![](http://www.scriptcase.com.br/tutoriais/wordpress/wp-content/uploads/2016/06/2019-11-11_12-30-1024x309.png)
7. After configuring the previous block, configure the “Annotations” block according to the image below and keep it in “Pag2” .
![](http://www.scriptcase.com.br/tutoriais/wordpress/wp-content/uploads/2016/06/x2019-11-11_12-32-1024x309.png.pagespeed.ic.uhya-kxYVc.webp)
8. Once this is done, in the application menu, access the “Field Positioning” tab .
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/09/image-40.png)
9. Now, move the fields: “employeeid” , “titleofcourtesy” , “homephone” , “photo” , “reportsto”, “photopath” and “extension” to the left box , as shown below.
![](https://www.scriptcase.com.br/tutoriais/wordpress/wp-content/uploads/2019/11/campos_junk.png)
10. Then, organize the fields in their respective blocks and pages, as shown in the image below.
![](https://www.scriptcase.com.br/tutoriais/wordpress/wp-content/uploads/2019/11/campos_organizados.png)
11. Finally, select the “Run Application” button on the toolbar to generate the Form.
That done, after following the steps above, the Form will look like this:
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/09/image-17.png)
To see more examples created using Scriptcase, go to: Examples: Complete Systems and Applications with Scriptcase.
Comment this post