“mobile”/ Voluum
Welcome to Our Community
Wanting to join the rest of our members? Feel free to sign up today.

Multistep Landing Page

Discussion in 'Guides, Case Studies and Tutorials' started by K, Sep 18, 2015.

  1. K

    K Administrator Administrator affiliate

    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.
     
    jackinnes, razrus5, azgold and 4 others like this.
  2. CPA Evolution
  3. K.Hoogje

    K.Hoogje Affiliate affiliate

    49
    20
    8
    Great lander K!! Thanks!
     
    K likes this.
  4. crysper

    crysper Affiliate affiliate

    617
    339
    63
    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: Sep 18, 2015
  5. Certified
    T J Tutor

    T J Tutor Administrator Administrator Certified Vendor Dojo Master

    10,694
    4,960
    113
    Always great landers from you guys!
     
    Last edited: Sep 21, 2015
    loukait likes this.
  6. loukait

    loukait Affiliate affiliate

    12
    1
    3
    thanks oliver very intersted LP
     
    K likes this.
  7. matelo

    matelo New Member affiliate

    21
    6
    3
    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.
     
  8. crysper

    crysper Affiliate affiliate

    617
    339
    63
    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.
     
  9. Coupled

    Coupled Affiliate affiliate

    10
    2
    1
    Just what the DR ordered thank you
     
  10. azgold

    azgold Super Moderator Super Mod moderator affiliate

    10,847
    6,376
    113
    Love it! Already have an idea how I might use it. :)
     
  11. Yussef

    Yussef Member affiliate

    30
    13
    8
    Niiiiiiccceee.
     
  12. Tim King

    Tim King Affiliate affiliate

    129
    64
    28
    Cool, gonna give this a go for some split-testing this week, cheers!
     
  13. internalsoul

    internalsoul Moderator moderator affiliate

    3,872
    2,481
    113
    Very nice and clean lander. really liked it a lot, may put it into use soon.
     
  14. khaled909

    khaled909 Affiliate affiliate

    9
    3
    3
  15. Tim King

    Tim King Affiliate affiliate

    129
    64
    28
    I've used Fiverr before, and Elance is good also.
     
banners