Sample web to lead
This is a good starting point for a web to lead form. It has a table arrangement, javascript validation, styles.
sample web to lead.html
—
HTML,
7 kB (7,762 bytes)
File contents
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Contact Us</title>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<style type="text/css">
<!--
body {margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}
td { vertical-align: top; }
label { text-align: right; margin-right: 8px; font-weight: bold; }
.muted { background-color: #cccac3; }
.invalid { border-left: 4px solid red; }
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
//used in the forms phone fields
function formatPhone(num) {
var re= /\D/;
var newNum=num.value;
if (newNum != "") {
while (re.test(newNum)) {
newNum = newNum.replace(re,"");
}
if (newNum.length == 7){
newNum = '(206) ' + newNum.substring(0,3) + '-' + newNum.substring(3,7);
num.value = newNum;
}
if (newNum.length == 10){
newNum = '(' + newNum.substring(0,3) + ') ' + newNum.substring(3,6) + '-' + newNum.substring(6,10);
num.value = newNum;
}
}
}
function validate(theForm) {
var required = ["first_name", "last_name"];
var invalid = false;
for (var i in required) {
var theField = theForm[required[i]];
if (theField.value == "") {
theField.className = "invalid";
if (!invalid) theField.focus();
invalid = true;
} else {
theField.className = "";
}
}
if (invalid) {
alert("Please enter a value in the highlighted fields.");
return (false);
} else {
return (true);
}
}
//-->
</script>
</head>
<body bgcolor="#ccddcc">
<table width="526" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="12"> </td>
<td valign="top" class="style7">
<p>Thank you for your interest!</p>
<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" onsubmit="return validate(this)">
<!-- REPLACE WITH PROPER ORG ID -->
<input type=hidden name="oid" value="00D50000000XXXX">
<!-- ALWAYS GOOD TO SET LEAD SOURCE -->
<input type="hidden" name="lead_source" value="Web Interest Form">
<!-- THIS IS OPTIONAL, ONLY IF YOU WANT A SPECIFIC RECORD TYPE -->
<select style="display:none;" id="recordType" name="recordType">
<option value="012500000000nxK" selected="selected">Web Lead</option>
</select>
<!-- SET TO THANK YOU PAGE -->
<input type=hidden name="retURL" value="thank_you.html">
<table>
<tr>
<td align="right">
<label for="salutation">Salutation</label>
</td>
<td>
<select id="salutation" name="salutation"><option value="">--None--</option><option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
<option value="Dr.">Dr.</option>
<option value="Prof.">Prof.</option>
</select>
</td>
</tr>
<tr>
<td align="right">
<label for="first_name">First Name</label>
</td>
<td>
<input id="first_name" maxlength="40" name="first_name" size="20" type="text" />
</td>
</tr>
<tr>
<td align="right">
<label for="last_name">Last Name</label>
</td>
<td>
<input id="last_name" maxlength="40" name="last_name" size="20" type="text" />
</td>
</tr>
<tr>
<td align="right">
<label for="title">Title</label>
</td>
<td>
<input id="title" maxlength="80" name="title" size="20" type="text" />
</td>
</tr>
<tr>
<td align="right">
<label for="company">Company</label>
</td>
<td>
<input id="company" maxlength="80" name="company" size="30" type="text" />
</td>
</tr>
<tr>
<td align="right">
<label for="URL">Website</label>
</td>
<td>
<input id="URL" maxlength="80" name="URL" size="35" type="text" />
</td>
</tr>
<tr>
<td align="right">
<label for="email">Email</label>
</td>
<td>
<input id="email" maxlength="80" name="email" size="35" type="text" />
</td>
</tr>
<tr>
<td align="right">
<label for="phone">Work Phone</label>
</td>
<td>
<input id="phone" maxlength="40" name="phone" size="20" type="text" onblur="formatPhone(this);" />
</td>
</tr>
<tr>
<td align="right"><label for="00N50000001XPZr">
Home Phone</label>
</td>
<td>
<input id="00N50000001XPZr" maxlength="40" name="00N50000001XPZr" size="20" type="text" onblur="formatPhone(this);" />
</td>
</tr>
<tr>
<td align="right">
<label for="mobile">Mobile Phone</label>
</td>
<td>
<input id="mobile" maxlength="40" name="mobile" size="20" type="text" onblur="formatPhone(this);" />
</td>
</tr>
<tr>
<td align="right">
<label for="fax">Fax</label>
</td>
<td>
<input id="fax" maxlength="40" name="fax" size="20" type="text" onblur="formatPhone(this);" />
</td>
</tr>
<tr>
<td align="right">
<label for="street">Address</label>
</td>
<td>
<textarea name="street" cols="24"></textarea>
</td>
</tr>
<tr>
<td align="right">
<label for="city">City</label>
</td>
<td>
<input id="city" maxlength="40" name="city" size="20" type="text" />
</td>
</tr>
<tr>
<td align="right">
<label for="state">State/Province</label>
</td>
<td>
<input id="state" maxlength="20" name="state" size="20" type="text" />
</td>
</tr>
<tr>
<td align="right">
<label for="zip">Zip</label>
</td>
<td>
<input id="zip" maxlength="20" name="zip" size="20" type="text" />
</td>
</tr>
<tr>
<td align="right">
<label for="country">Country</label>
</td>
<td>
<input id="country" maxlength="40" name="country" size="20" type="text" />
</td>
</tr>
<tr>
<td align="right"><label for="00N50000001XIgA">
Communication Preference</label>
</td>
<td>
<select id="00N50000001XIgA" name="00N50000001XIgA" title="Communication Preference"><option value="">--None--</option><option value="Email">Email</option>
<option value="Primary Address">Postal Mail</option>
<option value="Work Phone">Work Phone</option>
<option value="Home Phone">Home Phone</option>
<option value="Mobile Phone">Mobile Phone</option>
</select>
</td>
</tr>
<tr>
<td align="right">
</td>
<td>
<input id="emailOptOut" name="emailOptOut" type="checkbox" value="1" />
<label for="emailOptOut">No Email Please</label>
</td>
</tr>
<tr>
<td align="right">
</td>
<td>
<input id="doNotCall" name="doNotCall" type="checkbox" value="1" />
<label for="doNotCall">No Calls Please</label>
</td>
</tr>
<tr>
<td align="right"><label for="00N50000001XIwN">
Heard About Us From</label>
</td>
<td>
<select id="00N50000001XIwN" name="00N50000001XIwN" title="How Heard"><option value="">--None--</option><option value="Friend">Friend</option>
<option value="Family">Family</option>
<option value="School / Teacher">School / Teacher</option>
<option value="Alumnus">Alumnus</option>
<option value="Employee">Employee</option>
<option value="Partner Organization">Partner Organization</option>
<option value="Newsletter">Newsletter</option>
<option value="Media / News">Media / News</option>
<option value="Web">Web</option>
<option value="Other">Other</option>
</select>
</td>
</tr>
<tr>
<td align="right"><label for="description">
Comment/Question</label>
</td>
<td>
<textarea cols="32" rows="5" id="description" maxlength="255" name="description" type="text" wrap="soft"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input style="margin-top:10px;" type="submit" name="submit" value="Send">
</td>
</tr>
</table>
</form>
</td>
<td width="30"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>