# Slideover



### 1. Create Surface Constructor [#1-create-surface-constructor]

Add the following script to your site's **footer**. With
[**WPCode**](/guides/embedding/wordpress/embedding), go to **`Code Snippets`** >
**`Header & Footer`** and paste it into the **Footer** section.

```html
<!-- 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 -->
```

<Note>
  Replace `REPLACE ME WITH FORM URL` with your actual Surface Form URL.
</Note>

### 2. Configure Form Trigger Button [#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 &#x2A;*`Block`*&#x2A; tab and expand &#x2A;*`Advanced`**.
3. In &#x2A;*`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!