Display floating pane form at the center of the page

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: 0;
left: 50%;
right: auto;
bottom: 0;
opacity: 1;
border-radius: 24px;
transform: translateX(-50%) !important;
transition: top 0.3s, opacity 0.3s;
}

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

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: