All Collections
Leads
Customizing Lead Forms in the Interface Builder
Customizing Lead Forms in the Interface Builder

The Interface Builder makes it easy to extend your lead forms with location data and custom fields

Michael Fatica avatar
Written by Michael Fatica
Updated over a week ago

MetaLocator is a powerful lead generation tool. Your locator can allow your visitors to contact your locations directly via email. These are called Leads in MetaLocator. MetaLocator interface templates come with a Lead Generation form by default, which includes name, email and message fields. This article discusses the options available to extend the form.

Editing the Lead Form

When using the Interface Builder, you can modify your Lead Generation forms by clicking the toolbar as shown:

When you edit any fields in the Lead Form, the system will automatically display the lead form as a convenience to avoid opening the form each time a change is made. This behavior only occurs in the Interface Builder as a convenience while editing the form.

Adding Fields & Data

You can add two types of fields to the lead form. First, you can add location fields that represent location content, like address, city, state and title. These display the location data just as in the results templates and are helpful for repeating location-specific data on the lead form. Secondly, you can add lead form fields. These are form input fields which allow you to gather data from your user.

To add a field to the Lead Form, click Add Field as shown below:
โ€‹

Custom Fields

Notice there is a section of the Field Name list for location data fields, like Link and Custom Fields. There are 40 Custom Fields available to add to the Lead Form. To add a custom field, choose the next available Custom Field. Choose Custom 1, followed by Custom 2 and so forth as additional custom fields are required.

In this example, we have created a custom field called Favorite Color and adjusted related settings as shown below:

Just as in the results templates, the field ordering can be controlled by dragging fields up and down in the list of fields on the left.

Country & State List

When requesting the Country and State from the user, MetaLocator includes two purpose-built fields, Country List and State List. Country List is shown below:

It presents a dropdown of countries to the user which works dynamically with the State List field by automatically filtering the state list based on the user's chosen country. Shown here with United States,

And again with Australia

State List and Country List work together or either can be included alone.

The Country List can also automatically localize to the active language, shown here with the German Language

The Country List includes an option to default to the user's IP-detected country as shown:

The values chosen by the user can be saved in a custom lead field as indicated by the "Target Custom Field" setting. Shown below as displayed under Leads > View:

Custom Lead Form Field Templates

More advanced plans have access to the Template Editor as shown below. In that editor Handlebars templates can be modified to include custom output including conditional logic, loops and hidden fields.

In custom templates, the input name attribute must match the custom field chosen, as shown below:

<textarea id="custom2" name="custom2"></textarea>

The system can also populate location data values in the handlebars templates, such as this text input that pre-populates the location name.

<input type="text" id="custom2" name="custom2" value="{{name}} is great!" />

The result is shown below, notice the dynamic replacement of {{name}}

Custom Checkboxes and Select Fields

Creating checkbox, radio and select inputs is a matter of updating the template to include the required form HTML.

This is an example of 3 checkboxes

<span data-element-name="custom_2">

<h6>Favorite Color</h6>
<div>
<input type="checkbox" value="Red" name="custom2[]" id="customRed">
<label for="customRed" class="form-check-label">
Red
</label>
</div>

<div>
<input type="checkbox" value="Blue" name="custom2[]" id="customBlue" value="Blue">
<label for="customBlue" class="form-check-label">
Blue
</label>
</div>

<div>
<input type="checkbox" value="Green" name="custom2[]" id="customGreen" value="Green">
<label for="customGreen" class="form-check-label">
Green
</label>
</div>

</span>

Which displays as follows:

Notice that each input value is called "custom2[]". This will be interpreted as a list of items by MetaLocator and will display as a list in the Lead Email Body Template when included as

{{template_item.leadcustom2}}

Drop-down lists are built in a similar fashion, notice below we have customized the template for the Custom 1 field to display a drop-down containing the values 1, 2 and 3.

The drop-down displays as shown below:

This will be interpreted as a list of items by MetaLocator and will display as a list in the Lead Email Body Template when included as

{{template_item.leadcustom1}}

Those values will appear in the email as shown below:

Custom field values are displayed in the back-end as shown below by clicking Leads, then the View butto

Managing Leads

Each time a user completes this form, the data will be stored in the Leads as shown below. Read more about our Lead system here.

Did this answer your question?