Step 2.2: Popup

​

Create Surface Constructor

1. In Framer, go to project settings.
2. Scroll down to Custom Code section.
   

    <!-- Start Surface Form Embed -->
    <script>
        window.onload = 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 of Surface Form Embed -->

​

Add className to the target element

1. Click on New File under File selection menu. Name it SurfaceFormButton.
   
2. Rename the file and click on Create.
3. In the code editor, go to the very bottom, add a new line, and paste the following code:
   Copy

       export function withClass(Component): ComponentType {
           return (props) => {
               props.className += " surface-form-button" // Remember to add a space
               return <Component {...props} />
           }
       }
   

4. Now go back to the element, In File selection menu, select SurfaceFormButton in the first dropdown and select withClass from the Override selection menu.
   

​

Publish the site