If you're looking to create a sticky footer without relying on plugins, it's definitely achievable with just CSS. Check out this example where I implemented a "sticky footer and header" using only CSS: here. You can easily add more content below the form and ensure that the page stretches all the way to the footer while keeping the content above it - see it in action here.
/**sticky-footer layout**/
body {
min-height: 500px;
}
.header,
#main,
.footer {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.header {
height:120px !important;
overflow:hidden;
background:#ffffff !important;
position:relative;
z-index: 10;
padding:0 !important;
opacity:0.9;
}
.footer {
height:100px !important;
background:#ffffff !important;
overflow:hidden;
opacity:0.9;
padding:0 !important;
}
#main {
min-height:100%;
margin:-120px 0 -100px;
height:auto !important;
}
#main:after,
#main:before {
content:"";
display:block !important;
margin:0;
}
#main:before {
height:120px;
}
#main:after {
height:100px;
}
However, you may notice that the background container .bg-photo#main is positioned underneath the header and footer, which can cause some overlapping with the background image. To fix this, you can move the background to an inner div within the main section. I've demonstrated this scenario here: eventuality. Keep in mind that using vh units, like in the example below, may not work in all browsers:
min-height: calc( 100vh - 220px);
Be cautious with this approach and consider using calc to account for the header and footer heights to ensure it works consistently across different browsers.