How can I embed an HTML form on a modal in Webflow?
TL;DR
- Create a fixed-position modal wrapper with centered flex layout and hidden visibility.
- Embed your HTML form inside a Div using the Embed element (no or tags).
- Use Webflow interactions to toggle modal visibility on button clicks, and optionally disable background scrolling.
To embed an HTML form inside a modal in Webflow, you’ll need to (1) create a modal structure, (2) embed the HTML form using an Embed element, and (3) add interactions to open/close the modal.
1. Create the Modal Structure
- Drag a Div Block onto your page and give it a class like
Modal Wrapper. - Set this wrapper’s position to Fixed, z-index high (e.g., 9999), and make it full width and height (100vw/100vh).
- Set display to Flex, align center & justify center. Set visibility to hidden or opacity to 0 initially.
- Inside the wrapper, add another Div Block (e.g.,
Modal Content) for your form container. Style it as desired.
2. Add the HTML Form
- Inside the
Modal Contentdiv, use the Embed element (from the Add Elements panel). - Paste your custom HTML form code into the Embed element.
- Make sure the form uses standard HTML
<form>...</form>structure. - Do not include
<html>or<body>tags—Webflow only needs what's inside the form structure.
3. Add Open/Close Interactions
- Create a button on your page to open the modal.
- Set a click trigger on the button.
- Use Interactions Panel to create a new click action that sets modal display to flex and opacity to 100%.
- Add a close button inside the modal (
Xicon or similar). - Set a click trigger to hide the modal, either by setting display to none or opacity back to 0 and visibility hidden.
4. Optional: Prevent Background Scroll
- When the modal opens, you may want to prevent scrolling on the body.
- Use an interaction to set
overflow: hiddenon thebodywhen opening the modal and reset it tovisiblewhen closing.
Summary
To embed an HTML form in a modal on Webflow, set up a fixed modal wrapper, insert your form inside an Embed element, and use Webflow interactions to control visibility. This gives you a custom form experience within a styled, interactive modal.