Custom Forms and Sample Code on Codepen

The MBB Codepen Collections have examples and samples of HTML, CSS (and JavaScript code where used) for use by Webmasters in your own websites in addition to MBB Widgets.

These Codepen examples are to help you with layout and design. Make sure you refer to the appropriate support articles to ensure that the forms you create function as desired.

Read the comments included with the sample code for guidance on how to edit.

NOTE: Based on feedback, the Quick Search widget has been updated to provide many of capabilities requested and used with custom search forms.

Support for Codepens can be requested by submitting a help ticket.

PLEASE NOTE: Note these code samples are NOT WIDGETS.
They are blocks of HTML code that DO REQUIRE modification by you to insert and verify appropriate field names, field values, API keys, MLS codes and so on.
IMPORTANT: The code samples provided include references to example data and the demo mls. You MUST ensure that you review all form parameters and fields and any API-Authcodes, MLS Name and field names used in any JavaScript to ensure they are configured correctly for your account and MLS. See the support articles for Custom Search Forms and Custom Lead Capture Forms for complete technical guidance and instructions.
SAMPLES CONTAINING JAVASCRIPT: Samples with JavaScript may be more complex and require more technical knowledge.

The current codepen collections are:

1. Collection of Buying Buddy Custom Search Forms
2. Collection of Buying Buddy Custom Lead Capture Forms
3. Collection of Buying Buddy samples not related to forms

If using a WordPress site then you may need to utilize methods that allow addition of raw HTML to your WordPress pages and posts.

Requirements

Ensure the MBB plugin is installed on web pages as these code samples use the core MBB CSS and JavaScript library.

jQuery

ONLY IF you are using any of our JavaScript custom form helpers (i.e. there is sample JavaScript code) them you MUST have jQuery loading.

If your website does not have jQuery loading then you will need to add it.
Additionally, you may need a "jQuery wrap" around relevant JavaScript (see below).

There are many hosted libraries available, for example, Google provides such libraries at

https://developers.google.com/speed/libraries/#jquery

This is Google's hosted library for jQuery if needed:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

--- add this line of code in the same place you added the MBB Plugin JavaScript for your site.

Test for jQuery?

If you are unsure if your site has jQuery then you can load this script on a page and check the message that is shown.

<script type="text/javascript">
window.onload = function() {
    if (window.jQuery)  { alert('jQuery is loaded'); }
    else  { alert('jQuery is not loaded'); }
}
</script>

jQuery Wrap

If your website is WordPress OR you are using the my-buyingbuddy.js include file then you can remove this jQuery wrap from the sample code.

The following applies if you site is NOT WordPress and you are NOT using the my-buying-buddy.js file include.

The jQuery statements shown in the sample JavaScript code (and shown below) must be used.

Because Codepen is not WordPress, all JavaScript samples included in Codepen are shown WITH this jQuery wrap where required.

The wrap code looks like this:

jQuery(document).on("mbb-widgets-loaded",function(){

...

});

<div id=MBBv3Form...> wrapper

All HTML code should be enclosed inside this wrapper that triggers the application of the MBB CSS classes.

This wrapper that must be an ID that starts with MBBv3Form e.g. the following are all acceptable variants where you may want to have multiple forms on a page.

• <div id=MBBv3Form">, <div id=MBBv3Form-1">, <div id=MBBv3Form_myform">, <div id=MBBv3Form7">

Additional CSS classes and JavaScript are shown only where needed.

Remember: You can create custom forms using any HTML and CSS, you are not obliged to use the MBB CSS
Our Codepen samples utilize the MBB CSS library to assist with your layouts.

Parameter: mls_id

The "mls_id" is the ID used by the MBB system to identify YOUR MLS and this is used in filters and API calls.
When used in the sample code, the reference will be to our Demonstration MLS, and the mls_id for this MLS is "demo".
You'll see it used in ways like this: mls_id:demo or /mls/demo/ or mls_id=demo

To determine your MBB "mls_id", go to your Leads and Contacts account and click "Widgets > Display Properties with Widgets" in the left menu. Go through all the steps to get to the last page where the code is shown. Look for the part that says filter="mls_id:xxxx" - the "xxxx" part is YOUR MBB mls_id.
There are a variety of formats used - examples include: "co90", "1011", "denver" "mn287" etc

So, if your mls_id is "cy123" then where you see /mls/demo/, change this to be /mls/cy123/ etc.

Parameter: API-Authcode

Your API-Authcode authenticates your use of the JavaScript code on your "authorized website(s)" for API calls.

The sample code references a demonstration account and the auth_key for the demo account is used in the JavaScript like this:

auth_key:728iu4y49ru-7dbmdews11z

Your API-Authcode can be obtained from your Leads And Contacts Account Settings.

To get the API-Authcode - login to your Buying Buddy account and go to Account > Account Settings. Scroll down to see your account API-Authcode.

Other Parameters

All forms will contain various form fields. You must review and ensure that all fields names, values and options are set correctly for your Account and MLS.

See the support articles for Custom Search Forms and Custom Lead Capture Forms for complete technical guidance and instructions.

HTML Code

Copy and use HTML with CSS classes shown.

FORM Field Names and Values

Where FORMS include MLS search fields and values, always check these correctly match the field names and values that are used by MBB Filters for your MLS.

The sample code references fields and values from the Demonstration MLS.

Values and Names are easily checked by either inspecting the source code of the standard search form widget, or using the "Widget wizards" (either the Display Properties wizard or the Create Custom Search links wizard) - and inspect the generated filter="..." to discover field names and values.

CSS Code

Most of the CSS shown in the forms comes from the core MBB CSS library that is part of the MBB Plugin.

Any additional CSS is shown in the CSS section.

Feel free to create your own overrides and rules.

Stopping Spam with the CAPCHA

You may optionally include a mandatory CAPCHA form on any form by simply adding a few lines in your HTML layout.

This is essentially set using an IMG and an INPUT field, for example.

See the code in Codepen

Look out for how this is used on FORMS In codepen if you wish to

JavaScript Code

Most of the JavaScript used in the forms comes from the core MBB library that is part of the MBB Plugin (and is not visible).

Any additional JavaScript is shown in the JavaScript section.

Copy the JavaScript code and place in the <head> section of pages.
You MUST enclose between <script> and </script> tags.[