Page Altering Modal activated with button inside component

Hello

This will be a straight forward solution I am sure.

I am working with a template with predesigned components and wish to create my contact form within a page altering modal activated within an animated navbar instance

I need help understanding why when I build a modal that is activated by a button from within said component, It will not not work. The message is given ‘cannot link element from outside of instance’ but when the element is placed within the instance it doesn’t behave the way I want it to.

Desired behavior is an animated pop out window with the appropriate contact form, which blurs and places a low opacity white over the page.

What is it about code logic I am not understanding here?

Thank you
Luke

I have broken


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi Luke,

For pop-up forms to work correctly in Webflow, the pop-up wrapper must be placed directly under the Body element of your project, not within component instances. Here’s the proper setup:

Place your pop-up wrapper at the root level of your project’s hierarchy and style it with:

  • Display: Flex
  • Position: Fixed
  • Background: Your desired overlay opacity
  • Width and Height: 100% (to cover the entire viewport)

This placement ensures the pop-up functions properly across all pages and instances while maintaining the correct stacking order and overlay effects.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

Hey @Whitlessness Your read-only didn’t embed properly, can you try again? I’ve built something like this many times before (a contact pop-up inside a navbar component) so I’ll be ably to help once I see what you’ve got going on !