How do I add aweber code to this free template from LeadPages?

I would like to use a free template from LeadPages for a lead capture page. I was able to edit the text on the lead page no problem, but I do not know how to do two things:

  1. Make sure that when someone clicks on the submit button, that a window pops up asking for their email address.
  2. Add the Aweber code to the page so that when someone enters their email address, it will go to the appropriate email list

I’ve attached an image of the original code from the index page (had trouble pasting it in this message; the formatting got all screwy).

The template that I’m using is the third one listed on this page (picture of a girl looking at the opt-in box):

http://blog.leadpages.net/the-ultimate-list-of-free-landing-page-templates/

There are also four other folders with files in them that go with this template:

css
img
js
meta

So I guess the only folder that might have the file that I need to edit to make the above two things happen, if it’s not the index page, is the folder named “js”?

How do I make the above two things happen with this template?

TIA

Sorry. I forgot to attach the code.

Here it is:

Do you suppose you could attach the real code instead of an image of the code?
If the formatting got all screwy, past the code into a text editor first and format it as needed. Indent with 4 spaces instead of tabs. Then paste it into a message here

Preceed the code with three backtics on a line by themselves and follow the end of the code with three more backtics on a line alone.

Sure. Sorry about that.

Here you are:

    <html>
    <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all"/>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/html5shiv.js" type="text/javascript"></script>
    <script src="js/functions.js" type="text/javascript"></script>
    </head>
    <body>
    <!-- background image -->
    <img id="bgimg" src="img/bg.jpg" alt="" class="bg" data-lead-id="background-img" />
    <!-- wrapper -->
    <section id="wrapper">
    <section class="content-box type2">
        <!-- logo -->
        <a id="logo" class="lead-logo" href=""><img border="0" src="img/logo.png" alt="logo"/></a>
        <!-- box -->
        <section id="content-box" class="blackbox">
            <h3 id="primary-headline">
                "Free Report Reveals . . . The 5 (Dirt Cheap) Tools I Use To Create All My Videos (Including My $80 HD Video Camera)"
            </h3>
            <p id="primary-subheadline">Enter your email address to get this free report</p>
            <a id="optin-button" href="#/optin">Download The Report</a>
            <p id="subtext"><strong>Privacy Policy:</strong> We hate SPAM and promise to keep <br /> your email address safe.</p>
        </section>
        <!-- footer -->
        <footer id="footer" class="footer">
        <p>Copyright 2013 &copy; LeadBrite.com / All Rights Reserved</p>
        </footer>
    </section>
    </section>
    </body>
    </html>

I’m out of my element here.

I see an HTML page but no form and no submit button and I don’t know what aweber code is. Someone else will have to pick this up, please.

I believe I found where the form code would go.

There is one other file that came with the template that is an html file called “form.html.”

It was mostly css, which is why I didn’t consider it before.

Here is the code for that file:

     <meta name="lp-popup-form-css" content="
background-color: #0f2c44;
            border-color: #0f2c44;
            border-width: 1pt;
            border-style: solid;
        " />
    <meta name="lp-popup-form-title-css" content="
        font-family: &amp;quot;Open Sans &amp;quot;, Helvetica, Arial, sans-serif;
        font-size: 18pt;
        font-weight: 600;
        letter-spacing: 0.05em;
        line-height: 24px;
        color:#ffffff;
        text-align:center;
    " />
    <meta name="lp-popup-form-title-html" content="
        &amp;lt;div class=&amp;quot;form-header&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;Enter your email address below to reserve your report...it's 100% FREE!
        &amp;lt;/div&amp;gt;
    " />
    <meta name="lp-popup-form-submit-css" content="
        background-color: #ffc600;
        border-color: #ffc600;
        border-width: 1pt;
        border-style: solid;
        font-family: &amp;quot;Open Sans Condensed&amp;quot;, Helvetica, Arial, sans-serif;
        font-size: 22pt;
        letter-spacing: 0em;
        line-height: 24px;
        font-weight: 700; 
        color: #FDFDFD; 
        cursor:pointer; 
        text-decoration:none; 
        text-align:center;
    " />
    <meta name="lp-popup-form-submit-html" content="
        &amp;lt;div style=&amp;quot;text-align: center&amp;quot;&amp;gt;Download the Report
            &amp;nbsp;&amp;nbsp; &amp;raquo;&amp;lt;/div&amp;gt;
    " />
    <meta name="lp-popup-form-privacy-css" content="
        font-family: &amp;quot;Open Sans&amp;quot;, Helvetica, Arial, sans-serif;
        font-size: 12pt;
        font-weight: 400;
        letter-spacing: 0.05em;
        line-height: 15pt;
        margin: 0 auto;
        margin-top: 15px;
        max-width: 355px;
        color:#a4d9ff;
    " />
    <meta name="lp-popup-form-privacy-html" content="
        &amp;lt;div style=&amp;quot;text-align: center&amp;quot;&amp;gt;
            Privacy Policy: We hate SPAM and promise to keep your email address safe.
        &amp;lt;/div&amp;gt;
    " />

With regard to aweber code, aweber is an autoresponder. And when I say “aweber code”, I’m referring to the code for the opt-in box.

I’m not sure which opt-in box to choose in my aweber account to use for this lead page. Any one know?

Just for example purposes, I got the code for the barest opt-in form. No design. Just a field where someone can enter their email address and a submit button (could not delete the submit button).

Here is that code:

    <form method="post" class="af-form-wrapper" accept-charset="iso-8859-1" action="https://www.aweber.com/scripts/addlead.pl"  >
    <div style="display: none;">
    <input type="hidden" name="meta_web_form_id" value="XXXXXXXXX" />
    <input type="hidden" name="meta_split_id" value="" />
    <input type="hidden" name="listname" value="mylist" />
    <input type="hidden" name="redirect" value="https://www.aweber.com/thankyou-coi.htm?m=video" id="redirect_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" />
    
    <input type="hidden" name="meta_adtracking" value="My_Form" />
    <input type="hidden" name="meta_message" value="1" />
    <input type="hidden" name="meta_required" value="email" />
    
    <input type="hidden" name="meta_tooltip" value="" />
    </div>
    <div id="af-form-XXXXXXXXX" class="af-form"><div id="af-body-XXXXXXXXX"  class="af-body af-standards">
    <div class="af-element">
    <label class="previewLabel" for="awf_field-XXXXXXXX">Email: </label>
    <div class="af-textWrap"><input class="text" id="awf_field-XXXXXXXX" type="text" name="email" value="" tabindex="500" onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " />
    </div><div class="af-clear"></div>
    </div>
    <div class="af-element buttonContainer">
    <input name="submit" id="af-submit-image-XXXXXXXXX" type="image" class="image" style="background: none; max-width: 100%;" alt="Submit Form" src="http://aweber.com/images/forms/plain/buttons/grey.png" tabindex="501" />
    <div class="af-clear"></div>
    </div>
    </div>
    </div>
    <div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=nExsnEwcnBxs" alt="" /></div>
    </form>

However, I found a post on another forum where a girl had the same issue that I have, and she posted this has her form code (it’s much shorter than mine, as you can see):

    <form method="post" action="http://www.aweber.com/scripts/addlead.pl">
<div class="row">
<input type="text" name="email" value="Enter Valid Email Here..." class="field" />
<input type="hidden" name="listname" value="awlist0000000" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou.htm?m=default" id="redirect_fxxxxxxxxxxx" />
<input type="hidden" name="meta_adtracking" value="custom form" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_forward_vars" value="1" />
</div>
</form>
<input type="submit" name="" value="" class="submit" />
</div> 

That coding was giving her problems.

Here is the code that someone posted that fixed her issue:

<form method="post" action="http://www.aweber.com/scripts/addlead.pl" id="yourform">
                <div class="row">
                    <input type="text" name="email" value="Enter Valid Email Here..." class="field" />
                    <input type="hidden" name="listname" value="awlist0000000" />
                    <input type="hidden" name="redirect" value="http://www.aweber.com/thankyou.htm?m=default" id="redirect_fxxxxxxxxxxx" />
                    <input type="hidden" name="meta_adtracking" value="custom form" />
                    <input type="hidden" name="meta_message" value="1" />  
                    <input type="hidden" name="meta_forward_vars" value="1" />             
                </div>            
            </form>
            <button class="submit" onclick="document.getElementById('yourform').submit();"></button>

So my question is, what is the code that I should use? Should I just use the fix for her coding and input my values (which is much shorter than the coding I got from Aweber)? And where should I place my code in the form.html file?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.