Form Layout
A responsive form screen skeleton with a fixed header, scrollable multi-section field grid, and sticky footer. Fields use LayoutWrap for responsive 2-column/1-column layout. Pure containers.
Easy 3 min 7 containers
Preview
Sections
Form Header
Fixed top bar with title + optional step indicator. Height: 56px mobile, 72px desktop. Does not scroll.
Divider
1px horizontal rule below the header.
Field Section 1
Card with 4 field placeholders in a 2-column grid (LayoutWrap). Stacks to single column on mobile.
Field Section 2
Second card with 2 field placeholders. Same responsive grid behavior.
Notes Section
Full-width card for a notes or textarea field. Fixed 200px height.
Form Footer
Sticky bottom bar (68px) with Cancel + Submit buttons aligned right. Does not scroll.
Responsive breakpoints
| Width | Label | Behavior |
|---|---|---|
| < 640px | Mobile | Single column fields, 12px padding, smaller title, taller section cards |
| 640–1024px | Tablet | Two-column fields, 24px padding, full title size |
| > 1024px | Desktop | Two-column fields, max-width 900px centered form |
YAML
Screens:
scrForm:
Properties:
Fill: =RGBA(249, 250, 251, 1)
OnVisible: |-
=// Initialize your screen variables here
UpdateContext({ctxFormMode: "New"})
Children:
- cntRoot:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
Fill: =RGBA(249, 250, 251, 1)
Height: =Parent.Height
LayoutDirection: =LayoutDirection.Vertical
Width: =Parent.Width
Children:
- cntFormHeader:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
Fill: =RGBA(255, 255, 255, 1)
FillPortions: =0
Height: =If(App.Width < 640, 56, 72)
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =If(App.Width < 640, 8, 12)
LayoutJustifyContent: =LayoutJustifyContent.SpaceBetween
LayoutMinHeight: =If(App.Width < 640, 52, 60)
PaddingBottom: =8
PaddingLeft: =If(App.Width < 640, 12, 24)
PaddingRight: =If(App.Width < 640, 12, 24)
PaddingTop: =8
Children:
- lblFormTitle:
Control: Text@0.0.51
Properties:
AlignInContainer: =AlignInContainer.Stretch
FillPortions: =1
FontColor: =RGBA(17, 24, 39, 1)
Height: =42
Size: =If(App.Width < 640, 20, 28)
Text: ="New Record"
VerticalAlign: =VerticalAlign.Top
Weight: ='TextCanvas.Weight'.Semibold
Wrap: =false
- lblStepIndicator:
Control: Text@0.0.51
Properties:
FontColor: =RGBA(107, 114, 128, 1)
Size: =12
Text: ="[step indicator]"
Width: =100
- rctDivider:
Control: Rectangle@2.3.0
Properties:
AlignInContainer: =AlignInContainer.Center
BorderColor: =RGBA(0, 0, 0, 0)
BorderStyle: =BorderStyle.None
Fill: =RGBA(229, 231, 235, 1)
Height: =1
LayoutMinHeight: =1
Width: =Parent.Width
- cntFormBody:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.Center
LayoutDirection: =LayoutDirection.Vertical
LayoutGap: =16
LayoutOverflowY: =LayoutOverflow.Scroll
PaddingBottom: =If(App.Width < 640, 12, 24)
PaddingLeft: =If(App.Width < 640, 12, 24)
PaddingRight: =If(App.Width < 640, 12, 24)
PaddingTop: =If(App.Width < 640, 12, 24)
Width: =Parent.Width
Children:
- cntFieldSection1:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.Center
BorderColor: =RGBA(229, 231, 235, 1)
BorderThickness: =1
Fill: =RGBA(255, 255, 255, 1)
FillPortions: =0
Height: =If(App.Width < 640, 320, 180)
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =12
LayoutMinWidth: =200
LayoutWrap: =true
PaddingBottom: =16
PaddingLeft: =18
PaddingRight: =18
PaddingTop: =16
RadiusBottomLeft: =12
RadiusBottomRight: =12
RadiusTopLeft: =12
RadiusTopRight: =12
Width: =Min(Parent.Width - If(App.Width < 640, 0, 48), 900)
Children:
- lblFieldPlaceholder1a:
Control: Text@0.0.51
Properties:
FillPortions: =1
FontColor: =RGBA(107, 114, 128, 1)
Height: =60
LayoutMinWidth: =200
Size: =11
Text: ="[field 1]"
- lblFieldPlaceholder1b:
Control: Text@0.0.51
Properties:
FillPortions: =1
FontColor: =RGBA(107, 114, 128, 1)
Height: =60
LayoutMinWidth: =200
Size: =11
Text: ="[field 2]"
- lblFieldPlaceholder1c:
Control: Text@0.0.51
Properties:
FillPortions: =1
FontColor: =RGBA(107, 114, 128, 1)
Height: =60
LayoutMinWidth: =200
Size: =11
Text: ="[field 3]"
- lblFieldPlaceholder1d:
Control: Text@0.0.51
Properties:
FillPortions: =1
FontColor: =RGBA(107, 114, 128, 1)
Height: =60
LayoutMinWidth: =200
Size: =11
Text: ="[field 4]"
- cntFieldSection2:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.Center
BorderColor: =RGBA(229, 231, 235, 1)
BorderThickness: =1
Fill: =RGBA(255, 255, 255, 1)
FillPortions: =0
Height: =If(App.Width < 640, 320, 180)
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =12
LayoutMinWidth: =200
LayoutWrap: =true
PaddingBottom: =16
PaddingLeft: =18
PaddingRight: =18
PaddingTop: =16
RadiusBottomLeft: =12
RadiusBottomRight: =12
RadiusTopLeft: =12
RadiusTopRight: =12
Width: =Min(Parent.Width - If(App.Width < 640, 0, 48), 900)
Children:
- lblFieldPlaceholder2a:
Control: Text@0.0.51
Properties:
FillPortions: =1
FontColor: =RGBA(107, 114, 128, 1)
Height: =60
LayoutMinWidth: =200
Size: =11
Text: ="[field 5]"
- lblFieldPlaceholder2b:
Control: Text@0.0.51
Properties:
FillPortions: =1
FontColor: =RGBA(107, 114, 128, 1)
Height: =60
LayoutMinWidth: =200
Size: =11
Text: ="[field 6]"
- cntFieldSection3:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.Center
BorderColor: =RGBA(229, 231, 235, 1)
BorderThickness: =1
Fill: =RGBA(255, 255, 255, 1)
FillPortions: =0
Height: =200
LayoutDirection: =LayoutDirection.Vertical
PaddingBottom: =16
PaddingLeft: =18
PaddingRight: =18
PaddingTop: =16
RadiusBottomLeft: =12
RadiusBottomRight: =12
RadiusTopLeft: =12
RadiusTopRight: =12
Width: =Min(Parent.Width - If(App.Width < 640, 0, 48), 900)
Children:
- lblNotesPlaceholder:
Control: Text@0.0.51
Properties:
FontColor: =RGBA(107, 114, 128, 1)
Size: =11
Text: ="[notes / textarea section]"
- cntFormFooter:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
BorderColor: =RGBA(229, 231, 235, 1)
BorderThickness: =1
Fill: =RGBA(255, 255, 255, 1)
FillPortions: =0
Height: =68
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =8
LayoutJustifyContent: =LayoutJustifyContent.End
LayoutMinHeight: =68
PaddingBottom: =12
PaddingLeft: =If(App.Width < 640, 12, 24)
PaddingRight: =If(App.Width < 640, 12, 24)
PaddingTop: =12
Children:
- lblCancelPlaceholder:
Control: Text@0.0.51
Properties:
FontColor: =RGBA(107, 114, 128, 1)
Size: =12
Text: ="[Cancel]"
Width: =60
- lblSubmitPlaceholder:
Control: Text@0.0.51
Properties:
FontColor: =RGBA(37, 99, 235, 1)
Size: =12
Text: ="[Submit]"
Weight: ='TextCanvas.Weight'.Semibold
Width: =60How to use
- 1Copy the YAML above
- 2In Power Apps Studio, go to Tree View → Screens → paste the YAML
- 3The layout appears with placeholder labels in each field slot
- 4Replace placeholder labels with Text Input, Dropdown, Date Picker, etc.
- 5Customize section heights and add/remove field slots as needed