Customize a Lead Form

Overview

When creating a Lead Form, there are a few things you can customize. In this article, you’ll learn how to customize Lead Forms. For example, you can change the appearance of the Lead Form or update form labels. Remember, keep the form as simple and as clean as possible so website visitors can easily read and submit forms.

IN THIS ARTICLE

---

Steps to customize your Lead Form

Lead Forms are built using web languages of HTML and CSS. With a few tweaks, you can change the appearance of your form. The HTML elements structure the form and CSS styles the display. To customize a Lead Form, we suggest using a simple text editor, like Notepad. For a more robust text editor, you can use something like Sublime Text.

To customize a Lead Form:

Copy the Lead Form HTML from AMS+ and paste it into your text editor.

Make the changes to customize your form.

Save the document as an HTML file your desktop.

Preview your form in a web browser to ensure it looks as you’d expect.

Make sure to try your form out in a couple browsers to confirm consistent display.

If you are happy with your changes, upload the updated HTML to your website.

---

Change field labels

You can change labels on a form to tailor the language to an audience or make minor adjustments to labels. To change the labels on the fields, in the <form> section of the HTML for the Lead Form, update text for each item as needed. The for=’field‘ lets you know which field each area corresponds to.

Example: Change labels in bold to update to Spanish labels or up update button label to “Send message”.
<p><label for='firstName'>First Name</label><br /><input type='text' name='firstName'></p>
<p><button type="submit">Submit</button></p>

---

Customize the format and appearance

Here’s are few things you can do to customize the appearance of a Lead Form. Make sure to enter valid color values and keep other CSS styles intact. To locate hex color code values, check out the color-hex website.

Change the background & font color

To change the background color of your Lead Form, update the values under the .abLeadForm style:

Example: Changing the values in bold will change the background and font color respectively.
.abLeadForm { background:#FFF; color: black;}

Change the field color & font color

To change the field color and font color of your Lead Form, update the values under the .abLeadForm input & select styles:

Example: Changing the values in bold will change the background and font color respectively
.abLeadForm input[type="text"], .abLeadForm select {background: white; color: black}

Change button color

To change the color of the submit button for Lead Form, update the values under the .abLeadForm button style:

Example: Changing the values in bold will change the background and font color respectively
.abLeadForm button [type="submit"] { background: grey; color: white;}

Change form and field borders color

To change the border colors for your form and fields of the submit button for Lead Form, update the values under the .abLeadForm  and .abLeadForm input styles:

Example: Changing the values in bold will change the border color.
.abLeadForm {border: 1px solid #ddd;]
.abLeadForm input[type="text"], .abLeadForm select {border: 1px solid #ccc;}

Examples of Customized Lead Forms

---

Legacy components

Note: Legacy components include outdated features and functionality that may not be present in your account. This section is only relevant if your account has them.

Legacy components in this section:

• Adding a hidden field (Individuals only)

Adding a hidden field (Individuals only)

You can add hidden fields to a Lead Form’s HTML to assign values to a lead behind the scenes. This is commonly used to assign a servicing agent to new individual records created from Lead Forms. With a hidden field, you can specify the servicing agent or set the servicing agent randomly.

To assign a servicing agent, you first need an Agent ID. You can find the Agent ID by:

• Going to the Agents tab, and then selecting an agent. In the address bar of your browser, the ID is in the URL.
  

• Running the “Agents” standard report.
  

Once you have the Agent ID, create a hidden form field in the Lead Form HTML with the name/ID of "servicingAgentID".

Example: <input type="hidden" name="servicingAgentID" ID="servicingAgentID" value="AgentID">