Web-to-Lead in Salesforce is a very useful tool to easily get leads into Salesforce using a form. The Salesforce-generated code is very simple and functional but misses validations. Especially if you are a solo admin with no access to developers to support you, this might get tricky. Fear no longer, here a starting point on how to customize your output from Salesforce to include validations and other options.
Best practice is to have a chat with your web-master as they are responsible for the website and any functionality of it. Validations of any kind shall always be tested before using it in your live environment. Get in touch with the team to validate what you have built and if it works together with the existing website code.
If you haven't used Web-to-Lead before and are not sure how to get started, here an article on that.
Let's take a business scenario to look at the different use cases for validations in Web-to-Lead forms. Your company is offering a service to deliver plants to people living in cities (got some of my plants this way!). You send out monthly newsletters to your clients informing them of upcoming events. You also have a weekly email service with attached videos to teach best practices around plant care. Your business expanded recently from the UK to France and Belgium. You would like to offer the content in French but want to give the option to your subscribers to choose between French and English. Great, let's get started with our Web-to-Lead form.
Scenario 1# A new potential customer visits your website and wants to subscribe to the newsletter before buying the plants to understand your services better. You want to get their first name, last name, and email address. It is important to you, to keep your data as clean as possible so you want to make sure that people enter real email addresses. It is unlikely that you will manage to filter out all funny email addresses but you can make sure that at least the format is right. The standard output from Salesforce looks like this:
1 <label for="email">Email</label><input
2 id="email" maxlength="80" name="email" size="20"
3 type="text" /><br>
Using purely this line will not enforce that the text entered is in email format. I am adding the following pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" to the standard code to enforce this.
1 <label for="email">Email</label><input
2 id="email" maxlength="80" name="email" size="20"
3 type="text" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" /><br>
Adding that tag forces the person entering text into the email field to add an @ symbol as well as a dotbetween two text options at the end.
Scenario 2# You would like to find out which language the person prefers for their newsletter: English or
French. This sounds like a dropdown menu in Salesforce. Create a single picklist field called "Langauge"
on the lead object and add English and French as the options to choose from. Now there are a few things
to look out for when adding custom fields to a Web-to-Lead form. Here the output I get from Salesforce
when adding "Language" to my Web-to-Lead code.
1 Language:<select id="00N4I00000EMMui" name="00N4I00000EMMui"
2 title="Language">
3 <option value="">--None--</option>
4 <option value="English">English</option>
5 <option value="French">French</option>
6 </select><br>
standard field provided by Salesforce. Check out your field ID for your custom fields when using
Web-to-Lead forms so that the data goes into the correct fields when using it in production. The field ID
varies if you have built it first in a sandbox for testing.
You will also notice that we have a "select" element for this piece of code. This is because we are using
a picklist field here with English and French as the options to choose from. None is given by default and
can be removed if you don't want that value to be available to your clients.
Scenario 3# You are the Marketing Director and you want to prove that your marketing efforts are
working and you provide value to the business. It is important to capture the source of the lead. This is
easy. The output from Salesforce adding the standard Lead Source field to your Web-to-Lead form
looks like this:
1 <label for="lead_source">Lead Source</label><select
2 id="lead_source" name="lead_source">
3 <option value="">--None--</option><option value="Web">Web</option>
4 <option value="Phone Inquiry">Phone Inquiry</option>
5 <option value="Partner Referral">Partner Referral</option>
6 <option value="Purchased List">Purchased List</option>
7 <option value="Other">Other</option>
8 </select><br>
You notice that we have the select option again as that field is configured as a picklist field. For leads coming through the website, we would like to have this set to "web" automatically. We don't want
that the user on our website has to select this. It shouldn't be visible really, so how do we achieve this?
The new code line looks lots easier than the standard output:
1 <input type="hidden" id="lead_source" name="lead_source" value="Web">
Add a hidden tag so that the field is not visible on your website. Set the value to "Web" which will
populate the lead source field in Salesforce automatically to "Web". If the terms you are using in your
company varies, e.g. you want to use Website instead of Web, change it first for the lead source field in
Salesforce and then adjust your code. Be aware of historic data if you make changes, as this fields might
have been used before. This could impact reports etc.
Scenario 4# A customer is ready to buy and in order to make sure that the delivery is going smoothly,
your company requires the customer to provide a telephone number. You want to ensure that the phone
field is mandatory for the customer to populate before submitting their order. The standard line generated
by the Salesforce Web-to-Lead engine looks like this:
1 <label for="phone">Phone</label><input id="phone" maxlength="40"
2 name="phone" size="20" type="text" /><br>
Using this line will not enforce the user to provide their phone number. Let's add a required tag:
1 <label for="phone">Phone</label><input id="phone" maxlength="40"
2 name="phone" size="20" type="text" Required/><br>
The user is now required to add a phone number before submitting the form.
You want to learn more about formatting your Web-to-Lead form? Here some additional resources to
continue your learning journey:
Guideline for Setting up Web-to-Lead
Leads FAQs
HTML basics
HTML Tutorial
Came across any good validations yourself? Post them below for us all to learn!
Opening Image: Photo by Markus Spiske on Unsplash
Comments
Post a Comment