4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

Making custom langing pages with ajax signup popups (script included)

by divinewind
3 replies
Okay, so you have an idea for a custom landing page and you want to make your CPA signup form look like it's part of your whole site without the person clicking to go to another page which would ruin the sale.

That's where Ajax comes in and saves the day like Mightymouse...

Here's a quick ajax function that pulls your signup form page and slaps it on your landing page... and you can make it pop up in a floating <div> tag.

Ajax function.. put it in a file, link to it in your Head of your html... <script src="vAjax.js"></script>
Code:
var numnum = 0;
//var numxml = 0;
var requestArray = new Array();
function GetXmlHttpObject(available){
    this.xmlhttp=false;
    this.available = available;
    try {
        // Firefox, Opera 8.0+, Safari
        this.xmlhttp=new XMLHttpRequest();
    } catch (e){
        // Internet Explorer
        try{
            this.xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e){
            this.xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    //return xmlHttp;
}

function vPage(iid,urlstr){
    numxml = -1;
    for (var i=0; i<requestArray.length; i++){
        if (requestArray[i].available == 1){
            numxml = i;
            break;
        }
    }
    if (numxml == -1){
        numxml = requestArray.length;
        requestArray[numxml] = new GetXmlHttpObject(1);
    }
    //xmlHttp = xmlArray[numxml];
    var useLoad = arguments[2];
    if (requestArray[numxml].xmlhttp != false){
        requestArray[numxml].available = 0;
        requestArray[numxml].xmlhttp.open("GET",urlstr,true);
        requestArray[numxml].xmlhttp.send(null);
        requestArray[numxml].div = iid;
        requestArray[numxml].xmlhttp.onreadystatechange=function(){
            if(requestArray[numxml].xmlhttp.readyState==4){
                if (requestArray[numxml].xmlhttp.responseText != '') document.getElementById(requestArray[numxml].div).innerHTML = requestArray[numxml].xmlhttp.responseText;
                requestArray[numxml].available = 1;
            }
        }
        if (useLoad == null) document.getElementById(iid).innerHTML = '<div class="loading">Loading...</div>' + document.getElementById(requestArray[numxml].div).innerHTML;    
    }else{
        alert ("Your browser does not support AJAX"); 
        return;
    }
}
Call this function simply by saying...
Code:
vAjax('signup','hxxp://your.signup/form');
Where 'signup' is the id of your popup <div> and the url is your sign up form url.

Now, you have to make the div, and a way to pop it up... so you'll make a function that does two things: un-hides your div, and calls the signup form into it by the ajax call... or in this function's case, vAjax, lol...

Div for the signup popup... put this anywhere in the html, it will show up wherever you position it to in CSS... you can adjust the width, height, and positioning (top/left).
Code:
<div id="signup" style="position: absolute; top: 100px; left: 100px; width: 500px; height: 400px; display:none;">&nbsp;</div>
notice how display is set to none, so it's invisible to start... then you need your code to do the unhide and the ajax call in one function... (replace with actual URL) put this in the head of your html
Code:
<script type="text/javascript">
function signup(){
  document.getElementById('signup').style.display='';
  vPage('signup','hxxp://your.signup.com/form.html');
}
</script>
then all you have to do is attach this function to the "onclick" event of your link or whatever links you're using...
Code:
<a href="#a" onclick="signup();">
Done... put it all together... and you get a fancy popup that loads your signup form without refreshing the page, and will make your CPA signup much more professional, possibly increasing the conversion rate on your landing page.... the rest is up to your creativity.

Replace hxxp with http
#ajax #cpa #custom #included #langing #making #pages #popups #script #signup
  • Profile picture of the author khtm
    Thanks for this - very clever idea!

    I'm having problems getting it working though. I'm doing a very simple test case using a sample form that I Googled.
    • First, IE complained "access denied" on line 37 (the xmlhttp.open call) of vAjax.js. FireFox just said "Loading..." and nothing else. I read that this was because browsers don't allow those type of javascript cross-domain calls. So I tried calling a form file that I hosted myself in the same domain.
    • Now I'm getting an "unspecified error" from IE on line 42 of vAjax.js.
    The vAjax.js file contains the code you said to put in it.

    By the way, you mention the vAjax function call a couple times, but I think you mean vPage?

    Here's my HTML file:
    Code:
    <html>
<head>
<title>Ajax Test</title>
<script src="vAjax.js"></script>

<script type="text/javascript">
function signup(){
  document.getElementById('signup').style.display='';
  vPage('signup','http://brucelawson.co.uk/downloads/opera-uk-tour/forms_example3.html');
}
</script>

</head>

<body>

<div id="signup" style="position: absolute; top: 100px; left: 100px; width: 500px; height: 400px; display:none;">&nbsp;</div>

<a href="#a" onclick="signup();">click here</a>

</body>

</html>
    Any ideas?
    {{ DiscussionBoard.errors[1320800].message }}
    • Profile picture of the author divinewind
      I'll get back to you on that... I'll have to do some test runs of the code, make sure I didn't miss anything when I copied it over.
      {{ DiscussionBoard.errors[1321469].message }}
  • Profile picture of the author divinewind
    And yeah, did mean the vPage function...

    I uploaded the entire file... that way you're not missing anything for sure.
    {{ DiscussionBoard.errors[1335039].message }}

Trending Topics