The Most Active and Friendliest
Affiliate Marketing Community Online!

“AdsEmpire”/  Direct Affiliate

Multistep Landing Page

K

Administrator
Administrator
Internet Marketing Deals
High Converting Landing Pages | ConversionWise
multistep.png

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.
 
Great lander mate, from experience, this type of landers works amazingly for dating. A few suggestions:

1. Make the Previous button as disabled not the Next button, maybe it's a simple mistake the designer made
2. The checkboxes label on the second(age) step could be clickable, not just the checkbox circles...it improves the user experience
 
Last edited:
Hi, I just downloaded the landing page..but if I click on the buttons it doesn't work!

Live preview works instead.

thank you in advance.
 
Hi, I just downloaded the landing page..but if I click on the buttons it doesn't work!

Live preview works instead.

thank you in advance.

The lander works fine, but you need to upload it on your server to test it. It doesn't work locally since it can't find the JS files.
 
banners
Back