Form Builder widget from a custom button

Do you want a contact form that won't take up too much space? Use our Form Builder widget to create a floating form that appears from a custom button.

Follow these easy steps to set it up:

1

Go to the Layout tab of your widget's settings and select the Floating Pane form type:

2

Create the element or button from which the form will appear and add this attribute to that element:

data-elfsight-show-form="WIDGET_ID"

Within the attribute, replace WIDGET_ID with the actual ID of your widget - Where to get your widget ID. Check out the example:

data-elfsight-show-form="23d87db7-f8a7-4a1b-b6ec-bde39b3b5b80"

3

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

4

Insert the following CSS code right after the widget installation code. This code will hide the floating Form button:

<style>
.es-forms-floating-button {
  display: none;
}
</style>

Here is an example of the final code:

<script src="https://static.elfsight.com/platform/platform.js" async></script>
<div class="elfsight-app-23d87db7-f8a7-4a1b-b6ec-bde39b3b5b80" data-elfsight-app-lazy></div>
<style>
.es-forms-floating-button {
  display: none;
}
</style>	

5

Save the changes.

That’s it! Your floating form from a custom button is ready 😊