Webflow sync, pageviews & more.
NEW

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

TL;DR
  • Create a Div Block for the modal, set it to fixed position, hidden visibility, and a semi-transparent background.
  • Add another Div Block inside for modal content and insert an Embed Element with the HTML form inside.
  • Create a button to open the modal using Webflow interactions (set visibility to visible and opacity to 100%).
  • Add a close button inside the modal and set an interaction to hide the modal on click.
  • Publish and test to ensure the modal and form submission work correctly.

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

    \`\`\`

    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.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I slow down an animation created with JavaScript in Webflow? I am currently using the "smooth" property for the ".scrollIntoView" function, but I want it to go slower. Is it possible to create a custom JavaScript function to achieve this?
Is it possible to create a "show more" button in Webflow to display all records in an FAQ collection list?
What are you currently using for video hosting and what features would you like to see in a Webflow video hosting solution like Vidzflow?
How can I fix the issue of input fields stretching vertically and select boxes stretching horizontally in IE compatibility mode on a Webflow site? The code I tried, including the tags, doesn't seem to work.
How can I fix the issue with border radius not displaying properly on iOS when applied to a parent div instead of the image itself in Webflow?
What is the issue with the Safari browser action bar on iPhones and iPads when using a full screen home page created with the Webflow platform?
How can I include UTM parameter data in my Webflow form submission to track sources like social media and Google?
Can a parallax scrolling effect, where the page scrolls over a background image or different images in different sections, be achieved in Webflow without coding? If not, can the background images stay static while the page scrolls over them?
Can Webflow and Vue.js be used together without conflicts? Any best practices or suggestions for using these platforms together?
How can I change the color of the bullets in Webflow without using code?
How can I prevent the influx of Spam emails originating from 'Eric Jones' through Webflow forms, and potentially notify the Webflow community about this issue?
What could be causing the scroll issue on my published Webflow website?
How can I make all external links open in a new tab by default on my Webflow site, while keeping internal links opening in the current tab? Is there a solution that doesn't involve manually ticking a box for each link? Thank you!
How can I style text links in a rich text block for dynamic content in Webflow without causing formatting issues within paragraphs?
How can I provide user accounts for my e-commerce website in Webflow, allowing customers to save their profile information and shipping addresses?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?
How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?
How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I pull the stored email from the first form submitted on our website and input it into a field on a later form during the sign-up process in Webflow? I have tried using the provided script but it only displays "undefined" in the field. I don't have much knowledge of JavaScript and found this script online.
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?