Here is the registration template for the style im using.
{vb:stylevar htmldoctype}
<html xmlns="http://www.w3.org/1999/xhtml"<vb:if condition="$vboptions['enablefacebookconnect']"> xmlns:fb="http://www.facebook.com/2008/fbml"</vb:if> dir="{vb:stylevar textdirection}" lang="{vb:stylevar languagecode}">
<head>
{vb:raw headinclude}
{vb:cssfile register.css}
<title><vb:if condition="$show['coppa']">{vb:rawphrase coppa} </vb:if>{vb:rawphrase register_at_x, {vb:raw vboptions.bbtitle}}</title>
{vb:raw headinclude_bottom}
</head>
<body>
{vb:raw header}
{vb:raw navbar}
<div id="pagetitle">
<h1>{vb:rawphrase vbulletin_registration}</h1>
<vb:if condition="$vboptions['usecoppa']"><p class="description">{vb:rawphrase step_2_of_2}</p></vb:if>
</div>
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>
<script type="text/javascript">
function verify_passwords(password1, password2)
{
// do various checks, this will save people noticing mistakes on next page
if (password1.value == '' || password2.value == '')
{
alert('{vb:rawphrase fill_out_both_password_fields}');
return false;
}
else if (password1.value != password2.value)
{
alert('{vb:rawphrase entered_passwords_do_not_match}');
return false;
}
else
{
<vb:if condition="$show['coppa']">
pass_copy = password1.value;
passconfirm_copy = password2.value;
</vb:if>
var junk_output;
md5hash(password1, document.forms.register.password_md5, junk_output, {vb:raw show.nopasswordempty});
md5hash(password2, document.forms.register.passwordconfirm_md5, junk_output, {vb:raw show.nopasswordempty});
<vb:if condition="$show['coppa']">
document.forms.register.password.value = pass_copy;
document.forms.register.passwordconfirm.value = passconfirm_copy;
</vb:if>
return true;
}
return false;
}
</script>
<form id="registerform" action="register.php?do=addmember" name="register" method="post" onsubmit="return verify_passwords(password, passwordconfirm);" class="vbform block">
<vb:if condition="$show['errors']">
<h2 class="blockhead">{vb:rawphrase errors_occurred_during_registration}</h2>
<div class="blockbody">
<ul class="blockrow">
{vb:raw errorlist}
</ul>
</div>
</vb:if>
<h2 class="blockhead">{vb:rawphrase register_at_x, {vb:raw vboptions.bbtitle}}</h2>
<div class="blockbody formcontrols">
<vb:if condition="$show['coppa']">
<div class="blockrow">{vb:rawphrase until_receive_signed_form}</div>
</vb:if>
<vb:if condition="$vboptions['enablefacebookconnect']">
<h3 class="blocksubhead">{vb:rawphrase facebook_connect}</h3>
<div class="section">
<div id="fbregbox" class="blockrow hidden">
<vb:if condition="$show['facebookuser']">
<a href="{vb:raw fbprofileurl}">
<img src="{vb:raw fbprofilepicurl}" title="{vb:var fbname}" alt="{vb:var fbname}" />
</a>
{vb:rawphrase welcome_x_link_y, {vb:var fbname}, {vb:raw fbprofileurl}}
<a style="cursor: pointer" onclick="vBfb.register_logout();"><img src="{vb:stylevar imgdir_misc}/facebook_logout.gif" alt="{vb:rawphrase logout_of_facebook}" /></a>
<vb:else />
<a id="fb_regloginbtn" href="#"><img src="{vb:stylevar imgdir_misc}/facebook_login_long.gif" alt="{vb:rawphrase facebook_connect}" /></a>
</vb:if>
</div>
<vb:if condition="$show['facebookuser']">
<div class="blockrow">
<label for="facebookusername">{vb:rawphrase already_a_member}</label>
<div class="rightcol">
<input type="text" class="textbox" name="facebookusername" id="facebookusername" maxlength="50" tabindex="1" value="{vb:rawphrase username}" />
<input type="text" class="textbox" name="facebookpassword_hint" id="facebookpassword_hint" maxlength="50" tabindex="1" value="{vb:rawphrase password}" />
<input type="password" class="textbox" name="facebookpassword" id="facebookpassword" maxlength="50" tabindex="1" style="display: none;" />
<input type="button" class="button" name="facebookassociate" id="facebookassociate" value="{vb:rawphrase log_in}" tabindex="1" />
<p class="description">{vb:rawphrase associate_facebook_with_x_account, {vb:raw vboptions.bbtitle}}</p>
<script type="text/javascript">
YAHOO.util.Dom.setStyle('facebookpassword_hint', "display", "inline");
YAHOO.util.Dom.setStyle('facebookpassword', "display", "none");
YAHOO.util.Dom.setStyle('facebookusername', "color", "#828282");
YAHOO.util.Dom.setStyle('facebookpassword_hint', "color", "#828282");
vB_XHTML_Ready.subscribe(function()
{
//
YAHOO.util.Event.on('facebookusername', "focus", facebookusername_focus);
YAHOO.util.Event.on('facebookusername', "blur", facebookusername_blur);
YAHOO.util.Event.on('facebookpassword_hint', "focus", facebookpassword_hint);
YAHOO.util.Event.on('facebookpassword', "blur", facebookpassword);
});
function facebookusername_focus(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);
if (textbox.value == '{vb:rawphrase username}')
{
//
textbox.value='';
textbox.style.color='black';
}
}
function facebookusername_blur(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);
if (textbox.value == '')
{
//
textbox.value='{vb:rawphrase username}';
textbox.style.color='#828282';
}
}
function facebookpassword_hint(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);
YAHOO.util.Dom.setStyle('facebookpassword_hint', "display", "none");
YAHOO.util.Dom.setStyle('facebookpassword', "display", "inline");
YAHOO.util.Dom.get('facebookpassword').focus();
}
function facebookpassword(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);
if (textbox.value == '')
{
YAHOO.util.Dom.setStyle('facebookpassword_hint', "display", "inline");
YAHOO.util.Dom.setStyle('facebookpassword', "display", "none");
}
}
</script>
</div>
</div>
</vb:if>
</div>
{vb:raw fbimportform}
</vb:if>
<h3 class="blocksubhead">{vb:rawphrase required_information}</h3>
<div class="section">
<div class="blockrow">
<label for="regusername">{vb:rawphrase username}:</label>
<div class="rightcol">
<input class="primary textbox" id="regusername" type="text" name="username" maxlength="{vb:raw vboptions.maxuserlength}" value="{vb:raw username}" tabindex="1" />
<!--<img src="{vb:raw vboptions.cleargifurl}" id="reg_verif_image" alt="" />-->
<div id="reg_verif_div" class="primary" style="display:none;"></div>
<script type="text/javascript" src="clientscript/vbulletin_ajax_nameverif.js?v={vb:raw vboptions.simpleversion}"></script>
<script type="text/javascript">
<!--
regname_verif = new vB_AJAX_NameVerify('regname_verif', 'regusername');
//-->
</script>
<p class="description">{vb:rawphrase enter_your_username}</p>
</div>
</div>
<div class="blockrow">
<ul class="group">
<li>
<label for="password">{vb:rawphrase password}:</label>
<input type="password" class="textbox" name="password" id="password" maxlength="50" value="{vb:raw password}" tabindex="1" />
</li>
<li>
<label for="passwordconfirm">{vb:rawphrase confirm_password}:</label>
<input type="password" class="textbox" name="passwordconfirm" id="passwordconfirm" maxlength="50" value="{vb:raw passwordconfirm}" tabindex="1" />
</li>
</ul>
<p class="description">{vb:rawphrase enter_password_for_account}</p>
</div>
<div class="blockrow">
<ul class="group">
<li>
<label for="email">{vb:rawphrase email_address}:</label>
<input type="text" class="textbox" name="email" id="email" maxlength="50" value="{vb:raw email}" dir="ltr" tabindex="1" />
</li>
<li>
<label for="emailconfirm">{vb:rawphrase confirm_email_address}:</label>
<input type="text" class="textbox" name="emailconfirm" id="emailconfirm" maxlength="50" value="{vb:raw emailconfirm}" dir="ltr" tabindex="1" />
</li>
</ul>
<p class="description">{vb:rawphrase enter_valid_email_address}</p>
</div>
<vb:if condition="$show['coppa']">
<div class="blockrow">
<label for="parentemail">{vb:rawphrase parent_guardian_email}:</label>
<input type="text" class="primary textbox" name="parentemail" id="parentemail" maxlength="50" value="{vb:raw parentemail}" dir="ltr" tabindex="1" />
</div>
</vb:if>
{vb:raw human_verify}
</div>
<vb:if condition="$show['customfields_profile']">
<h3 class="blocksubhead">{vb:rawphrase additional_required_information_profile}</h3>
<div class="section">
{vb:raw customfields_profile}
<vb:if condition="$show['birthday']">{vb:raw birthdayfields}</vb:if>
</div>
</vb:if>
<vb:if condition="$show['customfields_option']">
<h3 class="blocksubhead">{vb:rawphrase additional_required_information_option}</h3>
<div class="section">
{vb:raw customfields_option}
</div>
</vb:if>
<h3 class="blocksubhead">{vb:rawphrase additional_information}</h3>
<div class="section">
<vb:if condition="$show['referrer']">
<div class="blockrow">
<label for="referrerfield_ctrl">{vb:rawphrase referrer}:</label>
<div class="rightcol">
<div id="referrerfield" class="popupmenu nomouseover noclick nohovermenu">
<input id="referrerfield_ctrl" type="text" class="primary textbox popupctrl" name="referrername" value="{vb:raw referrername}" tabindex="1" maxlength="{vb:raw vboptions.maxuserlength}" />
<div id="referrerfield_body" class="popupbody"></div>
</div>
<script type="text/javascript" src="clientscript/vbulletin_ajax_suggest.js?v={vb:raw vboptions.simpleversion}"></script>
<script type="text/javascript">
<!--
rnc = new vB_AJAX_NameSuggest('rnc', 'referrerfield_ctrl', 'referrerfield');
rnc.allow_multiple = false;
//-->
</script>
<p class="description">{vb:rawphrase if_referred_enter_name, {vb:raw vboptions.bbtitle}}</p>
</div>
</div>
</vb:if>
{vb:raw timezoneoptions}
<div class="blockrow">
<label>{vb:rawphrase receive_email}...</label>
<div class="rightcol">
<ul class="checkradio group">
<li>
<label for="cb_adminemail"><input type="checkbox" name="options[adminemail]" value="1" id="cb_adminemail" tabindex="1" {vb:raw checkedoff.adminemail} /> {vb:rawphrase receive_email_from_bulletin_board_staff}</label>
</li>
<vb:if condition="$show['email']">
<li>
<label for="cb_showemail"><input type="checkbox" name="options[showemail]" value="1" id="cb_showemail" tabindex="1" {vb:raw checkedoff.showemail} /> {vb:rawphrase receive_email_from_other_members}</label>
</li>
</vb:if>
</ul>
<p class="description">{vb:rawphrase administrators_may_send_email}</p>
</div>
</div>
{vb:raw customfields_other}
</div>
</div>
<h2 class="blockhead">{vb:rawphrase forum_rules}</h2>
<div class="blockbody formcontrols">
<div class="section">
<div class="blockrow">
<p class="label">{vb:rawphrase to_proceed_must_agree}</p>
<div id="forumrules" class="restore">
<vb:if condition="$show['coppa']">
<vb:comment> coppa regulations </vb:comment>
{vb:rawphrase coppa_rules_description, {vb:raw vboptions.bbtitle}, {vb:link forumhome|bburl}, {vb:raw session.sessionurl}, {vb:raw vboptions.webmasteremail}}
<vb:comment> / coppa regulations</vb:comment>
</vb:if>
<vb:comment> regular forum rules </vb:comment>
{vb:rawphrase forum_rules_registration, {vb:raw vboptions.forumhome}, {vb:raw session.sessionurl_q}}
{vb:rawphrase forum_rules_description, {vb:raw vboptions.bbtitle}}
<vb:comment> regular forum rules </vb:comment>
</div>
</div>
<div class="blockrow singlecheck">
<label for="cb_rules_agree" class="full"><input type="checkbox" name="agree" id="cb_rules_agree" tabindex="1" value="1" /> <strong>{vb:rawphrase read_agree_abide_by_rules, {vb:raw vboptions.bbtitle}}</strong></label>
</div>
</div>
</div>
<div class="blockfoot actionbuttons">
<div class="group">
<input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
<input type="hidden" name="do" value="addmember" />
<input type="hidden" name="url" value="{vb:raw url}" />
<input type="hidden" name="password_md5" />
<input type="hidden" name="passwordconfirm_md5" />
<vb:if condition="!$show['birthday']">
<input type="hidden" name="day" value="{vb:raw day}" />
<input type="hidden" name="month" value="{vb:raw month}" />
<input type="hidden" name="year" value="{vb:raw year}" />
</vb:if>
<vb:if condition="$show['coppa']">
<input type="hidden" name="coppauser" value="1" />
</vb:if>
<input type="submit" class="button" value="{vb:rawphrase complete_registration}" tabindex="1" accesskey="s" />
<input type="reset" class="button" name="Reset" tabindex="1" value="{vb:rawphrase reset_fields}" />
</div>
</div>
</form>
{vb:raw footer}
</body>
</html>