It seems there may be a slight confusion in your query, but I have provided a solution using standard bootstrap markup.
The issue arose when you attempted to place the form markup after the carousel. If this is not the desired result, please provide more details so I can revise my answer accordingly.
If this solution does not meet your requirements, feel free to inform me so I can assist further.
$(document).ready(function() {
//console.log('Ready!')
})
.carousel-inner .item {
min-height: 80px;
}
#form_2 {
position: relative;
z-index: 1000;
display: none;
}
.form-cont {
background-color: rgba(255,255,255,.5);
border:1px solid #ccc;
height: 300px;
width: 50%;
position: absolute;
z-index: 999;
left: 25%;
top:0;
padding:10px;
}
.item img {
min-height:300px;
}
.item.slide1 {
background-color:red;
}
.item.slide2 {
background-color:lightblue;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="realtive">
<div class="form-cont">
<h4>Header</h4>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
</div>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active slide1">
<img src="https://i.sstatic.net/4hEOH.jpg" alt="...">
<div class="carousel-caption">
slide 1
</div>
</div>
<div class="item slide2">
<img src="https://i.sstatic.net/COO5g.jpg" alt="...">
<div class="carousel-caption">
slide 2
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>