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:

Name:
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:

Name:
Email:
Street:
City:
State:
Zip:
Re-Activate the 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:

Name:
Email:
Phone:
Skype:
IM:
Street:
City:
State:
Zip:
Re-Activate the sample

 

by Michel Komarov, © Copyright 2008. iCoder.com

 

Share in social bookmarking:These icons link to social bookmarking sites where readers can share and discover new web pages.  digg del.icio.us BlinkList Reddit NewsVine YahooMyWeb co.mments

Related Articles:

One Response to “How to Make a 2-Steps Opt-In form”

  1. joaopimentel1980 Says:

    I just registered and logged in to say thank you :)

    very nice tutorial!!!

Got a question?   Leave a Reply

You must be logged in to post a comment.