Display Floating Pane form like Popup with Modal layout

CSS Codes Forms
1

Add the code below to the Custom CSS field on your Form widget’s Appearance tab:

.global-styles,
[class*='Pane__PaneContent-sc'] {
top: 50%;
left: 50%;
right: auto;
bottom: 0;
opacity: 1;
border-radius: 24px;
transform: translateX(-50%) translateY(-50%) !important;
transition: top 0.3s, opacity 0.3s;
}

.global-styles,
[class*='Pane__PaneContent-sc']:not([style*='transform: translateX(0%)']) {
opacity: 0;
top: calc(50% + 20px);
}

.global-styles,
[class*='WidgetBackground__Container-sc'],
[class*='Pane__PaneContent-sc'] {
min-height: unset !important;
height: max-content !important;
}

.global-styles,
[class*='Content__WidgetContainer-sc'] {
min-height: auto;
max-height: 100vh;
overflow: auto;
}

Guys, if this code was helpful to you, please drop a line in the comments. Your feedback helps us improve our services and provide better solutions :slightly_smiling_face: