What I have done is created a div at the bottom of my page that is transparent which is the same size as a fixed div at the bottom of the page. When the user scrolls down the fixed div is revealed under the rest of the website content. The transparent div is in front of the fixed div so the user is unable to click on the input boxes etc. on the fixed div.
Putting pointer-events: none;
on the transparent div should allow the user to click through it but unfortunately this has not solved my issue. I tried making the transparent and fixed divs display: block
or display: inline-block
and neither of these fixed my issue.
//empty transparent div
.section.empty-section {
height: 459px;
pointer-events: none;
display: inline-block;
}
//contact form under the transparent div
.section.footer {
background: #131313;
position: fixed;
bottom: 0;
z-index: -1;
}
.section {
position: relative;
padding: 10 10 10 10;
left: 0;
width: calc(100% - 20px);
color: white;
font-family: "Gadugi";
overflow: hidden;
background-size: contain;
background-repeat: no-repeat;
background-blend-mode: soft-light;
}
<div class="section empty-section"></div>
<div class="section footer">
<span class="heading">Contact</span>
<form action="contact.php" method="POST">
<label>Your email address</label>
<br>
<input type="email" name="from-email-address">
<br>
<br>
<label>Your name</label>
<br>
<input type="text" name="from-name">
<br>
<br>
<label>Your message</label>
<br>
<textarea class="email-textbox" name="email-message"></textarea>
<br>
<button class="send-button">Send Email</button>
</form>
</div>
https://gyazo.com/83c3f870aa8c0775ca24cf08de71adcf This is a gif of my page, the form at the bottom isn't clickable.