Hello,
The Code you are planning to use to display the Overlay Form is completely supported for any Template and you can simply copy the entire Form overlay Code to any Full Screen section:
<div class="row nomargin" style="position: relative; z-index: 2;">
<div class="offset-lg-7 col-lg-5 full-screen" style="background-color: rgba(0,0,0,0.45);">
<div class="vertical-middle col-padding">
<div class="heading-block nobottomborder bottommargin-sm">
<h1 style="font-size: 22px;">Start your Free Trial</h1>
<span style="font-size: 16px;" class="t300 capitalize ls1 notopmargin">Get Started within 5 Minutes.</span>
</div>
<form action="#" class="clearfix" style="max-width: 300px;">
<div class="col_full">
<label for="" class="capitalize t600">Username or Email</label>
<input type="email" id="template-op-form-email" name="template-op-form-email" value="" class="form-control not-dark" />
</div>
<div class="col_full">
<label for="" class="capitalize t600">Choose Password</label>
<input type="password" id="template-op-form-password" name="template-op-form-password" value="" class="form-control not-dark" />
</div>
<div class="col_full nobottommargin">
<button type="submit" class="t400 capitalize button button-border button-light button-circle nomargin" value="submit">Register Now</button>
</div>
</form>
<p class="nobottommargin"><small class="t300"><em>* No Credit Card Required</em></small></p>
</div>
<a href="#" data-scrollto="#section-about" data-easing="easeInOutExpo" data-speed="1250" data-offset="65" class="one-page-arrow dark"><i class="icon-angle-down infinite animated fadeInDown"></i></a>
</div>
</div>
This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.