Lead Magnets are great to capture your potential client's email address and other information. 


In this example we will create a page for people to gain access to tips on how to be better professionals in their industries. 


These are the steps we'll follow:

  1. First we'll create our Success or Thank You page
    • For this we will create a new web page and a new custom widget
  2. Then we'll clone the CONTACT US form, giving it a new nickname and system name
    • You'll also update the SAVE ACTIONS to redirect the visitor to the new SUCCESS page you just created after people fill out the form with their info
  3. Lastly, we'll create a new LANDING PAGE that renders the new form we just created. 


After we follow these steps, you'll have a landing page where people can fill out a form to get the offer, and after they fill out the form, they'll be redirected to the SUCCESS page that has the valuable information you're providing them with. 


Some skills you'll need to complete this update on your sites: 


Step 1: Create SUCCESS Page:


For this step you will need to:

  1. Create a static page for your Success page using these instructions: How to Create A Static Page
  2. Create a widget with these instructions: How to Create a Custom Widget
  3. Paste the Following code into the widget you just created:
    <!-- PAGE BANNER -->
    <div class="content-container">
        <div class="alert nomargin bg-primary">
            <div class="clearfix clearfix-lg"></div>
            <div class="container">
                <div class="row">
                    <div class="pagehead nomargin">
    
                        <h1>
                       Thank You For Requesting Your Free Copy
                        </h1>
    
                      <h2 class="nomargin">We Hope You're Ready To Start Getting New Customers!</h2>
                        
    
                    </div>
                </div>
            </div>
            <div class="clearfix clearfix-lg"></div>
        </div>
    </div>
    
    <!-- PAGE BODY CONTENT -->
    <div class="content-container tpad" style="background: #f7f7f7;color:#404042;">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-push-5">
                    <div class="clearfix clearfix-lg"></div>
                    
                    <h2 class="h1 bpad">
                     What you'll learn:
                    </h2>
                    
                    <p class="h4 line-height-xl tmargin bpad inline-block">
                        <i class="fa fa-check-circle fa-3x text-success pull-left" aria-hidden="true"></i>
                       Free tools and websites that make it easy to promote your services on a tight budget.
                    </p>
                    
                    <p class="h4 line-height-xl bpad">
                        <i class="fa fa-check-circle fa-3x text-success pull-left" aria-hidden="true"></i>
                        Three live examples of facebooks pages that do a great job promoting their services.
                    </p>
                    
                    <p class="h4 line-height-xl ">
                        <i class="fa fa-check-circle fa-3x text-success pull-left" aria-hidden="true"></i>
                       Special discount offers to amazing products and services.
                    </p>
                    
                    <hr>
                    
                    <!-- LINK TO CHECKOUT PAGE -->
                    <a class="btn btn-xl btn-primary tmargin btn-block" href="https://www.costaricatesol.com/images/Ultimate_Guide_To_Teaching_in_Costa_Rica.pdf">
                        Click Here To Download
                    </a>
                    <div class="clearfix clearfix-lg"></div>
                </div>
                
                <!-- PAGE HERO IMAGE -->
                <div class="col-md-4 col-md-pull-5">
                    <img class="tmargin tpad" src="/images/limitedoffer.png">
                </div>
                
            </div>
        </div>
    </div>


  4. Edit the text inside the code to fit the purpose of your Lead Magnet and save the widget.
  5. Embed the widget into the success page you created using these instructions: How to Embed a Widget on a Static Page



Step 2: Clone Contact Us Form:


To do this please go to your admin panel under Toolbox >> Form Manager >> Search for "Website - Contact Us" >> Click to edit the form >> and Clone it.



 



For this example, we're naming our new cloned form with the following:

  • Form Nickname: Lead Magnet Form
  • Variable Name: lead_magnet_form



We recommend you name your cloned form with the same nickname and variable name.


After cloning your form and giving it a custom name and variable name you'll need to edit save actions of the form and redirect the page to the URL of the SUCCESS page you created. Make sure to enter the full URL to the SUCCESS page you created. This will tell the system to redirect the visitor to the SUCCESS page after they fill out the form. 





Step 3: Create Landing Page To Promote Your Lead Magnet And Embed The Form You Just Created:

  1. Create a static page for your new Lead Magnet Landing Page with these instructions: How to Create A Static Page
  2. Create a widget with these instructions: How to Create a Custom Widget 
  3. Paste the Following code into the widget you just created:
    <!-- PAGE BANNER -->
    <div class="content-container">
        <div class="alert nomargin bg-primary">
            <div class="clearfix clearfix-lg"></div>
            <div class="container">
                <div class="row">
                    <div class="pagehead notmargin nobmargin hmargin hpad">
    
                        <h1>
                            Tired of kicking the can down the road instead of starting to work to get new customers?
                        </h1>
    
                        <h3 class="hmargin hpad nobmargin line-height-lg">
                            We polled 500 Interior Designers and asked them what marketing strategies work best for them amd we want to share the results with you!
                        </h3>
    
                    </div>
                </div>
            </div>
            <div class="clearfix clearfix-lg"></div>
        </div>
    </div>
    
    <!-- PAGE BODY CONTENT -->
    <div class="content-container tpad" style="background: #f7f7f7;color:#404042;"> 
        <div class="clearfix clearfix-lg"></div>    
        <div class="container">     
            <div class="row">       
                <div class="col-md-6">
                    
                    <!-- START TESTIMONIAL -->
                    <div class="module">
                        
                        <!-- IMAGE -->
                        <img class="img-thumbnail img-circle col-md-12" src="/images/design-secrets.png"/>
              
              <hr>
                        
                        <!-- BODY -->
                        <h3 class="tmargin line-height-lg">
                           I always thought promoting my business was going to be a difficult task. Learning tricks and tips from industry experts gave me the confidence I needed to finally start growing my business. . 
                        </h3>
                       
                        <div class="clearfix"></div>
                    </div>
                    <!-- END TESTIMONIAL -->
    
                    <h2>
                       What You'll Learn When You Download Our Free e-book
                    </h2>
                    
                    <p class="h4 line-height-xl tmargin bpad inline-block">                 
                        <i class="fa fa-check-circle fa-3x text-success pull-left" aria-hidden="true"></i>                  
                        Free tools and websites that make it easy to promote your services on a tight budget.               
                    </p> 
                    
                    <p class="h4 line-height-xl bpad">                  
                        <i class="fa fa-check-circle fa-3x text-success pull-left" aria-hidden="true"></i>                  
                        Three live examples of facebooks pages that do a great job promoting their services.               
                    </p>  
                    
                    <p class="h4 line-height-xl bpad ">                 
                        <i class="fa fa-check-circle fa-3x text-success pull-left" aria-hidden="true"></i>                  
                        Special discount offers to amazing products and services.               
                    </p>
                    
                </div>
    
                <!-- GET MATCHED FORM -->
                <div class="col-md-6">              
                    <div class="well nomargin">
                        
                        <h2 class="tmargin bold text-center">                                       
                            I'm Ready To Download!                                   
                        </h2>
                        
                        <hr>
                        
                        <!-- DISPLAYS GET MATCHED FORM -->
                        <?=form("lead_magnet_form","",$w[website_id],$w)?>
                        
                    </div>
                    <div class="clearfix clearfix-lg"></div>
                </div>
    
            </div>
        </div>
        <div class="clearfix clearfix-lg"></div>    
    </div>


  4. Edit the text inside the code to fit the purpose of your Lead Magnet.
  5. OPTIONAL - if you gave your cloned form a different variable name than lead_magnet_form, then edit the following line of code to reflect the custom system variable name you gave the cloned form and save the widget.

  6. Embed the widget into the new landing page using these instructions: How to Embed a Widget on a Static Page