How can I hide the TypeForm link inside a link block in Webflow to implement a full-screen popup on a button press?
TL;DR
- Embed the Typeform iframe with full-screen styling and set it to display:none using an Embed element in Webflow.
- Use Webflow interactions on a button or link block to change the iframe’s display to show it as a popup.
- Add a close button with another interaction to hide the iframe again, and optionally include an overlay and body scroll lock for better UX.
To create a full-screen Typeform popup triggered by a button (or link block) press in Webflow, you can embed Typeform using a hidden <iframe> and display it using interactions instead of using a visible link.
1. Embed the Typeform as a Hidden Element
- Drag an Embed element (from the Add panel) onto your page.
- Paste your Typeform's iframe embed code inside the Embed field, but add:
style="display:none;"to keep it hidden initially- Add
id="typeform-popup"or assign a class like.typeform-popupto target it later - Example (sanitized):
<iframe id="typeform-popup" src="https://yourform.typeform.com/to/xyz" style="display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; border:none; z-index:9999;"></iframe>
2. Make the Embed Visible on Button Press
- Select the button or link block you want to trigger the popup.
- Go to the Interactions panel and create a new Mouse Click (Tap) interaction.
- Choose Start an Animation, click +, and name it (e.g., "Show Typeform").
- Add a new step:
- Select Element → Target the iframe by its ID or class.
- Choose Display and set it to Block or Flex.
- Optionally, add Opacity from 0 to 100% for a fade-in effect.
3. Add a Close Button to Dismiss the Typeform
- Inside the same embed wrapper or somewhere on top of the iframe, place a close button (e.g., an "X") with
position: absolute; top: 10px; right: 10px; z-index:10000; - Use another Mouse Click interaction on the close button to:
- Set the iframe's display back to none (or reduce opacity to 0 and disable interaction).
- Use a fade-out animation if desired.
4. Improve the UX (Optional)
- Add a semi-transparent black overlay div behind your iframe for a modal effect.
- Prevent page scroll by adjusting
overflow: hidden;onbodywhen the popup is visible using custom code.
Summary
To hide the Typeform link and trigger a full-screen popup via button press in Webflow, use a hidden iframe embed styled as a full-screen modal and reveal it using Webflow interactions on your button. Add a close button and optional overlay for polished UI control.