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.  

Unfortunately, customizing the app is not a novice undertaking, and this article is here just to get you started. Once you understand the basics of what is involved, then hopefully you can further customize the Web to Lead app.

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.

If you were to add a brand new field to the screen, then it would appear 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.

In our example scenario, we have a few web to lead forms, but we want only one of our forms to collect an appointment date and the lead's website. These details will be put into the activity and the opportunity that is generated from the web to lead form. 

In the below image, you can see the two new fields added to the bottom of the form.

Again, to iterate, we want only one of our Web to Lead forms to show these two fields. Method:CRM should know to hide or show these details based on the web to lead configuration form set up.

This means we need to change the New / Edit Form to allow a user to select a field to be shown or hidden. In the image below, I have added a section to the New / Edit Form screen:

However, before I can add this section, I will first need a way to store the user's choice about requesting appointment details.

In order to do this, we will need to:

Due to the advanced nature of this, we will assume you understand the basics of customization.

The first thing we need is a way to store the preference of whether or not to show the appointment details.

So we will create a new field within the LeadForms table, which the New / Edit Form screen is built off of. 

1. Click your circle icon in the upper right and then go to your Account Settings. 

2. Select the Tables & Fields option.

3. Search for the table LeadForms and then select it. 

4. Add a new field called ShowAppointmentDetails.

5. Change the new field's type to YesNo.

6. Hit Save to create your new field.

Great, now we can add this new field to the New / Edit Form screen.

Now that we have created the new LeadsForm field, we can add it to the New / Edit Form screen. 

In the below steps, I will customize the screen and add this new section to better fit my preferences. However, add the new section in a place which makes sense for you.

1. Go to the Web To Lead App and select ⊕ New Form to get to the New / Edit Form screen. 

2. Customize the screen. It will prompt you to make a copy so do so.

3. The screen will be in Published mode. You will need to click the Edit button first, where you will be prompted to make a copy.

4. You will be prompted to make a copy, so click Create copy.

5. Drag in a new Section at the bottom of the screen and name it secCustomFields. 

6. Move the section secCustomFields up until it is above secFormContent. 

7. Add a row to secCustomFields. 

8. Drag in a text object into the top row and change its text to "Customize What Fields are Shown". 

9. From the fields, drag in ShowAppointmentDetails. This was the new field you created in the previous section. Caption it "Request Appointment Details".

10. Below, are some styling suggestions. Once you are done styling this new section, Save and Close the screen.

And that's it. Function wise, that's all you need to do on this page, however, you will need to style it. Change the style, color, border, and padding to what fits best. 

For reference, here are the parameters to style it as in the above image.

Now that the preparations have been made to the New / Edit Form field, we can begin the customizations on the actual web to lead form itself.

There are a few ways to find this screen, however, we can access it from the New / Edit Form screen. 

1. On the New / Edit Form, go to the bottom and select Preview. (The preview requires a name for the web to lead form, so make sure you put a test one in. You may wish to remove this web to lead form later on though.)

2. Customize this Preview screen. You will be prompted to copy the screen, so do so.

3. We're going to put our new section right above the Notes. Right click on the row with the Notes field and select ⊕ Insert Above. 

4. Drag into this new row a new section. Call it "SectionAppointment" and set its Left and Right Padding to None.

5. 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. 

6. Save this but do not close the screen yet. 

Note that the fields have been embedded in a new section. This will allow me to hide the two new fields simply by hiding the entire section. Much easier than hiding each field individually. 

Next up, we will add in actions to display or not display this new section.

Now that we've added the new fields, we will need the form to obey the configuration we set up back in Section 2: to display or not display this new section.

1. Drag the ShowAppointmentDetails field into the section SectionHiddenContent. This makes this field available for your actions.

2. At the top right, select the page icon to get to the Screen Properties for the Customer Form screen.

3. Expand the Actions and click the Active Record Change event. There should be two actions within here already.

4. 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.

 5. On the right, search for Conditional Statement. and add it in. You will note that it is indented and within the Else statement.

6. Click ⊕ Add a condition. Configure this condition to test if ShowAppointmentDetails is equal to Yes. Enter in the internal notes "ShowAppointmentDetails = Yes".

7. Hover over the second If...then and press the ⊕ (plus) icon to add an action within it.

8. Search for the action Show/Hide Controls and add it. Configure it to Show the SectionAppointment section. Remember to add an appropriate Internal Note.

9. Over over the second Else and press the ⊕ (plus) icon to add an action within it.

10. Search for the action Show/Hide Controls and add it. Configure it to Hide the SectionAppointment section. Remember to add an appropriate Internal Note.

11. 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. 

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.

1. Still in the Customer Form screen, find the Submit button, and go into its Click Event.

2. Add in an action before the Call Routine actions that creates the Customer, Activity and the Opportunity. Hover over Enable/Disable Controls and select ⊕ (plus) to add an action after it. 

3. Search for Character Function and add it.

4. Configure the Character Function 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 some header text.

5. Before closing this action set, make sure your Character Functions action is properly configured and above the Call Routines for Customer, Activity, and Opportunity.

6. Close the design screen. You are done customizing. 

And we're done! Almost. One final thing we should do before testing, we have to ensure the version is live. 

Now, if you were to test this, it would probably work. However, if you were to customize the Customer Form screen again and make ANY changes to the screen, it would stop working. And this is because every time you make a change to this screen, you will need to make the new version live. 

So right now, we will have you get into the habit of making the version live every time you make a change to the Customer Form. 

1. Go to the Method:CRM Dashboard, and Manage the Web To Lead App.

2. Find your new Customer Form(2) screen. This was the copy automatically created when you started customizing the web to lead form. Select the vertical ellipsis ( ⋮ ) and then select Versions.

3. Now, you may only have one version on this screen, the Live Version. If that is the case, then you're set and things should work. However, if there is a Test Version, you can see when it was last modified, and if it coincides to when you were working, this is probably the version you were editing. You will need to make this version live by clicking Set Status. 

4. On the next screen, you will set the status and set it Live for All Users.

5. Click Save, and now your new version is the Live Version, and the original version is in Archived Versions. You can now revert your screens back and forth depending on the circumstances. 

And that's it! Now we are done! Feel free to test out your forms by using the public link to the forms. 

Of course, there are a number of improvements that can be done to this, but hopefully this will give you a start on how to customize the web to lead form to include custom fields.