Web-to-lead guide banner
  1. Blog
  2. Tips & Tricks
5 mins

The Ultimate Guide to Salesforce's Web-to-Lead Forms

Nishant Agrawal avatar
Nishant Agrawal

Web-to-lead is a tool offered by Salesforce that generates an HTML form which can capture visitor information, and store that in Salesforce as a new lead. Once the lead is in, Salesforce can then score, qualify, and route it to the correct reps.

In this detailed guide we will cover all aspects of web-to-lead forms:

  1. Setup and customization
  2. Understanding the HTML code
  3. Web-to-lead in action
  4. Debugging the form
  5. Design considerations
  6. Common questions
  7. Limitations

Setup and customization

If you are using Salesforce lightning, go to the Setup page, and enter Web-to-lead in the Quick Find box. You will be able to see the Web-to-lead menu item under Marketing.

If you are using Salesforce classic Web-to-lead is available under Setup -> Customize -> Leads.

Once you are on the web-to-lead setup page click on Create Web-to-lead Form.

Salesforce's Web-to-lead setup page
Web-to-lead form configuration page

On this page you can add the fields you'd like on your form, selecting from the Available Fields section.

You can also choose to enable reCAPTCHA on this page. We highly recommend using reCAPTCHA. Forms without captcha or other spam prevention tools will be inundated with spam.

You can also define a Return URL on this page. When the form is submitted the visitor will be taken to the Return URL page.

Your Return URL page should contain a Thank you message so the visitors know that their inquiry was successfully submitted.

Now click on Generate. You will be taken to the next step where you can get the HTML code.

Understanding the HTML code

HTML is the language that powers the structure and content of webpages. The HTML code generated by Salesforce will be parsed by the browsers, and will appear like a fillable form to your visitors.

This generated HTML code has two parts. The first part is the header, and can be ignored in most cases. If you are using a CMS like WordPress it would already include this on the page.

The second part defines your form and the different fields that you selected on the previous page. The HTML code also includes an action, which tells the form where to send the data - in this case it's Salesforce.

Web-to-lead HTML code page
HTML code generated by web-to-lead

Web-to-lead in action

Once you embed the form on your website, it would look and work something like this:

How web-to-lead looks and works

You must be wondering - what happens if someone doesn't enter all the details, or enters incorrect information. What if the lead with that email already exists, and I have duplicate prevention rules in place?

Let's enable debugging on our form.

Debugging the form

Your form's HTML code contains lines like these:

<!--  <input type="hidden" name="debug" value=1>  -->
<!--  <input type="hidden" name="debugEmail" value="<<add emailId here>>">  -->

These lines are surrounded by comment tags, meaning they are not active. Remove the <!-- and the --> from around the lines. This will enable the form in debug mode.

Replace <<add emailId here>> with the email where you'd like to receive emails about failed lead creation events (if it doesn't already include the email).

Now if you submit the form and it triggers a rule that should block lead creation you will receive an email from Salesforce with the subject, "Salesforce Could Not Create This Lead," and some details.

Once you are ready to go live with your form you can remove the above two lines from your form's HTML code, or restore the comment tags we removed earlier.

Design considerations

Out-of-box the form doesn't look great. Web-to-lead generates the HTML needed to make the form function, but it doesn't include any CSS. CSS is a language that allows you to style HTML components. Let us fix that.

Look for <form in your HTML code, and replace it with <form class="lead-form__styled". Now add these lines, right before <form:

<style>
.lead-form__styled label {display: block;margin-top: 10px;}
.lead-form__styled input[type="text"] {border: 1px solid #ddd;border-radius: 4px;padding: 6px 10px;}
.lead-form__styled input[type="submit"] {background: #333;color: white;border-radius: 4px;padding: 5px 16px;margin-top: 12px;font: inherit;}
</style>

Here is your new, styled, and well-designed web-to-lead form:

Web-to-lead form with CSS styles applied
An improved web-to-lead form design

It might not be much, but at least the form doesn't look suspicious anymore. I know you have a lot of questions.

Common questions

Where do I paste the HTML code?

The answer depends on where and how your website works. If you are using WordPress you would add an HTML Block element to your page and insert the HTML code in that block. For other CMSs you would try to find something similar - some call it an HTML block, some would call it code.

Does web-to-lead have a public-facing API?

Last we checked, it does not. The official documentation on web-to-lead is rather sparse, and it doesn't have much functionality outside of what we discussed. It is meant to be a simple tool.

Can I use web-to-lead to update leads?

No. Web-to-lead can only create new leads.

Are there any limits to the form?

Web-to-lead can only accept up to 500 leads per day. Any responses after that will be processed after some delays.

Limitations

  1. No validation: If the visitors enters incorrect information, or skips certain required fields the form cannot show error messages. It will simply fail to create a lead, and send an email to the admin. This will cost you real leads.
  2. No JS or CSS: The public-facing web is largely built using an interplay of JavaScript, HTML, and CSS. HTML gives structure, CSS gives style, and JavaScript brings things to life. Web-to-lead generates an HTML code (without any accompanying JS or CSS). While it still works, the functionality is rudimentary, and styling non-existent.
  3. Requires reCaptcha: With reCaptcha your form will receive a lot of spam. Setting up reCaptcha requires additional admin work, thus taking away from the simplicity of the intent behind web-to-lead.
  4. Not intuitive: While the setup is easy, it isn't nearly as simple as a drag-and-drop form editor would have been.
  5. No files: Web-to-lead isn't designed to handle file uploads.
  6. No analytics or tracking.

Summary

Web-to-lead is meant to be a simple tool to collect leads from a website. It has some glaring limitations, and is becoming less relevant as the web becomes more dynamic. It works fine as a temporary measure while you get a real lead generation form in place.

Using web-to-lead in the long-run is not recommend owing to the lack of validation and customization.

Have a look at Formcrafts. It's a purpose-built Salesforce forms solution with a host of advanced features, and a drag-and-drop interface.

Article published on and last updated on
Previous post The 5 Best Form Builders for HubSpot in 2024 Jun 10, 2024