Slideover

1. Create Surface Constructor

Add the following script to your site's footer. With WPCode, go to Code Snippets > Header & Footer and paste it into the Footer section.

<!-- Start Surface Form Embed -->

<script>
  (function () {
     const surface_src = "REPLACE ME WITH FORM URL";
     const surface_embed_type = "slideover";
     const target_element_class = "surface-form-button";
     const c = new SurfaceEmbed(
       surface_src,
       surface_embed_type,
       target_element_class,
     );
   })();
</script>

<!-- End Surface Form Embed -->

2. Configure Form Trigger Button

Next, add the surface-form-button class to the button that should open the form:

1. In the block editor, select your Button block.
2. In the right sidebar, open the Block tab and expand Advanced.
3. In Additional CSS class(es), add surface-form-button.

Finally, update and publish your changes. Clicking the button should now open your Surface Form in a slideover!