# Popup









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

Go to the Webflow [**dashboard**](https://webflow.com/dashboard) > **`Project Section`** > Select **`Custom Code`** and add the following custom code into the **`footer`** code section.

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

This is what your script should look like:

<Frame>
    <img alt="Webflow Footer Code Section" src="__img0" />
</Frame>

### 2. Configure Form Trigger Button [#2-configure-form-trigger-button]

Next, navigate to your Webflow Design Studio and select the button that triggers the form. After Selecting the button, you should see `Style` tab on your right panel.

<Frame>
    <img alt="Webflow Design Studio" src="__img1" />
</Frame>

Finally, add `surface-form-button` in Style Selector:

<Frame>
    <img alt="Webflow Button Class Configuration" src="__img2" />
</Frame>

Finally, save and publish your changes. Your Surface Form should now be embedded on your Webflow website!