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

divinewind · 10-24-2009, 06:46 PM

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

khtm · 10-26-2009, 10:26 PM

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?

divinewind · 10-27-2009, 04:01 AM

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.

divinewind · 10-30-2009, 07:00 PM

And yeah, did mean the vPage function...

I uploaded the entire file... that way you're not missing anything for sure.

10-24-2009, 06:46 PM	#1
divinewind Marketing Software Dev. War Room Member Join Date: Oct 2009 Location: nunya Posts: 26 Thanks: 0 Thanked 0 Times in 0 Posts Social Networking Contact Info	Making custom langing pages with ajax signup popups (script included) 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;"> </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
	Friend Adding & Mass Messaging software for ANY Social Network. Full scheduling and automation, customizable and scriptable actions, over 40 social networks pre-supported. Perfect for CPA Marketers and web masters! Warriors, get the WSO! www.webdombot.com Last edited by divinewind; 10-24-2009 at 06:47 PM. Reason: comment

10-26-2009, 10:26 PM	#2
khtm HyperActive Warrior War Room Member Join Date: Apr 2009 Location: San Diego Posts: 124 Thanks: 21 Thanked 6 Times in 5 Posts Social Networking	Re: Making custom langing pages with ajax signup popups (script included) 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;"> </div> <a href="#a" onclick="signup();">click here</a> </body> </html> Any ideas?
	- Kane Warrior Special Offer - Get Hundreds of High-PR Backlinks with Very Little Effort!

10-27-2009, 04:01 AM	#3
divinewind Marketing Software Dev. War Room Member Join Date: Oct 2009 Location: nunya Posts: 26 Thanks: 0 Thanked 0 Times in 0 Posts Social Networking Contact Info	Re: Making custom langing pages with ajax signup popups (script included) 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.
	Friend Adding & Mass Messaging software for ANY Social Network. Full scheduling and automation, customizable and scriptable actions, over 40 social networks pre-supported. Perfect for CPA Marketers and web masters! Warriors, get the WSO! www.webdombot.com