top of page

Tips for Customizing Web-to-Lead Forms in Salesforce

Writer's picture: Vasilis PapanikolaouVasilis Papanikolaou

Updated: Nov 6, 2024

Salesforce Web-to-Lead is the default way to import Leads into Salesforce from a web form. The way it works is simple: you select the fields to include in your form and Salesforce generates HTML code that can be embedded in your website. When the form is submitted, an API request is sent to your instance and a lead is created. Once the lead is created, lead auto-response and lead assignment rules are fired to determine the next actions.


In this blog post we’ll generate a Web-to-Lead form and then go through some tips on how to make it more presentable and efficient.


Web-to-Lead form generation


Go to Setup>Web-to-Lead and click the “Create Web-to-Lead Form” button.


Next we need to select the required fields. I’ll be selecting the following:


  • First Name

  • Last Name

  • Email

  • Phone

  • Company

  • Description: it’s a Long Text Area(32000) field so I’ll use it for the message 

  • Lead Source: usually we need more than one Web-to-Lead forms for each website so we can use the Lead Source field to tell where the lead came from and apply the appropriate Lead Assignment and Lead Auto-Reply rules. 


We also need to set the redirect url after form submission. Usually it’s a thank you page on your website that can be tracked to monitor conversions in analytics tools like Google Analytics and LinkedIn.


<!--  ----------------------------------------------------------------------  -->

<!--  NOTE: Please add the following <META> element to your page <HEAD>.      -->

<!--  If necessary, please modify the charset parameter to specify the        -->

<!--  character set of your HTML page.                                        -->

<!--  ----------------------------------------------------------------------  -->


<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">


<!--  ----------------------------------------------------------------------  -->

<!--  NOTE: Please add the following <FORM> element to your page.             -->

<!--  ----------------------------------------------------------------------  -->



<input type=hidden name="oid" value="YOUR_ORG_ID">

<input type=hidden name="retURL" value="http://yourwebsite.com/your-thank-you-page">


<!--  ----------------------------------------------------------------------  -->

<!--  NOTE: These fields are optional debugging elements. Please uncomment    -->

<!--  these lines if you wish to test in debug mode.                          -->

<!--  <input type="hidden" name="debug" value=1>                              -->

<!--  <input type="hidden" name="debugEmail"                                  -->

<!--  value="vasilis@robinconsulting.gr">                                     -->

<!--  ----------------------------------------------------------------------  -->


<label for="first_name">First Name</label><input  id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br>


<label for="last_name">Last Name</label><input  id="last_name" maxlength="80" name="last_name" size="20" type="text" /><br>


<label for="email">Email</label><input  id="email" maxlength="80" name="email" size="20" type="text" /><br>


<label for="phone">Phone</label><input  id="phone" maxlength="40" name="phone" size="20" type="text" /><br>


<label for="company">Company</label><input  id="company" maxlength="40" name="company" size="20" type="text" /><br>


<label for="description">Description</label><textarea name="description"></textarea><br>


<label for="lead_source">Lead Source</label><select  id="lead_source" name="lead_source">

    <option value="">--None--</option>

    <option value="LinkedIn">LinkedIn</option>

    <option value="Referral">Referral</option>

    <option value="Web - Contact">Web - Contact</option>

    <option value="Web - Salesforce">Web - Salesforce</option>

    <option value="Web - Nonprofit">Web - Nonprofit</option>

</select><br>


<input type="submit" name="submit">


</form>




What does our newly created form look like?


Not great…

Tips for customizing your Web-to–Lead form


We need to take a few more steps to make it work for us:


  • Import fonts

  • Create css styles to make it pretty and match to your website

  • Hide fields used for reporting and automation. In our case I’ll be hiding the Lead Source field so that the correct value is automatically submitted.

  • Change field labels

  • Make some fields required to get the info you need

  • Modify redirect target attribute when the form is embedded as an iframe so that  the entire page is redirected and not just the iframe


You can do all of the above either with some basic knowledge of HTML and CSS or with a lot of googling and trying. I’ve put together a list of tips to make it easier.


Testing the form looks

An easy way to test your form real time is the try-it editor by w3schools.com 



Customising fields

Adjusting field labels

For each field there is a label tag which defines the label and the field tag that defines the actual input field


<label for="company">Company</label><input  id="company" maxlength="40" name="company" size="20" type="text" /><br>


Changing the text between the <label> tags will change the label that appears on the form. I’ll be changing the label from “Company” to “Your Company”.


<label for="company">Your Company</label><input  id="company" maxlength="40" name="company" size="20" type="text" /><br>


Making fields required

We need to set some fields as required so that we don’t get submissions without name, email or phone. We’ll add the required attribute in the form inputs. 


Before

<input  id="first_name" maxlength="40" name="first_name" type="text"/>


After

<input  id="first_name" maxlength="40" name="first_name" type="text" required />


Adjust the field size for long text fields

The rows attribute adjusts the number of visible rows for long text fields in textarea tags. We can also add the maxlength attribute to limit the size of the input. In our case, I’ve selected 500 characters input size and 3 rows.


Before

<textarea name="description">


After

<textarea id="description" maxlength="500" rows="3" name="description"></textarea>


Hiding fields for automation and reporting

When using multiple Web-to-Lead forms, it’s useful to track where leads are coming from and trigger the appropriate assignment and auto-response rules. 


We have used the Lead Source field for this purpose. We’ll hide the field and hard-code the value to be submitted based on the page the form is placed. 


Before

<label for="lead_source">Lead Source</label><select  id="lead_source" name="lead_source">

    <option value="">--None--</option>

    <option value="LinkedIn">LinkedIn</option>

    <option value="Referral">Referral</option>

    <option value="Web - Contact">Web - Contact</option>

    <option value="Web - Salesforce">Web - Salesforce</option>

    <option value="Web - Nonprofit">Web - Nonprofit</option>

</select><br>


After

<input type=hidden id="lead_source" name="lead_source" value="Web - Salesforce">


I’m replacing all the option values and the select tag with an input with the value attribute hard-coded to the value we want for this form and the type attribute set to hidden.


Everytime this form is submitted, I’ll know that the lead came from the Salesforce page on our website and not the Contact page or the Salesforce for Nonprofits page.


Modifying redirect attributes for forms embedded in an iframe

In some content management systems (e.g. Wix) the Web-to-lead form is embedded in an iframe and when it is submitted only the iframe is redirected to the thank you page. This feels rather awkward to the user. 


To change that we’ll add the target attribute to the form element.


Before


After


We’re basically telling the browser to redirect the entire page (top element) and not just the iframe.


Styling the form

Attracting leads is hard and it can be even harder with an ugly webform. 


Adding the style section

We’ll add a style section above our form and also put our form inside a div element so that we can target all the CSS we’ll write to this element


<style>

</style>

<div class="sfdc-form">

     </form>

</div>


Import google fonts

Add an import statement for the fonts in the style section. After you find the fonts you like from https://fonts.google.com/, you can select the styles you want to import and copy the import statement from the font’s page. Remove the style tags from the copied text and add it after the opening style tag in our code. Below the import text, you’ll find the css rule to use the font.


In this example I’m importing Piazzolla with a regular weight of 400. 


<style>

</style>


The CSS rule in this case is:


font-family: 'Piazzolla', serif;



Form CSS


You don’t need to be a CSS expert to make a form look good. Some useful properties I have user are:


  • font-family

  • font-size

  • background-color

  • width

  • height

  • border

  • border-bottom

  • border-top

  • padding-left

  • outline

  • border-radius

  • margin-top


You can read more about CSS properties and how to use them here: https://www.w3schools.com/cssref/


<style type="text/css">

    

    /* General attributes for everything in the form */

    .sfdc-form * {

        font-family: 'Piazzolla', serif;

        font-size: 18px;

    }


    /* Setting the background color of the form (not the inputs)*/

    .sfdc-form form {

        background-color: none;

    }


    /* For text inputs and text areas */

    .sfdc-form input[type=text], textarea {

        width: 100%; 

        border: none;

        border-bottom: solid 2px black;

        padding-left: 3px;

        background-color: none;

    }


    /* Set the height of input separately */

    .sfdc-form input[type=text] {

        height: 45px;

    }        


    /* Remove blue outline when clicking on an input */

    .sfdc-form input[type=text]:focus {

        outline: none;

    }


    /* Remove blue outline when clicking on a textarea */

    .sfdc-form textarea:focus{

        outline: none;

    }


    /* Submit button styling */

    .sfdc-form input[type=submit] {

        background-color: #004bf9;

        border: solid 1px #004bf9;

        border-radius: 5px; 

        width: 150px;

        height: 40px;

        font-size: 20px;

        color: white;

        margin-top: 30px;

    }


    /* Submit button styling when hovering the cursor on top of it */

    .sfdc-form input[type=submit]:hover {

        background-color: #7fa3fb;

        border: none;

        color: black;

    }


</style>



Final result



Comments


bottom of page