Form widgets: How to open forms from a custom button

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?

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

image


:two: 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.

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

:four: 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>

:five: 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 :wink:

1 Like

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

1 Like

Hi there @user6000 and welcome aboard :wave:

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 :wink:

1 Like

Hi Max,

Thanks for your tips around the form builder.

I have my website on squarespace and I have added buttons throughout the page. I was wondering if there was a way to have the elfsight form popup light a lightbox from the buttons that have already been created on the page?

Page is here - Personal Training & Athlete Performance - 360 Strength + Conditioning Gym Mona Vale
All the buttons that says “Chat with us” I am hoping to turn into a popup form created by elfsight form builder widget.

Any help here would be appreaciated.

2 Likes

Hi there @user12822 and welcome to the Community :wave:

If you just want to open your from the custom buttons on your website, the solution from this post should work for you.

Try it out and let me know if it helped.

However, if I misunderstood you, please elaborate on what you mean :wink:

Hi max,

I tried following the instructions on this post but didn’t have much luck, I don’t believe this post is specific to squarespace.

My biggest problem was understanding how to apply the following attribute to it: data-elfsight-show-form="*WIDGET_ID*". From what I see on squarespace there is no ability to do this… Would you be able to show me how that’s done?

1 Like

Hi @user12822, thanks for the details! Maybe @tuanphan could give us a hint here sine he’s a Squarespace expert?

@Helga @user12822 You can follow this guide

3 Likes

Hi @user12822 :wave:

Yeah, please try to follow the steps provided by @tuanphan and let us know if it helped :slightly_smiling_face: