The Web To Lead app allows you to collect leads from your website and also allows for multiple forms, however, the forms always collect the same fields! If you were to add a new field (e.g. a phone number), then all the forms will request a phone number.
Is there a way to configure the app so different forms can collect different fields? Yes, but only through customization.
NOTE: Customizing the Web to Lead form is not a novice undertaking and requires a familiarity with customization, as well as a familiarity on how to set up and use the Web to Lead form itself.
How the Web To Lead App Works
The Web to Lead app uses only one screen as a template to collect leads. Yes, you can make multiple web to lead forms and each form will collect separate responses, but the only difference between them are the text elements, like the header and the body text. In the below image, the green areas show what can be changed out-of-the-box without the need for customization.
If you want to add a brand new field to the screen (in the non-green areas), this field will show on every web to lead form you create.
If you only want the field to show on specific forms, then you need to customize the screen to show and hide the field depending on which form is being shown.
What We'll Do
In our example scenario, we have a few existing web to lead forms we have already created.
There is one web to lead form called "Book an appointment", and we want this form to collect an appointment date and the lead's website. In the below image, we want to add two new fields to the bottom of the form above the Notes field.
For this example, the data from these fields will simply be appended to the Notes field.
However, if we add those fields to the web to lead form, then both of my forms will collect the appointment date and the website. We only want our first web to lead form to show these two fields.
So we will customize Method to hide or show these details based on a checkbox we will set up on the web to lead configuration form: the New / Edit Form.
The below image will show what we want to do. We want to add a new check box to show the Request Appointment Details on the form when we configure our web to lead form:
In order to do this, we will need to:
Add a custom field to the LeadForms table to allow a user to choose whether or not to collect this new information.
Customize the New / Edit Form screen so we can use the above custom field choose whether or not to include the new field in a web to lead form.
Customize the web to lead form screen Customer Form with your new custom fields.
Customize the Customer Form screen to only display new fields based on custom field created in step 1.
Customize the Customer Form to save the new information.
Due to the advanced nature of this, we will assume you understand the basics of customization.
NOTE: For simplicity's sake, we are only appending the data to the Notes field, however, you can update the contact's record, or the activity, or the opportunity. For more information on that, please see our article "Customizing the Web to Lead App."
1. Customize the LeadForms Table
Before we can customize the web to lead form, we will need to customize the screen that configures the form: the New / Edit Form screen.
However, we need to create a new field first. This new field will store the preference of whether or not to show the appointment details.
This is done in the LeadForms table, which the New / Edit Form screen is based off of.
Click your profile icon in the upper right and select Account Settings.
Select the Tables & Fields.
Search for the LeadForms table and then select it.
Add a new field called ShowAppointmentDetails.
Change the new field's type to YesNo.
Hit Save to create your new field.
Great, now we can add this new field to the New / Edit Form screen.
2. Customize the New / Edit Form Screen
Once the new ShowAppointmentDetails field is created, we can now add it to the New / Edit Form screen.
Go to the Web To Lead App and select ⊕ New Form to get to the New / Edit Form screen.
Customize the screen. It will prompt you to make a copy so do so.
The screen will be in Published mode. You will need to click the Edit button.
It will prompt you to make a copy, which you will acquiesce to by clicking the Create Copy button.
Find the section secFormPreferencesInner, and in its first row, insert another row above it (Right-click on the row to show the contextual menu).
Remember the field we recreated earlier? From the fields, drag in the ShowAppointmentDetails field into the row you inserted.
Change its caption to "Request Appointment Details on form".
Save and Close the screen.
Your New / Edit Form screen will now have a new checkbox field.
Since this is a field from the screen's base table, saving it will automatically be taken care of by the Save All action, so you don't need to customize this screen further.
However, you can make it live if you want other users to be able to see this new change.
Publish the New / Edit Form Screen
To move this screen from Draft to Published, click the click here link in the blue banner.
At the bottom of the page, click the Publish button.
It will prompt you again, however, once you click Publish again, it will be live for all users on your account.
3. Customize Customer Form Screen
Now that the preparations have been made, we can begin the customizations on the actual web to lead form itself, which is called Customer Form.
There are a few ways to find this screen, however, we can access it from the New / Edit Form screen.
On the New / Edit Form, go to the bottom and select Preview. (The preview is enabled only when the web to lead form is saved)
The preview will bring up the Customer Form screen. Customize this screen. The screen is published, so you will need to Edit and make a Copy, as you did in the previous section.
We're going to put our new section right above the Notes field. Right click on the row with the Notes field and select ⊕ Insert Above.
Drag into this new row a new section. Name it "SectionAppointment" and set its Left and Right Padding to None.
Add a few rows in this new section, and add objects you want to capture from your lead. Continuing with this example, I will add a DateTime Picker object and call it AppointmentDate. I will also add a Text Input object and call it Website. Make sure you also set their Caption Font Weights to Bold to be consistent with the other fields.
Save this but do not close the screen yet.
Note our new objects have been embedded in a new section: SectionAppointment. This allows us to treat the objects as one group, and I can hide and unhide the whole section. Much easier than hiding each of them individually.
Next up, let's add in actions to hide and unhide this section.
4. Customize Form to Display New Fields
Now that we've added the new fields, we will need the customer form to obey the configuration we set up back in Section 2: to display or not display this new section.
Drag the ShowAppointmentDetails field into the section SectionHiddenContent. This makes this field available for your actions, but not visible on screen since that section is hidden.
At the top right, select the page icon to get to the Screen Properties for the Customer Form screen.
At the bottom, expand the Actions and click the Active Record Change event. There should be two actions within here already.
Hover over the Else and press the ⊕ (plus) icon to add an action within the Else. This is important to make sure your actions are part of the Else conditional statement.
On the right, search for Conditional Statement. and add it in. You will note that it is indented and within the Else statement.
On the right, click ⊕ Add a condition. Configure this condition to test if ShowAppointmentDetails is True. For internal notes, type "ShowAppointmentDetails is TRUE".
Hover over the nested If...then and press the ⊕ (plus) icon to add an action within.
On the right, search for the action Show/Hide Controls and add it. Configure it to Show the SectionAppointment section. Remember to add an appropriate Internal Note.
Over the second Else and press the ⊕ (plus) icon to add an action within it.
Search for the action Show/Hide Controls and add it. Configure it to Hide the SectionAppointment section. Remember to add an appropriate Internal Note.
Before Closing the Action Editor, ensure your action set looks similar to below.
Almost done here. Now we have to make sure the information entered in is saved.
5. Customize Customer Form to Save New Information
Now that this information has been entered in, we will need to save it when the lead hits submit on the form. Of course, depending on the information submitted, you could customize this form to be more intelligent on where the information is stored. For example, if you have custom fields in the customer table, you could save pertinent information there.
For simplicity's sake, we will just append the new information to the Notes field.
Still in the same Customer Form screen, find the Submit button within SectionSubmittingForm, and open its Click Event.
Select ⊕ (plus) to add an action after the Enable/Disable Controls action. (We want this to happen before the routines to create a customer, activity, and opportunity.
Search for Conditional Statement and add it.
As you did earlier, click ⊕ Add a condition. Configure this condition to test if ShowAppointmentDetails is True. For internal notes, type "ShowAppointmentDetails is TRUE".
Hover over the nested If...then and press the ⊕ (plus) icon to add an action within.
Add in a Character Function action and configure it to append the new fields to the Notes field. This is done using the Join fuction and then storing the result back in the Notes field. In the below image, I also put in text to label the fields:
Before closing this action set, make sure your added actions are above the Call Routines for Customer, Activity, and Opportunity.
Close the action set to return back to the designer.
Close the designer screen. You are done customizing the screen.
NOTE: The customization in this step is very simplistic. We could have styled the notes with a separator, or HTML, but for now, we are just appending plain text to the end of the notes.
You can test the form now, and if you are satisfied with the results, you will need to ensure the version is live.
Publish the Customer Form Screen
To move this screen from Draft to Published, click the click here link in the blue banner.
Then, in the bottom right, click the Publish button.
And that's it! Now we are done!
There are a number of enhancements you can do to this process, but hopefully this will give you a start on how to customize different web to lead forms.