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

To embed an HTML form inside a modal in Webflow, follow these steps:

1. Add the Modal Structure

• Create a new Div Block and give it a class like modal-wrapper.
• Set its display to flex and position to fixed (top: 0, left: 0, width: 100vw, height: 100vh).
• Set the visibility to hidden by default and background color to rgba(0,0,0,0.5).
• Inside this div, add another Div Block for the modal content (e.g., class modal-content).

2. Embed the HTML Form

• Drag an Embed Element inside the modal-content.

• Insert your custom HTML form inside the embed field:

  ```html

  Name: Submit
  \`\`\`

  Note: Ensure the action points to a valid form processing URL (e.g., Webflow Forms, third-party service).

3. Add a Button to Open the Modal

• Create a button (e.g., "Open Form") and set an interaction:
• On Click → Show/Hide → Display: Flex, Set opacity to 100%, visibility to visible.

4. Add a Close Button

• Inside the modal-content, add a close button (X).
• Set an interaction for it:
• On Click → Hide Modal → Opacity 0%, visibility hidden.

5. Publish & Test

• Publish your Webflow site and test the form functionality inside the modal.

Summary

Embed the HTML form inside a Webflow modal, control its visibility with interactions, and ensure the form’s submission endpoint works properly.