Fixing a Form on a Page

[PSM]

I've seen a couple answers to similar questions but the solution doesn't make a lot of sense to me. (ie. where exactly to put what code) 

Here is a link to a typical page in question. The form is a Hubspot form module. I would like it to stay put when scrolling the text.

https://www.psmbrokerage.com/product-portfolio/medicare-supplement/united-of-omaha-1?hs_preview=CofZ...

Thank you for your help..

Shannon

[Jsum]

@PSM,

First off, I would not target the form, I would target a wrapper around the form. You can group the form module in your template to create a wrapper, give it a custom class, something like "Fixed_Form_Wrap".

Now what you are wanting to do is actually kind of tricky. You need to know a little about css positioning.

Fixed positioning will cause an element, and any elements it contains, to stay fixed at a certain point relative to your browser. Relative positioning will position an element relative to it's starting point. Relative positioned parent elements also act as an anchor for absolute positioned child elements.

Absolute positioned elements are positioned relative to relatively positioned parent. If no relatively positioned parent exists then I beleive it will position relative to the body or html of the page. 

Static positioned elements are positioned statically by default, i.e. all elements are set to static position unless otherwise defined.

absolute and fixed positions pull the element out of the normal document flow.

I built this page: http://www.americanselfstorageok.com/find-a-location

notice that the map is statically positioned until it reaches the top of the page, then it is fixed position until the pages footer passes the bottom of the browser, then the map becomes absolutely positioned.

This requires jquery, an understanding of windows scroll position, and an understanding of element scroll positions in order to create the logic to make this work.

Here is my Jquery & CSS for this page:

Jquery -

$(window).on("load resize scroll", function(e) {
	var scroll = $(window).scrollTop();
	var winHeight = $(window).height();
	var search = $('.search_box').offset().top;
	var header = $('.main_header').height();
	var offset = search - header;

	var container = $('.map_container').width();
	var containerRt = $('.map_container').offset().right;
	var map = $('.search_map');

	var footer = $('footer').offset().top;
	var mapbottom = $('.search_map').offset().bottom;

	if (scroll >= offset) {
		$('.search_map').removeClass('stick_bottom');
		if ((scroll + winHeight) > footer) {
			$('.search_map').removeClass('stick');
			$('.search_map').addClass('stick_bottom');
		} else {
			$('.search_map').removeClass('stick_bottom');
			$('.search_map').addClass('stick');
			map.width(container);
			map.css('right', containerRt);
		}
	} else {
		$('.search_map').removeClass('stick_bottom');
		$('.search_map').removeClass('stick');
	}
});

css -

.search_map {
    width: 100%;
    height: 92vh;
}

.map_container {
    position: relative;
}

.search_map.stick {
    position: fixed !important;
    top: 60px;
}

.search_map.stick_bottom {
    position: absolute !important;
    bottom: 0;
}

[nerea]

You can add this css class to your form like this

form{

position:fixed;

background-color:white;

padding:20px;

}

and this code to desactivate the fixed position on mobile

@media (max-width:768px) {

form{

position:relative;

}

}

This css code should be added to the css file of your template.