How can I hide the TypeForm link inside a link block in Webflow to implement a full-screen popup on a button press?

To implement a full-screen Typeform popup in Webflow, while hiding the actual link, you can embed the Typeform as a hidden element and trigger it with a Webflow interaction. Here's how to do it step by step:

1. Add and Style the Link Block

• Drag a Link Block onto your canvas.
• Inside the Link Block, nest a Text Block, Button, or desired trigger element (e.g., “Take Survey”).
• Remove the default link URL if it's not needed for navigation.
• Give the Link Block a class (e.g., popup-trigger).

2. Embed the Typeform Popup Code

• Go to your Typeform account and select Share → Embed → Popup → Full Page.
• Click “Get the Code” and locate the popup trigger script.
• In Webflow, add an Embed element or go to Page Settings → Custom Code → Footer.
• Extract the script parts:
• Keep the Typeform embed script in the Footer.
• Omit or modify the <a href="..."> part — you’ll simulate the click with custom JavaScript.

3. Create a Hidden Triggering Link (Optional)

• Avoid using a visible <a> tag from Typeform.

• Instead, paste only the Typeform popup trigger JavaScript in Webflow’s Footer or Embed element, like:

• Load the embed script:

  <script src="https://embed.typeform.com/embed.js"></script>

• Add a custom script to trigger the popup on button click (make sure this is inside a <script> tag):

  **`document.querySelector('.popup-trigger').addEventListener('click', function() {
  window.typeformEmbed.makePopup('https://yourform.typeform.com/to/abc123', {
  mode: 'fullscreen',
  autoClose: 3,
  hideHeaders: true,
  hideFooters: true,
  }).open();
  });`**

• Replace 'https://yourform.typeform.com/to/abc123' with your own Typeform URL.

4. Hide the Original Link

• Since you're triggering the embed programmatically, you don't need to show or style the default link.
• You can either not include it at all, or if Webflow requires it, set display: none via styles.

5. Publish and Test

• Publish your site to see the effect.
• Click the trigger button and the full-screen popup should launch.

Summary

To hide a Typeform link and show it as a full-screen popup on button press in Webflow, use custom JavaScript to trigger the Typeform embed instead of directly linking to it. Embed the Typeform script in your Footer and use an interaction or event listener on a custom button to open the popup manually.