Multistep Landing Page
This is a free exclusive landing page for The Dojo members only. We have had these especially made and everything is customisable in the source.
Multistep Landing Page.
This is a multistep landing page you can easily customise and use for any campaign or niche and much more.
Live Preview
View the live preview by clicking here.
Download
Download the landing page by clicking here
How to Install
Changing the niche on the page is easy.
Step 1.
Download the zip file and unzip onto your desktop.
Step 2.
Open index.html on your text editor.
Step 3.
Search and change the variables below to fit your offer campaign.
HTML:
<title></title>
HTML:
<div class="header_text"> Lorem ipsum dolor sit amet, consectetur. </div>
HTML:
<h2>Lorem ipsum dolor sit amet, consectetur.</h2>
HTML:
<p>Disclaimer: Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur.</p>
HTML:
<div class="form">
<div class="form-steps" data-slide="1">
<h3>1. Are you male of female?</h3>
<div class="button-gender clearfix">
<div class="button-left ">
<input data-next-slide="2" type="button" name="gender" value="Male" class="gender_botton_field1 go_to_forward go_next">
</div>
<div class="button-right">
<input data-next-slide="2" type="button" name="gender" value="Female" class="gender_botton_field2 go_to_forward go_next">
</div>
</div>
</div>
</div>
<div class="button-section clearfix">
<div class="button-left">
<input type="button" name="go_back" data-previous-slide="1" value="Previous" class="botton_field go_back go_next">
</div>
<div class="button-right">
<input type="button" name="go_next" data-next-slide="2" value="Next" class="botton_field2 button-inactive go_next">
</div>
</div>
</div>
<div class="step hide" data-slide="2">
<div class="right-head">
<div class="question-head"> Question 2 of 3 <span class="span_class">Results</span> </div>
<div class="progress-bar"><img src="imges/step-2.png" alt="step-2.png"></div>
</div>
<div class="form">
<div class="form-steps">
<h3>2. What is your age?</h3>
<div class="form_lable">
<input type="radio" data-next-slide="3" class="go_to_forward " name="age" value="">
20 or under</div>
<div class="form_lable">
<input type="radio" data-next-slide="3" class="go_to_forward " name="age" value="">
21 - 30</div>
<div class="form_lable">
<input type="radio" data-next-slide="3" class="go_to_forward " name="age" value="">
31 - 40</div>
<div class="form_lable">
<input type="radio" data-next-slide="3" class="go_to_forward " name="age" value="">
40 and over</div>
</div>
</div>
<div class="button-section clearfix">
<div class="button-left">
<input type="button" name="go_back" data-previous-slide="1" value="Previous" class="botton_field go_back">
</div>
<div class="button-right">
<input type="button" name="go_next" data-next-slide="3" value="Next" class="botton_field2 button-inactive go_next">
</div>
</div>
</div>
<div class="step hide" data-slide="3">
<div class="right-head">
<div class="question-head"> Question 3 of 3 <span class="span_class">Results</span> </div>
<div class="progress-bar">
<img src="imges/step-3.png" alt="right-banner.png">
</div>
</div>
<div class="form">
<div class="form-steps">
<h3>3. How important is it to block fat?</h3>
<div class="form_lable">
<div class="slider"></div>
</div>
</div>
</div>
<div class="button-section clearfix">
<div class="button-left">
<input type="button" name="go_back" data-previous-slide="2" value="Previous" class="botton_field go_back">
</div>
<div class="button-right">
<input type="button" name="go_next" data-next-slide="4" value="Next" class="botton_field2 button-inactive go_next">
</div>
</div>
</div>
<div class="step hide step-thankyou" data-slide="4">
<div class="right-head">
<div class="question-head"> <span class="span_class"></span> </div>
<div class="progress-bar"></div>
</div>
<div class="form">
<div class="form-steps">
<h3>Thank you!</h3>
</div>
</div> [/HTML
[HTML]
<div class="footer_text">
Copyright Website 2015. All rights reserved.
</div>Step 4.
Save and upload the folders content onto your own domain or directory. Integrate your webform.
