How to Make a 2-Steps Opt-In form
If you like the KISS principle you may want to have short opt-in forms on your pages. But what if you need to capture more details then just name and email?… How to not scare prospects with a big form like this:
Email:
Street:
City:
State:
Zip:
2-Steps Form
You can split the form into 2 parts with a simple javascript to have the name and email fields only on the opt-in page. The script allows them to fill in their details at the first step and shows the rest fields before the form submitted.
Like on this sample:
Lets suppose you have a form code like below:
<form action="http://www.aweber.com/scripts/addlead.pl">
Name: <input name="name">
Email: <input name="from">
Street: <input name="street">
City: <input name="city">
State: <input name="state">
Zip: <input name="zip">
<input type="submit" value="Subscribe">
</form>1) Split the form into 2 parts by <div> tags with numbered names in ID-attributes and insert additional button:
<form action="http://www.aweber.com/scripts/addlead.pl">
<div id="form_part1">
Name: <input name="name">
Email: <input name="from">
<button>Next »</button>
</div>
<div id="form_part2">
Street: <input name="street">
City: <input name="city">
State: <input name="state">
Zip: <input name="zip">
<input type="submit" value="Subscribe">
</div>
</form>2) Add the script to hide the second part of the form on the page loading and toggle the parts on the “Next” button clicked:
<form action="http://www.aweber.com/scripts/addlead.pl">
<div id="form_part1">
Name: <input name="name">
Email: <input name="from">
<button
onclick="openForm_part('form_part', 2)"
>Next »</button>
</div>
<div id="form_part2">
Street: <input name="street">
City: <input name="city">
State: <input name="state">
Zip: <input name="zip">
<input type="submit" value="Subscribe">
</div>
<script type="text/javascript">
<!--//
function openForm_part(part_name, part_number) {
for (var p = null, i = 1;
p = document.getElementById(part_name+i); ++i) {
if (i == part_number) p.style.display = "";
else p.style.display = "none";
}
}
window.onload = function() {
openForm_part("form_part", 1);
}
//-->
</script>
</form>Multi-Steps Forms
This script allows you to create as many steps as you’d like.
You just add another div section with addition button:
<form action="http://www.aweber.com/scripts/addlead.pl">
<div id="form_part1">
Name: <input name="name">
Email: <input name="from">
<button
onclick="openForm_part('form_part', 2)"
>Next »</button>
</div>
<div id="form_part2">
Phone: <input name="phone">
Skype: <input name="skype">
IM: <input name="im">
<button
onclick="openForm_part('form_part', 3)"
>Next »</button>
</div>
<div id="form_part3">
Street: <input name="street">
City: <input name="city">
State: <input name="state">
Zip: <input name="zip">
<input type="submit" value="Subscribe">
</div>
<script type="text/javascript">
<!--//
function openForm_part(part_name, part_number) {
for (var p = null, i = 1;
p = document.getElementById(part_name+i); ++i) {
if (i == part_number) p.style.display = "";
else p.style.display = "none";
}
}
window.onload = function() {
openForm_part("form_part", 1);
}
//-->
</script>
</form>This makes the form a 3-steps form like below:
by Michel Komarov, © Copyright 2008. iCoder.com
Related Articles:
