Widget Form Embed
Display your form as a customizable widget on your website
WAIT... Make sure that you have added the Surface Tag to your site before proceeding.
Edit Surface Form Embedding Script
Edit the Surface Form embedding script to display the form as a widget:
<!-- Start Surface Form Embed -->
<script>
(function() {
const surface_src = "surface_form_url";
const surface_embed_type = "widget"; // switch to "widget" to display the form as a widget
const target_element_class = "surface-form-button";
const c = new SurfaceEmbed(
surface_src,
surface_embed_type,
target_element_class,
{
widgetStyles: {
position: "right",
bottomMargin: "40px",
sideMargin: "30px",
size: "64px",
backgroundColor: "#1a56db",
hoverScale: "1.05",
boxShadow: "0 6px 12px rgba(0,0,0,0.25)"
}, // customize the widget appearance
}
);
c.popupSize = "small";
})();
</script>
<!-- End of Surface Form Embed -->Customize Widget Appearance
Adjust the widgetStyles options on the SurfaceEmbed instance:
widgetStyles: {
position: "right", // position of the widget (right, left)
bottomMargin: "40px", // margin from the bottom of the page (in px)
sideMargin: "30px", // margin from the side of the page (in px)
size: "64px", // size of the widget (in px)
backgroundColor: "#1a56db", // background color of the widget (in hex)
hoverScale: "1.05", // scale of the widget when hovered (in decimal)
boxShadow: "0 6px 12px rgba(0,0,0,0.25)" // shadow of the widget (in hex)
}Control Popup Size
Clicking the widget opens a popup. Set popupSize on the SurfaceEmbed
instance to small, medium or large.
c.popupSize = "small";Use It with Popup Embedding
The widget only inherits the popup embedding type, so you can still add the
surface-form-button class to any HTML element to trigger the popup.
Where to Paste It
The widget renders its own button, so no trigger class is needed. The class instructions in the tabs below only apply if you also want a second, in-page trigger.
Webflow dashboard → Project Settings → Custom Code, and paste it into the Footer Code section. Publish the site for it to take effect.
Then give the trigger element the class: select the button in Designer, open
the Style panel, and add surface-form-button to the Style Selector.