Slide-out form on click, but include defer code

I need a floating form.

Normally I would use this code. This code places a floating request assistance button in the bottom right corner of the screen. It uses the defer trick so it does not slow down the pagespeed.

<!-- Elfsight Phoenix Contact Form -->
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-bcb7eec7-XXXX-XXXX-XXXX-db500ccac8ab" data-elfsight-app-lazy></div>
<!-- Elfsight Phoenix Contact Form -->

HOWEVER I do not want the floating button. This is the code I think I will use INSTEAD to NOT have a floating button, but have the form slide out only when a button is clicked on the page:


<!-- Elfsight Phoenix Contact Form on click only -->
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<span class="sched-button">
<a data-elfsight-show-form="bcb7eec7-XXXX-XXXX-XXXX-db500ccac8ab" class="pointer sched-button">
<i class="fa fa-envelope-o" aria-hidden="true"></i> Request Assistance</a>
</span>
<!-- Elfsight Phoenix Contact Form on click only -->

Can you verify this is correct - that it will work on click but will not have the floating button?

Then, can I also add data-elfsight-app-lazy so it defer’s the JS loading? Like this?

<!-- Elfsight Phoenix Contact Form on click only -->
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<span class="sched-button">
<a data-elfsight-show-form="bcb7eec7-XXXX-XXXX-XXXX-db500ccac8ab" data-elfsight-app-lazy class="pointer sched-button">
<i class="fa fa-envelope-o" aria-hidden="true"></i> Request Assistance</a>
</span>
<!-- Elfsight Phoenix Contact Form on click only -->

Thanks!

Hi Hugh!

I’ve consulted the developers, and they suggest you trying the following code:

<!-- Elfsight Phoenix Contact Form on click only -->
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-bcb7eec7-XXXX-XXXX-XXXX-db500ccac8ab" data-elfsight-app-lazy="first-activity"></div>
<span class="sched-button">
<a data-elfsight-show-form="bcb7eec7-XXXX-XXXX-XXXX-db500ccac8ab" class="pointer sched-button">
<i class="fa fa-envelope-o" aria-hidden="true"></i> Request Assistance</a>
</span>
<!-- Elfsight Phoenix Contact Form on click only -->

Could you please check and let me know if it worked?

Thank you! We’ll try it. Assuming the button works for sliding out the form on click, but does not show a floating button, how can I test to see if the lazy loading is working?

Hi @Hugh,

I see you’re doing a great job, some advanced stuff here. Awesome! I appreciate it.
I believe, the best way to test the lazy-loading feature is to measure performance before and after you enable it. If you see a considerable change in performance metrics after, then it works.
Hope it helps :metal:

OK, the code suggested above does not work. Maybe we can simplify it and remove lazy load for now.

This code works. It has the floating button in the bottom right corner of the page that you can click to float open the form. It also has a non-floating button in the masthead that you can also click to float open the form.

<!-- Elfsight Phoenix Contact Form -->
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-bcb7eec7-XXXX-XXXX-XXXX-db500ccac8ab"></div>
<!-- Elfsight Phoenix Contact Form -->	  
	  
<!-- Elfsight Phoenix Contact Form on click only -->
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<span class="sched-button">
<a data-elfsight-show-form="bcb7eec7-XXXX-XXXX-XXXX-db500ccac8ab" class="pointer sched-button">
<i class="fa fa-envelope-o" aria-hidden="true"></i> Request Assistance</a>
</span>
<!-- Elfsight Phoenix Contact Form on click only -->

However, what I would like to do, is have the same floating form, and the same button on the masthead, but NO floating button on the bottom right corner of the page. The only way to open the form is to click the button.

If I comment out the first part and only leave the second, the form never shows on click:

<!-- Elfsight Phoenix Contact Form 
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-bcb7eec7-XXXX-XXXX-XXXX-db500ccac8ab"></div>
<!-- Elfsight Phoenix Contact Form -->	  
	  
<!-- Elfsight Phoenix Contact Form on click only -->
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<span class="sched-button">
<a data-elfsight-show-form="bcb7eec7-XXXX-XXXX-XXXX-db500ccac8ab" class="pointer sched-button">
<i class="fa fa-envelope-o" aria-hidden="true"></i> Request Assistance</a>
</span>
<!-- Elfsight Phoenix Contact Form on click only -->

Can you give me suggested working code that will allow me to have a clickable button but not the floating button?

ALSO, if I need to have more than one button on the page open the form, I assume I would skip the
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
on the other buttons?

I really appreciate it. :pray:t2::pray:t2:

@Hugh my apologies for such a long wait!

I’ve got a reply from the dev team regarding your questions, and here’s the solution:

  1. This is the code for the form with no floating button:
<!-- Elfsight Phoenix Contact Form on click only -->
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-bcb7eec7-XXXX-XXXX-XXXX-db500ccac8ab" data-elfsight-app-lazy="first-activity"></div>
<span class="sched-button">
<a data-elfsight-show-form="bcb7eec7-XXXX-XXXX-XXXX-db500ccac8ab" class="pointer sched-button">
<i class="fa fa-envelope-o" aria-hidden="true"></i> Request Assistance</a>
</span>
<!-- Elfsight Phoenix Contact Form on click only -->

Also, please add the following CSS code to your widget Custom CSS field:

.global-styles, [class*="FloatingButton__FloatingButtonContainer"] {
  display: none!important;
}
  1. As for your second question regarding the scenario with multiple buttons, this code should work:
<span class="sched-button">
<a data-elfsight-show-form="bcb7eec7-XXXX-XXXX-XXXX-db500ccac8ab" class="pointer sched-button">
<i class="fa fa-envelope-o" aria-hidden="true"></i> Request Assistance</a>
</span>

Please let me know if it helped or if you have other questions :slight_smile:

1 Like

This seems to be working perfectly. Thank you so much!

1 Like

Awesome, we’re happy that it worked! :slight_smile:

1 Like