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://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-23d87db7-f8a7-4a1b-b6ec-bde39b3b5b80"></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 😊