# Floating Pane Button

**URL:** <https://community.elfsight.com/t/floating-pane-button/147073>\
**Category:** Customization\
**Tags:** form-builder\
**Created:** [March 2, 2026, 2:29am UTC](https://community.elfsight.com/t/floating-pane-button/147073 "2026-03-02T02:29:29Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Erb\_Rose](https://avatars.discourse-cdn.com/v4/letter/e/3da27b/32.png) [@Erb\_Rose](https://community.elfsight.com/u/Erb_Rose)\
**Post date:** [March 2, 2026, 2:29am UTC](https://community.elfsight.com/t/floating-pane-button/147073/1 "2026-03-02T02:29:29Z")

</div>

Hello,

I use a Carrd website and have embeded the plugin in properly to the page. I am trying to make the Carrd button instead of the elfsight button to open the form as a floating pane and it is not working. Suggestions?

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 2, 2026, 10:12am UTC](https://community.elfsight.com/t/floating-pane-button/147073/3 "2026-03-02T10:12:54Z")

</div>

Hi there, @Erb_Rose 👋

Have you tried to follow the steps described in [this guide](https://community.elfsight.com/t/form-widgets-how-to-open-forms-from-a-custom-button/25546)?

If this solution didn’t work for you, please send me a link to the page, where your widget is installed and specify the button you’d like to use as a form trigger. I’ll be happy to check it for you 🙂

---

<div class="post-metadata">

**Author:** ![Erb\_Rose](https://avatars.discourse-cdn.com/v4/letter/e/3da27b/32.png) [@Erb\_Rose](https://community.elfsight.com/u/Erb_Rose)\
**Post date:** [March 2, 2026, 3:15pm UTC](https://community.elfsight.com/t/floating-pane-button/147073/4 "2026-03-02T15:15:57Z")

</div>

Hey Max!

I followed the instruction and could not get it to work. It is what i was working on previously but had troubles.

Here is the link: [https://test108.carrd.co/](https://test108.carrd.co/)

I am wanting the “Request a Quote” Button to use the elfsight floating pane form!

Thanks so much 🙂

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 2, 2026, 4:23pm UTC](https://community.elfsight.com/t/floating-pane-button/147073/5 "2026-03-02T16:23:22Z")

</div>

I see that you’ve applied the attribute `data-elfsight-show-form="WIDGET_ID"` to both buttons (Request a Quote and View All Finishes), because they have the same ID:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/7/d/7d8249b182874058779239aca61a282e6678f0fb.jpeg)

Could you please create a unique class/ID for the Request a Quote button and apply the `data-elfsight-show-form=“WIDGET\_ID” to this button only?

If you’re still facing difficulties, we’ll need temporary access to your website’s backend. This article explains how you can share it 😉 - [Providing Access to Your Carrd Website - Elfsight Help Center](https://help.elfsight.com/article/997-how-to-provide-access-to-carrd-website)

Let me know once it’s shared and we’ll start working on your request!

---

<div class="post-metadata">

**Author:** ![Erb\_Rose](https://avatars.discourse-cdn.com/v4/letter/e/3da27b/32.png) [@Erb\_Rose](https://community.elfsight.com/u/Erb_Rose)\
**Post date:** [March 2, 2026, 5:52pm UTC](https://community.elfsight.com/t/floating-pane-button/147073/6 "2026-03-02T17:52:26Z")

</div>

I have provided you access to **[support@elfsight.com](mailto:support@elfsight.com)**

Looking forward to the end result, Max!

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 2, 2026, 6:32pm UTC](https://community.elfsight.com/t/floating-pane-button/147073/7 "2026-03-02T18:32:28Z")

</div>

Thank you!

I’ve forwarded your request to the devs and will update you once it’s completed 😉

---

<div class="post-metadata">

**Author:** ![Erb\_Rose](https://avatars.discourse-cdn.com/v4/letter/e/3da27b/32.png) [@Erb\_Rose](https://community.elfsight.com/u/Erb_Rose)\
**Post date:** [March 2, 2026, 7:06pm UTC](https://community.elfsight.com/t/floating-pane-button/147073/8 "2026-03-02T19:06:47Z")

</div>

Thank you!

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 4, 2026, 2:20pm UTC](https://community.elfsight.com/t/floating-pane-button/147073/9 "2026-03-04T14:20:47Z")

</div>

Hi there, @Erb_Rose 👋

Thank you for waiting!

We’ve implement the form triggering on the button click with this script added to the **Custom JS** section on the **Settings** tab of your widget’s settings:

```auto
const CONTAINER_SELECTOR = '#buttons15';
const TARGET_TEXT = 'Request a Quote';

const waitForElement = (selector, root = document) => {
  return new Promise((resolve) => {
    const existingElement = root.querySelector(selector);
    if (existingElement) {
      return resolve(existingElement);
    }

    const observer = new MutationObserver((_, obs) => {
      const element = root.querySelector(selector);
      if (element) {
        resolve(element);
        obs.disconnect();
      }
    });

    observer.observe(root, {
      childList: true,
      subtree: true,
    });
  });
};

waitForElement(CONTAINER_SELECTOR).then((list) => {
  const anchors = Array.from(list.querySelectorAll('a'));

  const targetAnchor = anchors.find((anchor) => {
    const label = anchor.querySelector('.label')?.textContent || '';

    return label && label.toLowerCase() === TARGET_TEXT.toLowerCase();
  });

  if (!targetAnchor) {
    return;
  }

  const innerElements = targetAnchor.querySelectorAll('*');
  
  innerElements.forEach((el) => {
    el.style.pointerEvents = 'none';
  });

  targetAnchor.setAttribute('data-elfsight-show-form', 'c6d39864-1b25-410c-87ac-9bea9fa41793');
  targetAnchor.addEventListener('click', (e) => {
    e.preventDefault();
  });
});

```

  

Please check it out and let me know how it works 😉

---

<div class="post-metadata">

**Author:** ![Erb\_Rose](https://avatars.discourse-cdn.com/v4/letter/e/3da27b/32.png) [@Erb\_Rose](https://community.elfsight.com/u/Erb_Rose)\
**Post date:** [March 17, 2026, 8:03pm UTC](https://community.elfsight.com/t/floating-pane-button/147073/10 "2026-03-17T20:03:44Z")

</div>

Amazing, always a pleasure Max!

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 18, 2026, 6:09am UTC](https://community.elfsight.com/t/floating-pane-button/147073/11 "2026-03-18T06:09:02Z")

</div>

You’re very welcome!

In the meantime, we’d like to invite you to participate in our new contest, where you can win a **3-month extension** for your subscription - [March Contest: Create a Dating Profile for Elfsight Widget and Win 3 Months FREE! 🎁](https://community.elfsight.com/t/march-contest-create-a-dating-profile-for-elfsight-widget-and-win-3-months-free/146448/)

Check the details and join in 😉