How can I embed an HTML form on a modal in Webflow?

Embedding an HTML form in a modal in Webflow involves creating a modal and placing your form inside it. Here’s how to do it:

​

1. Create a Modal Structure

• Add a Div Block to your page where you want the modal.
• Set the Div Block to have absolute or fixed positioning to make it a pop-up over other content.
• Style the Div to occupy full width and height with a centered layout.

​

2. Add Modal Trigger

• Insert a Button or Link in your design that will trigger the modal.
• Assign a Class to this trigger for easier interaction setup.

​

3. Add Custom HTML Embed

• Drag an Embed Element inside your modal Div Block.
• Insert Your Form’s HTML Code within this embed.

​

4. Configure Modal Interactions

• Use Webflow Interactions to set up the modal opening and closing.
• Open Interaction: Link the opening of the modal to the trigger you set with a click or tap animation.
• Close Interaction: Ensure there’s a way to close the modal, typically by clicking outside the modal or a close button.

​

5. Style Your Modal and Form

• Customize The Form and Modal Styles to match your site design.
• Ensure Responsiveness by using percentage widths and relative sizing.

​

Summary

To embed an HTML form in a modal using Webflow, create a modal structure, add a form using a custom HTML Embed, and configure interactions for smooth functionality and style compliance.