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 -->
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?
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
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 have just added the transition property which makes the animation to work as wanted. .search { opacity: 0; -webkit-transition: all .5s ease; - … If the close icon is clicked, then remove spacebar clicker the active class and hide the form. And there you have it, with the above code you will have a fully functional slide …You want to have a ball that is created from an HTML element (id=ball) move down and to the right of its original location when clicked, and move back to its …
