How can I hide the TypeForm link inside a link block in Webflow to implement a full-screen popup on a button press?
- Get the Typeform full-page popup embed code and paste it into Webflow’s page settings under "Before </body>".
- Assign a unique class to your button (e.g.,
.typeform-button) and update the script to trigger the popup usingdocument.querySelector. - Use a plain button or link block without setting a visible URL to keep the Typeform link hidden.
You want to hide a Typeform embed URL inside a Webflow link block while still being able to trigger a full-screen Typeform popup when a button is clicked. Here's how to do that effectively in Webflow.
1. Embed Typeform as a Popup
- Go to your Typeform account and open the form you want to share.
- Click "Share" and select the "Popup" tab.
- Choose "Full-page popup".
- Customize any settings, then click "Get the code".
- Copy the JavaScript snippet with the
typeformEmbed.makePopup()function.
2. Add the Typeform Embed Script to Webflow
- In Webflow Designer, go to Page Settings where you want the popup.
- Scroll to the Before </body> tag custom code section.
- Paste the full Typeform embed code including the
makePopup()call. - Make sure you assign a unique class or ID to your Webflow button (e.g.,
typeform-button) — you'll need this to link the popup trigger.
3. Target the Button Inside Webflow
- In your existing layout, use a Button or Link Block element as your trigger.
- Assign it a unique ID or class (e.g.,
typeform-button). - In the pasted Typeform script, change the trigger selector to match your Webflow element:
```javascript
typeformEmbed.makePopup('https://yourform.typeform.com/to/abc123', {
mode: 'popup',
autoClose: 3,
hideHeaders: true,
hideFooters: true,
buttonText: "Start",
triggerElement: document.querySelector('.typeform-button')
});
```
- Ensure the selector (
document.querySelector) matches the class or ID used in your Webflow element.
4. Hide the Typeform URL in Webflow
- Do not link directly to the Typeform URL in the button’s Link Settings.
- Instead, use a plain Link Block or Button with an assigned class.
- Since all interactions are controlled via JavaScript, there’s no need to expose the Typeform URL in Webflow’s UI.
Summary
To hide a Typeform link inside a Webflow button and show it as a full-screen popup on click, use Typeform’s custom embed popup script. Place the script in Webflow’s page settings and use a JavaScript selector to trigger the popup from your button—this keeps the URL hidden from the user interface.
