Making a sticky floating form button

This script requires a long page section with a form in it, preferably a single column element.

It will move the form to a sticky floating form button like the orange one on the right side of the screen, and hide the long page section from the layout.

Take a note of the long page section ID, and do the following:

1. Add the file pagescripts/long_page_functions/floatrightform.js to headerscripts

2. Add this code to headerscripts:

window.floatRightFormContainerID = "#long page section ID here";

window.floatRightFormContainerLabel = "CTA text here";

 

Variations:

floatrightform_not_on_first_section.js: Only displays CTA when scrolled past the first section of the page.

floatrightform_not_on_first_section_blue.js: Only displays CTA when scrolled past the first section of the page, and uses blue colour instead of orange.

There are also variants where the float right form isn't displayed at all on mobile sizes; those are the same files as above, but suffixed with _hideonmobile.
Example: floatrightform_hideonmobile.js

Heading here

Intro text here

Section 2

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

-

Section 3

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

-