Form Builder Widget from a Custom Button

Want a form widget that doesn’t take up much space? With our Form Builder, you can create a floating form that opens from a custom button.

Follow these simple steps to set it up:

1

In your widget settings, go to the Layout tab and select Floating Pane form type:

2

In your website backend, create the element or button that will open the form and add this attribute to the element:

data-elfsight-show-form="WIDGET_ID"

Within the attribute, replace WIDGET_ID with the actual ID of your widget — see Where to get your widget ID. Example:

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

3

Add your widget installation code to your website backend. For installation instructions, refer to Installation Tutorials by Platform (CMS).

4

Return to the widget settings, go to the Appearance tab, and open Custom CSS:

5

Add the following CSS to hide the floating form button, and publish the changes:

.es-forms-floating-button {
  display: none;
}
	

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