Form widgets: How to open forms from a custom button

[Max]

Would like to get in touch with your website’s visitors, but the Form takes up too much space on the site? We have a perfect workaround!

With our Form widgets, you can make the floating form to appear right from a custom button on your website.

How to do this?

Choose Floating Pane layout on the Layout tab of your widget’s settings:

Create the element/button which you need the form to come up from and add the following attribute to it: data-elfsight-show-form="*WIDGET_ID*" where you need to replace WIDGET_ID with the actual ID of your widget.

Add your widget’s installation code to the Custom HTML section of your website.

Add the following supplement right after the installation code in order to hide the floating Form button:

<style>
[class*="FloatingButton__FloatingButtonContainer"] {
   display: none;
}
</style>

This is what it should like after that:

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-d04b9aa5-efc5-4b96-a4ce-92039bc995a8" data-elfsight-app-lazy></div>
<style>
[class*="FloatingButton__FloatingButtonContainer"] {
   display: none;
}
</style>

Save the changes.

Guys, feel free to ask any questions about this article! Let’s dive deeper together - we’re here and eager to help

[user6000]

Hi, How can we install it like a floating pane without the button? Do we have option to float it in the center?

[Max]

Hi there @user6000 and welcome aboard

I am afraid there is no option to make the widget floating in the center of the page without having a button. I am really sorry!

I guess our Popup app might be the right option in this case. You can add a form block there and display the widget in the center of the page without a button:

Form blocks in Popup has fewer options comparing with our Forms apps. However, perhaps it still might suit your case, so feel free to check it out