# Embed a form in Webflow

Put a Formstep form inside a Webflow page with a Code Embed element, or open it as a popup from a button. Which Webflow plans allow it, and what the Designer shows.

The [Code Embed element](https://help.webflow.com/hc/en-us/articles/33961332238611-Custom-code-embed) is available on a Workspace on Core, Growth, Agency or Freelancer, or on a site with an active Site plan.

## 1. Copy the embed code

In Formstep, open the **Public link** sheet, click the **Embed** card, then **Copy embed code**.

## 2. Add a Code Embed element

1. In the Webflow Designer, open the **Add** panel and add a **Code Embed** element where the form should sit.

2. Paste the code.

3. Save and close the code editor.

The embed is as wide as the element it sits in. Its height is the one you set in Formstep.

## What the Designer shows

With **Auto-resize height** off, Webflow previews the form on the canvas. With it on, the code holds a script, and the Designer shows a placeholder. The script runs once you preview or publish the site, so check the height on the published page.

## Open the form as a popup

Click the **Popup** card in the Public link sheet and copy the popup code. Paste it into a Code Embed element anywhere on the page. The Designer shows a placeholder for it.

With the trigger **Automatically on page load**, nothing more is needed. To open it from a button, add the button to the same Code Embed, with the function name from the comment in your code:

```
<button onclick="window.openFormstepPopup_Abc12XYz()">Open the form</button>
```

> **If the form does not show**
>
> Look at the published page: a script never runs on the canvas. If the Add panel has no Code Embed element, the Workspace or site plan does not include it.

## Next steps

[Embedding & popups](https://formstep.io/docs/sharing-publishing/embedding-popups/) — Every embed and popup setting

[Appearance & theming](https://formstep.io/docs/branding-domains/appearance-theming/) — Make the form look like your site