I have to add a form to my website that is shown on the right side of the page. This form must be hidden, and must be opened when the button is clicked. I've been looking over the internet, but I have not found any examples that serve me 100%.
I have developed the following code, but it does not open correctly if I display the form when I scroll on the page, instead of opening in the specific place I am in, it opens at the beginning of the page:
#slider{
width:500px;
top:100px;
position:absolute;
background-color: #ffffff;
}
#header{
width:342px;
height:auto;
position:absolute;
right:0px;
border:1px solid #d8d8d8;
margin-left:40px;
padding:20px 40px;
border-radius:3px;
box-shadow: 0 0 8px gray;
background-color: #ffffff;
}
#sidebar{
position:fixed;
top:180px;
right: 0;
box-shadow: 0 0 8px gray;
}
#sidebar1{
position:absolute;
top:180px;
left:113px;
box-shadow: 0 0 8px gray;
}
div#title{
position:absolute;
top:300px;
left:650px;
}
body{
overflow-x:hidden;
}<div id="slider" style="right:-342px;">
<div id="sidebar" onclick="open_panel()">
<img src="img/contact.png"/>
</div>
<div id="header">
<h2>Contacto</h2>
<form name="#" method="#" action="#">
<div class="input-field col s12">
<input id="last_name" type="text" class="validate">
<label for="last_name">Nombre</label>
</div>
<div class="input-field col s12">
<input id="last_name" type="text" class="validate">
<label for="last_name">Teléfono</label>
</div>
<div class="input-field col s12">
<input id="last_name" type="text" class="validate">
<label for="last_name">Email</label>
</div>
<div class="input-field col s12">
<input id="last_name" type="text" class="validate">
<label for="last_name">Población</label>
</div>
<div class="input-field col s12">
<textarea id="textarea1" class="materialize-textarea"></textarea>
<label for="textarea1">Textarea</label>
</div>
<a class="waves-effect waves-light btn">button</a>
</form>
</div>
</div>Can someone tell me what I'm doing wrong or have the link to some resource that can help me?