# Button: How to open a floating form on Button widget click

**URL:** <https://community.elfsight.com/t/button-how-to-open-a-floating-form-on-button-widget-click/141011>\
**Category:** Pro Tips\
**Tags:** button, forms\
**Created:** [October 30, 2025, 1:08pm UTC](https://community.elfsight.com/t/button-how-to-open-a-floating-form-on-button-widget-click/141011 "2025-10-30T13:08:47Z")\
**Posts on this page:** 1\
**Page:** 1

<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:** [October 30, 2025, 1:08pm UTC](https://community.elfsight.com/t/button-how-to-open-a-floating-form-on-button-widget-click/141011/1 "2025-10-30T13:08:47Z")

</div>

Looking for a way to open your floating form when clicking on the [Button](https://elfsight.com/button-widget/) widget? We’ve got it covered!

Just add this code to the **Custom JS** field on the **Design** tab of your Button widget’s settings and you’ll be fine 😉

```auto
const listenerBlock = (selector, callback) => {
  const initialTargetNode = document.querySelector(selector);
  if (initialTargetNode) {
    return callback(initialTargetNode);
  }

  const mutationObserver = new MutationObserver((mutations, observer) => {
    mutations.forEach(({ addedNodes }) =>
      addedNodes.forEach((node) => {
        if (node.nodeType === Node.ELEMENT_NODE) {
          const targetNode = node.querySelector(selector);
          if (targetNode) {
            observer.disconnect();
            return callback(targetNode);
          }
        }
      })
    );
  });

  mutationObserver.observe(document.body, {
    childList: true,
    subtree: true
  });
};

listenerBlock(
  '[class*="ButtonBase__ButtonContainer-sc"][buttontextcoloronhover]',
  (button) => {
    button.addEventListener('click', (e) => {
      e.stopPropagation();
      e.preventDefault();

      const formButton = document.querySelector('.es-forms-floating-button');
      if (formButton) {
        formButton.click();
      }
    });
  }
);

```

  

> **Note:** Custom JS doesn’t function in the preview mode, so you can check the result right on your website or through the [Share Link](https://help.elfsight.com/article/1471-how-to-share-widget-via-link)

  

Guys, was this solution helpful? Let us know in the comments 🙂