Signing up for an email newsletter should be quick and simple. Sometimes though, you need to collect a little more information than just an email address. That’s when I use a teaser form, and with some help from JavaScript, pass the form contents to a longer form.

There’s usually one input to collect the email address, a fancybox window which opens on submit, and an email address which is passed to the next page where more fields live. On that page, the value for email address is pre-populated and this is where the actual form submit happens.

Usually the initial newsletter sign up form is in the footer or sidebar and a constant throughout the site:

<input id=”emailAddress” type=”text” />
<input class=”fancy” type=”button” value=”" />

Here’s the JavaScript used to pop the fancybox window. We’re calling a new page called newsletter.html which has a longer form consisting of email address, first name and last name.

$(“.fancy”).click(function(){
var userEmail = $(‘#emailAddress’).val();
$.fancybox({
‘type’ : ‘iframe’,
‘scrolling’ : ‘no’,
‘href’ : ‘newsletter.html?userEmail=’ + $(‘#emailAddress’).val(),
‘autoDimensions’ : false,
‘width’ : 576,
‘height’ : 432
});
return false;
});

And here’s what’s on newsletter.html. First, the JavaScript. Be sure to change the values in the show_email() function to match the values that you’re using:

var urlParams = {};
function () {
var e,
a = /\+/g,
r = /([^&=]+)=?([^&]*)/g,
d = function (s) { return decodeURIComponent(s.replace(a, ” “)); },
q = window.location.search.substring(1);

while (e = r.exec(q))
urlParams[d(e[1])] = d(e[2]);
})();

function show_email() {
var newEmail = urlParams["userEmail"];
document.getElementById(“emailAddress”).setAttribute(‘value’, newEmail);
}

function addLoadEvent(func) {
var oldonload = window.onload;
window.onload = func;
}

addLoadEvent(show_email);

And finally, the markup on newsletter.html:

<form action=”"><label>Email Address:*</label>
<input id=”emailAddress” type=”text” name=”" value=”" />
<label>First Name:*</label>
<input id=”firstName” type=”text” name=”" />
<label>Last Name:*</label>
<input id=”"lastName”” type=”text” />
<input id=”submit” type=”submit” value=”Submit” /></form>

That’s it. This works great for MailChimp forms or any other newsletter signup that you use and is a nice solution for keeping that design looking tight.