Custom Lead Capture Forms allow you to create your own signup methods for lead capture.
This method provides 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.
Use your own HTML and CSS to create your own design, styling and specific form elements and actions.
Topics
- Create Your Form
- Form Fields
- Method to Show Search Results after Submission
- Method to Create Property Alert
- 2-Step Form Methods
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 LOGOUT 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.
Create Your Form
Design and create your Form using your own HTML and CSS.
If you use the code samples from our Codepen collections, then these mostly utilize CSS from the Buying Buddy plugin.
To create a form you need to specify form controls AND input field names
- Required fields
- Submit method
- Optional fields
- Hidden fields
Make sure you use the correct field names and correct values when creating form fields.
Make sure you also specify all the required parameters.
There are several parameters that control how the form flows. Other input parameters collect values that are imported to the LAC.
- form control - settings specific to the control of your HTML form
- Form ID
- Form Submit
- Redirect after submission
- Form validation
- input api - these are fields that will import data per the API Import reference
Form Fields
See Lead Import Actions and Fields for full details on all the available fields and values.
Required Fields
Form ID
Include 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="" >
NOTE: name="email_txt" is also supported for backwards compatibility with older forms.
Name (required)
<input type="text" name="name" value="">
Or, you can specify First and Last names -
First Name (required)
<input type="text" name="first_nm" value="">
Last Name (required)
<input type="text" name="last_nm" value="">
For a complete list of supported fields see the Lead Import Field Reference.
Submit Method
Form Submit (required)
- The method to submit the form must use an
<input>tag with type="button". - The onclick statement MUST reference the Form ID from the
<form>tag (see Form ID above) - in the example below the form id="Form-ID" - This submission
<input>tag 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">
Your form must always collect email and we strongly suggest you make this a required input field (see Form Validation below)
Redirect After Submission (optional)
If this value is NOT specified then there is a default "success" action. With version 3 Widgets, this will show 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">
Optional Hidden Fields
The following form fields are all "hidden" fields that 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 Leads and Contacts 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.
<input type="hidden" name="form_nm" value="Request a Relocation Pack">
Assign to User / Agent (for multi-user accounts - 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.
<input type="hidden" name="mbbagent" value="xxxx">
Send New Lead a 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.
<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.
<input type="hidden" name="campaign" value="xxxx"> <input type="hidden" name="campaign_existing" value="xxxx">
Other Optional 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 will be auto-generated when the account is created and will be shown in the 'welcome email' that is sent to the consumer.
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 Leads and Contacts account.
MLS criteria fields can also be specified as input fields, for example city names, zip codes, price ranges etc.
Form Validation
Form validation will make any input fields mandatory by adding data-required="true" to the input field.
<input type="text" name="email" value="" data-required="true">
Method to Show Search Results
This method will redirect the user to a specified page that shows search results based on input fields (including hidden fields) in the form.
Required Fields
mls_id (Required)
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 may be input fields or hidden fields.
First Name, Last Name and Email Address are required fields.
Use the Widget Wizards to discover valid field names and values for your MLS. Do not guess!
Submit - Redirect
Edit the submit button so that the onclick redirect parameter goes to a page (e.g. /results ) that includes the Buying Buddy Results widget.
<input name="submit" type="button" onclick="MBB_LeadCaptureForm('Form-1','http://www.domainname.com/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.
Method to Create Property Alerts
An additional capability of the LCF form is to automatically create a property alert for the lead. By specifying search filter values (can be hidden) such as city, price range (or any MLS fields available for a filter), then it is possible to also automatically create a Property Alert for the Lead when the form is submitted, based on those criteria.
Important: Using the Lead Capture Form method to create a Search 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 Property Alert (required)
Use the following hidden field to specify that the search criteria in the form are to be used to create a property alert:
<input type="hidden" name="save_custom_search" value="1">
This will then create a Just Listed Property 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 to the Custom Lead Capture 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">
Method for a 2-Step Form
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
Put any form or html for Step 1 inside the bfg-step1-form wrapper:
<div class="bfg-step1-form"> ... </div>
Step-2
Then, put any form or html for Step 2 inside the bfg-step2-form wrapper:
<div class="bfg-step2-form"> ... </div>
Form validation
Form validation should be used on mandatory fields (such as email).
This will make any input fields mandatory by adding data-required="true" to the input field.
<input type="text" name="email" value="" data-required="true">
Previous / Next Buttons
The 2 buttons for previous and next must include the following classes:
bfg-2step-next and bfg-2step-prev
Styling can be done using the bfg-btn classes or you can apply your own.
<a href="#" class="bfg-btn btn-bg3 bfg-btn-lg bfg-2step-prev">Previous</a> <a href="#" class="bfg-btn bfg-btn-lg 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-btn bfg-btn-lg 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-btn bfg-btn-lg 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.
ARCHIVE Method for a Two Step Form
The method is depreciated and should no longer be used.
It is shown here for reference only.
Step-1
The initial form is created as a normal "custom search form". In this step, for form collects the initial fields
You must specify the mls_id (usually a hidden field)
You may include any criteria as actual fields or hidden values.
To progress to step-2, use a special onclick function (MBBv3_SubmitCustomSearchForm) shown below, where /page-2/ is the page address of step-2.
<input name="submit" type="button" onclick="MBBv3_SubmitCustomSearchForm('form-id','/page-2/');" value="Continue!">
Step-2
This second step has all the additional fields in it to complete the processing of the form.
The submit function should use the normal onclick for a custom lead capture form.
And you may also include the Save Search Alert Options as described above too.
Form submit method:
<input name="submit" type="button" onclick="MBB_LeadCaptureForm('Form-ID','');return false;" value="Submit">
Redirect after submission:
<input name="submit" type="button" onclick="MBB_LeadCaptureForm('Form-1','/thanks.html');return false;" value="Submit">
Examples
Examples of Custom Lead Capture Forms are shown in our Codepen.
Learn about our Codepen collection of Custom Lead Capture Forms.