Contact Us Javascript Form Validation and Custom Fields in SalesForce

The web Contact Us form serves as an important starting point for people interested in a product or service.  For a big company, handling inbound leads over the course of a long sales process requires a strong CRM.  SalesForce is a fully featured CRM plaform, however in my experience it has somehow ignored an important source for sales leads: contact us forms on the company website.

Salesforce does not explain how its clients should go about crafting a quality Contact Us web page.

What is a quality Contact Us web page?  

Generally you’ll find the same type of fields on Contact Us pages across the web.  You are asked for your first and last name, job title, complete address and something specific about your query, like Where did you hear about us? Or What model Range Rover are you interested in?

 What’s the use of having their name if you don’t have their phone number?  Usually, a company will want to set specific form fields to required. Checking whether a potential customer has filled out a required answer is called form validation.

An Overview of Form Validation

There are two ways to validate form data, client side and server side.  While doing both client and server side validation may be a best practice, my experience is that only one method is chosen.

In general, Javascript is used to validate forms on the client side (in browser).  When a potential customer forgets to enter their phone number, javacript pops a small dialog box reminding them they screwed up.  The user fixes their error and tries submitting again.

Server side validation occurs when the potential customer submits a form and a new page loads, typically with a warning in red saying what information they forgot to enter.  The user then clicks back to return and complete the form.

Limitations of Data Validation on Salesforce Powered Contact Us Forms

Salesforce does not allow server-side data verification.  My understanding is that all users of Salesforce submit form data to the same encrypted URL: https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8

A unique customer ID accompanies all data posted to Salesforce which routes it into your personal silo of the great CRM cloud in the sky.  Since you don’t control this servlet page on salesforce.com, you can’t do anything once the form is submitted.

This means that a client side check, using javascript, is your only real alternative for validating forms used to feed data into Salesforce.

Implementation

There are many examples on the web of how perform simple form validation with Javascript.  If you want to get really fancy, here’s the javascript SalesForce uses for validating its own forms.  It includes checking for the email address to be formed properly and if the phone number is valid.  A screenshot of the page the above jscript was taken from is below.

Keeping it simple, you can simply ensure something was typed into individual fields like so:

<script type=”text/javascript”>

function validate_required(field,alerttxt) {

with (field)

{

if (value==null||value==””)

{alert(alerttxt);return false;}

else {return true}

}

}

function validate_form(thisform)

{

with (thisform)

{

if (validate_required(first_name,”Please fill out your first name.”)==false)

  {first_name.focus();return false;}

}

}

</script>

The matching form element would be:

<label for=”first_name”>First Name: *</label>

<input  id=”first_name” maxlength=”40″ name=”first_name” size=”25″ type=”text” /> 

And finally the <form> tag needs to run the javascript:

<form action=”https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8″ onsubmit=”return validate_form(this)” method=”post”>

Voila.  You have performed client-side data validation.  

Caveats and Other Madness

This example uses the standard Salesforce field “first name” and its associated id, first_name.  If you use custom fields in Salesforce, you’re going to have to deal with weird id’s, like 000004fsx02.  In these cases you will need to construct form elements with different ID and Name values, since the javascript that I used did not accept DOM names that began with numbers.  

My research suggests that this is against convention, but you do what you’ve got to do.  Maybe you can write better javascript that will take these funky salesforce custom field id’s.  If you can, please post your solution here.

I should also mention that occasionally you want to hard code data for passing into custom fields in Salesforce.  In these cases you must still use the form data spit out by web-to-form, only set the only response to what you want and set the item to hidden.

Suggestions for Salesforce

Salesforce disowns anything you do with the HTML that the web to form functionality kicks out for you.  They do not support creation of contact us forms, and provide no advice on technologies or methods to validate data inbound to their CRM.  Asking their customer support staff  if their CRM has the ability to perform server side validation will be met with confusion.

Salesforce needs to provide better support for this important aspect of lead origin into its client’s sales processes.  Undoubtedly, SF likely has elegant methods for working with data using its SDK.  If it is going to actually reach startups and smaller businesses with a $9 per user subscription plans, it needs to better support the most basic functionality of passing data into the system.

If Salesforce does not better address the down market, it will lose against startups like Zoho that offers a similarly priced CRM and a comprehensive set of other web applications and that has a user community willing to create how-to videos for things like Contact Us form creation.

At a minimum an explanatory page should be available in Salesforce’s online help to explain the basic methods for building and validating web form data.

I hope this has been helpful, please post your experience!

Follow me on twitter.