How To Build Responsive Power Apps Forms From Scratch


This blog provides a step-by-step guide to building responsive Power Apps forms from scratch. By following these simple instructions, readers will be equipped to create aesthetically appealing and efficient forms for various needs.

1. Create a New Canvas App

2. Change App settings to enable Responsiveness

Turn off those two features “Scale to fit”, “Lock aspect ratio”

3. Add vertical container into the screen

from the tree view select the container and change update the following properties :

					Width= Parent.Width 
Height= Parent.Height 
LayoutJustifyContent = LayoutJustifyContent. SpaceBetween 
LayoutAlignItems = LayoutAlignItems.Center 
LayoutOverflowY= LayoutOverflow.Scroll 
Fill= RGBA(186, 202, 226, 1) 

4. Inside that container add another vertical container and change the following details:

					Width= Max(Parent.Width*0.4,320) 
Height = Max(Parent.Height*0.4,650) 
Fill= RGBA(255, 255, 255, 1) 
DropShadow= DropShadow.ExtraBold 
LayoutAlignItems= LayoutAlignItems.Center 


5. Insert a label inside that container2 for header :

					Text= "Registration Form" 
FontWeight= FontWeight.Bold 
Width= Parent.Width 
Height= 50 
Size= 20 
Align= Align.Center 
Color= RGBA(255, 255, 255, 1) 
Fill= RGBA(56, 96, 178, 1) 
AutoHeight= false 
VerticalAlign= VerticalAlign.Bottom 

6. Add another label for 1st question inside container2 with following properties :

					Text= "Name" 
FontWeight= FontWeight. Semibold 
Width= Parent.Width*0.85 
Size= 15 
Heigt= 60 

7. Add text input for first question with following properties :

					Default= "" 
HintText= "Name" 


8. Now our form with 1st question is created for remaining questions just copy paste the same label and textinput and change the text values (height of next labels will be 50 and all other details will be same) :

9.Now lets add the last element (the submit button) insert vertical container in container2 and change the following properties :

					LayoutJustifyContent= LayoutJustifyContent.Center 
DropShadow= DropShadow.None


10.Then after adding container3 add a button inside container3 and change the following properties :

					AlignInContainer= AlignInContainer.Center 
Text= "Submit" 


11.Our Form Is Ready :


Building responsive forms in Power Apps can seem challenging, but with the right approach and guidelines, it becomes a straightforward task. By leveraging the power of containers, properties, and design elements, one can craft user-friendly and visually appealing forms for any application.

If you want to learn more about Power Apps, feel free to explore our other informative articles and tutorials on Power Apps.

Have additional inquiries? Our team is here to assist. Please don’t hesitate to reach out!

About The Author