Custom Lead Capture Form

Custom lead capture forms are created by you, using your own HTML, CSS or even a form builder.
This allows you to create your own signup methods for lead capture.

The methods to support custom forms provide a lot more flexibility and capabilities than the standard Lead Capture Form (LCF) Widgets, including the ability to use a large set of additional variables to control how the form posts and how to process leads.
Examples might include:

• Download our relocation pack
• Watch the home buyer video
• Get Property Alerts (and automatically setup the alert)

IMPORTANT NOTE ON FULFILMENT:
The purpose of the "lead capture forms" is to encourage consumers to SIGN UP for an OFFER that you make on the form (e.g. "Get Alerts", "Get a Relocation Pack" etc).
The lead capture forms will create an inquiry with a task so that YOU can fulfil the offer made!
For example, if you offer a "home valuation", the system will NOT generate a "home valuation" report for the lead, it will create a notification and TASK for you to take appropriate action.
The ONE EXCEPTION to this is the "Create Property Alerts" method explained below, that WILL create a property alert as well as register the lead.

TESTING SCENARIOS
When you test your forms it's VERY important to remember that a form submission creates a lead and sets a cookie that you are LOGGED IN (as a lead).
As the lead, you must remember to LOG OUT or delete cookies if you intend to repeat your testing as a "new" lead.
You should probably also log in to your Buying Buddy account and delete the Lead record too to that you can test options for "new" leads etc if set in your form.

Mandatory Requirements

To create a custom form that adds leads to your Buying Buddy account, the following are required.
NOTE: If you use a "form builder" then you must ensure that the form builder allows these options to be set.

• The form must have an "id=" set in the <form> tag
• The button to submit the form must use the prescribed onclick method
• Form Fields and values must match supported Buying Buddy fields

Topics

1. Create Your Form
2. Form Fields
3. Method to Show Search Results after Submission
4. Method to Create Property Alert
5. 2-Step Form Methods

Create Your Form

Design and create your form using any method you like. This can be done using custom HTML and CSS, or use a form builder.

You can use the code samples from our CodePen collections as a starting point.

Make sure you use the correct field names and correct values when creating form fields.
See Lead Import Actions and Fields for full details on all the available fields and values.

Required Fields

Form ID

The <form> must include an id="ID", where ID is a unique short unique name on this page that identify this form.
This value must be used with the onClick to submit the form (see below). For example:

<form id="Form-1" >

Email (required)

<input type="text" name="email" value="" data-required="true">

Name (required)

<input type="text" name="name" value="" data-required="true">

Or, you can specify First and Last names -

First Name (required)

<input type="text" name="first_nm" value="" data-required="true">

Last Name (required)

<input type="text" name="last_nm" value="" data-required="true">

For a complete list  of supported fields see the Lead Import Field Reference.

Additional Fields

Password (optional)

The password field can used on your form, allowing a consumer to choose a password

<input type="hidden" name="password" value="">

If this is not included then the password is auto-generated when the account is created and will be shown in the 'welcome email' that is sent to the consumer.

Adding Extra Input Fields

Add any other number of fields to your form. These fields will appear in the notification email you receive, and also in the Follow Up Task in your Buying Buddy account.

MLS criteria fields can also be specified as input fields, for example city names, zip codes, price ranges etc.

Submit Method

Form Submit (required)

• The method to submit the form must use an <input> element with type="button".
• The onclick statement must reference the "form ID" from the <form> element (see Form ID above) - in the example below this is: id="Form-ID"
• This submission <input> element must also have an onclick parameter as shown below. Make sure you format it correctly!

<input name="submit" type="button" onclick="MBB_LeadCaptureForm('Form-ID','');return false;" value="Submit">

Redirect After Submission

After the form is submitted, the default "success" action shows the My Account Dashboard welcome panel.

However, if you want to redirect your leads to another page either to show a success message or give them access to hidden content, then this method allows you to do this.

To redirect to a specific page after the form is submitted, change the onclick part of the submit button  to include the path to the redirected page.

<input name="submit" type="button" onclick="MBB_LeadCaptureForm('Form-1','/thanks.html');return false;" value="Submit">

Mandatory Field Validation Messages

Adding data-required="true" to the input field will make an input mandatory and will show a warning error if the form is submitted with no value.

<input type="text" name="email" value="" data-required="true">

Lead Capture Options

The following additional methods allow you to add special controls to your forms.
For a complete reference of all fields and values see the reference table at the end of this article.

Set Form Name (optional)

The Form Name variable allows you to add your own label to the "Follow Up Task" that is shown in your Buying Buddy account and alerts sent to Users. This is a simple way for you to distinguish the type of inquiry so that its easier for you to follow up.

form_nm

<input type="hidden" name="form_nm" value="Request a Relocation Pack">

Assign to User / Agent (optional)

The User's Lead Referral ID ( mbbagent variable) can be used to assign the form submission to a specific User in your Buying Buddy account. For example, if you wish to create a "Contact Me" form that contacts a specific agent, then add mbbagent input with the Lead Referral ID value.

If you have a multi-user account, then the Referral ID can be found on the User's profile page (e.g. "qGTFfb").
**NOTE** The User's Lead Referral ID is not the MLS Agent ID.

mbbagent

<input type="hidden" name="mbbagent" value="xxxx">

Send Welcome Email (optional)

By default when a "new lead" fills out a Lead Capture Form they will receive a welcome email.
You can choose to NOT have the welcome email automatically sent by including this hidden field.
We suggest you use this in combination with the "campaign" setting below.

welcome_email

<input type="hidden" name="welcome_email" value="false">

Assign a Campaign (optional)

When new leads register then the "default campaign" will be attached if one is specified.
However, this campaign variable allows you to assign new or existing leads to an alternative drip email campaign from your account. They will then automatically receive emails from that campaign. You can obtain the "campaign id" from the listing of the campaign details in Leads and Contacts.

There are two cases:

• For New Leads: name="campaign" value="{campaign_id}"
  We suggest you combine this with the "welcome_email" setting above.
• For Existing Lead: name="campaign_existing" value="{campaign_id}"
  If this is not specified, then the standard system auto-responder will be sent to the lead as a confirmation.

campaign
campaign_existing

<input type="hidden" name="campaign" value="xxxx">
<input type="hidden" name="campaign_existing" value="xxxx">

Additional Processing Methods

Show Search Results

This method will register the lead and then pass MLS criteria to a web page that shows search results based on input fields in the form.
The MLS criteria can be set as hidden input fields, or these can be fields that users fill in.

Add the following to your form:

mls_id (Required)

In addition to the standard Required Fields, the Buying Buddy "mls_id" must be specified.

<input type="hidden" name="mls_id" value="xxxx">

MLS Criteria

Add additional fields such as city name, zip code, price or any other MLS criteria you want to this form. These fields may be hidden with pre-set values, or displayed.

Use the Wizard to discover valid field names and values for your MLS. Do not guess!

Redirect After Submission

Edit the submit button so that the onclick redirect parameter goes to a page (e.g. /listing-results ) that includes the Buying Buddy Results widget.

<input name="submit" type="button" onclick="MBB_LeadCaptureForm('Form-1','http://www.domainname.com/listing-results');" value="Submit">

The submit button will then redirect to the specified page, the results widget will display results based on the criteria collected in the form, and a new lead will be created in your account.

Create A New-Listing Alert

This method will create a new-listing alert for the lead using MLS criteria set in the form.
The MLS criteria can be set as hidden input fields, or these can be fields that users fill in.

Add the following to your form:

IMPORTANT
Using the Lead Capture Form method to create a New-Listing Alert is similar to creating a Custom Search Form in that valid search criteria need to be specified. However, in this case we are using the search criteria to create a "search alert", rather than "run a search". You should review the method for creating a Custom Search Form as this will help you understand the search criteria you may specify and rules such as "always include mls_id".
Use the Widget Wizard to create a sample filter to discover the correct mls_id and other field names and values.

NOTE: You must have MLS search values in your form or the saved alert will be meaningless!

mls_id (required)

The Buying Buddy "mls_id" code must be specified.

<input type="hidden" name="mls_id" value="xxxx">

Save New-Listing Alert (required)

Use the following hidden field (save_custom_search) to ensure the form creates a New-Listing Alert:

<input type="hidden" name="save_custom_search" value="1">

This creates a New-Listing Alert for the lead to be sent out daily, with a title of "First Saved Search" and an expiration date of six months in the future.

Alert Options

The default property alert settings can be modified with the addition of extra hidden fields in your form.
Note: These fields are optional.

• name="saved_search_nm" value="{name_of_search}"
  This option allows you to give the saved search/alert a name.
  {name_of_search} = any text string.
  If not specified, the search alert name will be "First Saved Search".
• name="frequency" value="{frequency}"
  This option allows you to set the frequency of the alert.
  {frequency} = instant | daily | weekly | monthly.
  The default value if not specified is "daily".
• name="duration" value="{months}"
  This option allows you to set the duration of the alert in months - i.e. how many months the alert executes.
  {months} = any number, from 1 to 18.
  The default value is 6.
  
  Or: name="end_dt" value="{date}"
  This alternative option to set the duration allows you to specify the end-date for the alert, e.g.alert runs until 20/05/17.
  {date} = yy-mm-dd
  The name="duration" field will always take precedence over name="end_dt", if both are set.
  If you choose to use this then you may want to include a user interface to allow the user to set an "end date",
  or, you could set this automatically using code (php, JavaScript etc).

<input type="hidden" name="saved_search_nm" value="test search">
<input type="hidden" name="frequency" value="weekly">
<input type="hidden" name="duration" value="{months}">
<input type="hidden" name="end_dt" value="01/20/18">

2-Step Form - General Method

The two step process is usually a method for processing an initial simpler landing-page / squeeze-page which then directs to a step-2 page where additional information is requested. For example, in step-1, we ask the lead to specify criteria.. and continue to step-2 where personal contact details are requested - and the form is submitted.

This method uses JavaScript and special classes to implement a two-step form method.

The 'next' button will show the step-2 panel.
Clicking the 'submit' button will submit the form and show the success panel (or redirect if set).
NOTE: Only one version of the two step form can be used on a single page.

Form ID

The Form ID must be set as MBBv3_StepForm.

<form id="MBBv3_StepForm">
...
</form>

Step-1 Wrapper

Put any form or html for Step 1 inside a wrapper that has the class bfg-step1-form

<div class="bfg-step1-form">
...
</div>

Step-2 Wrapper

​Then, put any form or html for Step 2 inside a wrapper that has the class bfg-step2-form

<div class="bfg-step2-form">
...
</div>

Previous / Next Buttons

The 2 buttons for previous and next must include the following classes:
bfg-2step-next and bfg-2step-prev

<a href="#" class="bfg-2step-prev">Previous</a>
<a href="#" class="bfg-2step-next">Next</a>

Submit Button

The submit button must include this class: bfg-2step-submit.
Styling can be done using the bfg-btn classes or you can apply your own.

There are two alternative methods for the submit button that determine the success page to be shown.

1. Show 'success message' on the same page

The default option will simply update the contents of the current page and show a standard success message.

<a href="#" class="bfg-2step-submit">Submit</a>

2. Redirect to a new page

The redirect method will redirect to a URL that you specify.
This can be used to show your own 'success message' - or - should also be used of you want to redirect the user to a search results page.
To implement this method you need to add a data-url="..." parameter to the submit button.

<a href="#" class="bfg-2step-submit" data-url="[your-own-success-page-url]">Submit</a>

For a complete list  of supported fields see the Lead Import Field Reference.

Examples

Examples of Custom Lead Capture Forms are shown in our CodePen.
Learn about our CodePen collection of Custom Lead Capture Forms.