Form EmbeddingWordPress

Popup

Embed a Surface Form popup

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 = "popup";
     const target_element_class = "surface-form-button";
     const c = new SurfaceEmbed(
       surface_src,
       surface_embed_type,
       target_element_class,
     );
   })();
</script>

<!-- End Surface Form Embed -->

Replace REPLACE ME WITH FORM URL with your actual Surface Form URL.

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 popup!

On this page