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 😊

Did this article answer your question? Share your feedback: Thanks for sharing your feedback. It helps us grow! There was a problem submitting your feedback. Please try again later.

Still looking for assistance? Contact Us Contact Us