Support Form Overlay

1 reply·opened Mar 12, 2018
S
SemiColonWebSTAFFMar 19, 2018

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.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard