The Web To Lead app allows you to collect leads from your website and allows you to change the text of the form. However, if you want to collect more information from the potential customer, you will need to customize the web to lead form.
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. 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 more fields to the screen (in the non-green areas), these fields will show on every web to lead form.
NOTE: If you want to have different web to lead forms have different fields to collect different information, there's a different process for that. Please see our article "Have Web to Lead forms collect different information."
What We'll Do
In our example scenario, we will take an existing web to lead form and add the following fields to collect on the form:
Collect a website to go into the contact (required field).
Collect an appointment date for the follow-up activity and to put into the Opportunity's next step field.
In the below image, you can see the two new fields added to the bottom of the form.
In order to do this, we will need to:
Customize the web to lead form screen Customer Form with your new custom fields.
Customize the Customer Form to save website in the contact.
Save the appointment date in the activity.
Save the appointment date in the opportunity's Next step field.
Ensure the latest version of Customer Form is live for all users to see.
Due to the advanced nature of this, we will assume you understand the basics of customization.
1. Customize Customer Form with New Fields
To customize the web to lead form, you will need to customize a screen called Customer Form found in the Web to Lead app.
There are a few ways to find this screen, however, we can access it from the New / Edit Form screen.
Select your form in the Web to Leads app to be taken to the New / Edit Form screen.
At the bottom, select Preview.
The preview will bring you to the web to lead form, the Customer Form screen. Customize this screen.
The screen is published, so you will need to Edit and make a Copy.
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 a DateTime Picker object and call it Appointment Date. Change its Caption Font Weight to Bold.
Add a Text Input object and call it Website. Also change its Caption Font Weight to Bold.
Still on the Website object, click the down arrow [
▼] and go into its validation rules.
Add the Field is Required validation rule. Click Close to return back to the designer.
Save this but do not close the screen yet.
2. Customize the Customer Form to save website
Now that this information has been entered in, we will need to save it when the lead hits submit on the form.
First, we will save the Website in the contact's information.
Still in the same Customer Form screen, find the Submit button within SectionSubmittingForm, and open its Click Event.
Select the third Call Routine which has the internal note "Create Customer" (see how important internal notes are?)
Within this Call Routine (which calls the click event for the CreateCustomer object), click to Jump to this action set.
The action set you are editing now will create a brand new customer and contact from the entered form (or it will create a duplicate if it exists). We will add the website into the contact create. At the top, click the ⊕ to add a new action at the bottom of the set.
Search for the action Update Fields in Table and for Select a table, choose the Contacts table.
Click Open Criteria Builder and for the criteria, change it where the contact's RecordID is Equal to the control ContactRecordIDPlaceHolder.
Click < Back to go back to configuring the action.
Field(s) to update = Website (Field from the Contacts table)
Update using this value = Website (Control from the screen)
(Unfortunately, the two are named the same so it may be a bit confusing. They are different, however.)
Once you put in an internal note, you should be done. Make sure this new action you added is at the end of the action set.
Click the Close button which will return you back to the designer.
3. Save the appointment date in the activity
Next up is the appointment date the customer put in.
Still in the same Customer Form screen, find the Submit button again and go back into its Click Event.
Select the fourth Call Routine, which has the internal note "Activity", and Jump to this action set.
The CreateActivity control has a simpler action set. Select the second action: Insert Records Into Table, which is the action that creates a follow-up activity.
On the right, change the DueDateStart to the control AppointmentDate (which was added in Step 1).
Beside the Comments field, click Edit Expression.
Add two more expressions to the activity. Although this was already added in the start date, we will update the activity with a note that an appointment was requested:
Text = "Requested Apopintment for:"
Control = AppointmentDate
Click Back to return to the action.
Click Close to return to the designer screen.
4. Save the appointment date in the opportunity
This is going to be a very similar process to the previous step.
Still in the same Customer Form screen, find the Submit button again and go back into its Click Event.
Select the fifth Call Routine, which has the internal note "Opportunity", and Jump to this action set.
You will be taken to the CreateOpportunity control. First, we will create the text for the Next Step field. Hover over the first action and click the ⊕ to add a new action so it will insert below.
Add the action Assign Value to Action Result. For the first dropdown under Assign the Value, select Expression.
Click Edit Expression.
For Starts with, type in text "Follow up on ".
Add a second expression and choose the AppointmentDate control.
Go Back and give the Action Result a name "resultNextSteps".
Great! Now that the action result is ready, scroll down and select the tenth action which is Insert records Into Table with an internal note of "recordOppID".
Change the NextStep field to use the value of the action result we just created: resultNextSteps.
And we're done. Click Close to return back to the designer screen.
We have finished saving all the information we need to. Test the screen, and if you are satisfied with the results, you will need to ensure the version is live.
5. Push updated Customer Form live
If you are still in the designer screen, save and close it to return to the Customer Form.
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! Feel free to test out your forms by using the public link to the forms.