Display floating pane form in 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: