Dynamic CMS Search and Filters (Simple)
Filters help your customers search for the exact content they are looking for.
In this simple example, we will show you how to quickly get started. It's perfect when you only need to search one object's records.
(Check out our advanced demo to search multiple objects here.)
  
 
Get started
Let's get started by pretending this page is part of a careers site where job seekers can search for the ideal role. We've added some basic filters and data for this demo. On the right you'll see our example form with filters and at the bottom you'll find the search results. Upon submitting this form, it will redirect back to this page with a modified URL and you'll see the filtered search results.

Below, you'll learn the details of how this works.
  
 
1. Add a form to the page with the object's fields as filters
First we created a custom object in Ontraport called 'Job listings'. Then we added custom fields like job title, department, experience, salary, education, location, and whether or not a degree is required for the role. Finally we added data to our job records.

After that, it was as simple as adding a new page with a form that has our job listing fields.
Add a form field to the page and pick the object you want to search
Then add your form fields and style them up
2. Add a submit button & open your form settings
Then we added a submit button and opened up the form's settings.

First we selected 'Custom URL' as the destination page and added the URL of this page. That's because we have our 'Job listings' dynamic block at the bottom of this page that will be used for our search results.
Edit your form settings and select Custom URL
Then we added a question mark at the end of the URL and started adding specific text in the URL of our form that will tell our block to show different results.
Edit your form settings and select Custom URL
 
 
3. Craft the URL 
Crafting the URL is the hardest part of this since you need to ensure it's crafted perfectly. However, it's just letters and symbols! So it's not THAT hard. ðŸ™‚

These custom URLs have four main parts that go together. A keyword, field, operator, and a value. When used together, they tell the block exactly which records should and should not be displayed. Here's what you need to know about each of them.


Keyword
The first part is the keyword. It tells the block WHAT we want to do. For example, if we use searchFilter, the text we add after will be responsible for filtering the results we see. However, we can also use sortBy and sortOrder and the text after those will specify the order of the results. One small thing to note is that all keywords are immediately followed by the =.

Here are main the keywords you need to know.
  • searchFor
    • This keyword searches all visible fields of the block's records. You can have multiple field value pairings and the results will match ANY of the pairings. (You can also customize additional text fields to search. Check out the advanced example for more information about that.)
  • searchFilter
    • This keyword searches the specific fields you specify for specific values. With filters... there much be a match with ALL of the fields. A good example is to think of shopping on Amazon. When you add filters, you would want to only see results that match all of the filters.
  • searchFilterALL
    • This keyword works very similarly to searchFilter. However, use this one to find results that match fields that have more than one value. For example, list selection fields like tags. List selection fields let your users pick more than one value. You might want to search for records that have 3 tags and all tags must be present. 
  • sortBy
    • This keyword is responsible for sorting your records by the specific field your choose.
  • sortOrder
    • This keyword works with the sortBy keyword. It tells the block whether to sort in ascending order or descending order.


Field
This one is easy! It's just the name of the field you want to search for or filter by.

Format: Field Name.
Example: Job title


Operator
The third part is the operator. The operator is the tool that compares the field and the value. For simple with text searches it's just a simple colon. It tells the block to find all records where the field you specified 'contains' the value that comes after the colon. For more advanced searches however you may want to find all the salaries that are above $60k. Here you would use the greater than symbol instead.

Here are all the operators you need to know:
  •  : (Colon)
    • This symbol means contains. This is used when searching text for other text that matches. (this is used for the majority of the field types)
  • Everything below is used for numeric/price/date fields. The only variables that must have an equals sign as an operator are the 4 sort variables.
  • = (Equals)
    • This symbol means there must be an exact match. This is helpful when you want to find fields that are an exact number for example.
  • != (Not equal)
    • This symbol will return results where the field specified before it is not equal to the value after.
  • > (Greater than)
    • This symbol means that the value that comes after is greater than that of the field before it.
  • < (Less than)
    • This symbol means that the value that comes after is less than that of the field before it.
  • >= (Greater than or equal to)
    • Same as above except it will also show the exact matches.
  • <= (Less than or equal to)
    • Same as above except it will also show the exact matches.


Value
Another easy one. This is just the value that you want to compare to the field that you specify before your operator (as mentioned above).

The only special thing you need to know here is that this is where you will put your form's merge fields. That's because when we publish the page and they are used in the URL, they will be converted to the values of the form that your customers add when they are searching.

THIS is how your customers are able to search and filter your content with their unique search criteria.


Together
When put together, our segments look like this:

Format: searchFilter=Field Name:[Field Name]
Example: searchFilter=Job Title:

The only keywords that don't have to follow this format is the sortBy and sortOrder. For sortBy you just need to specify the field name. For sortOrder, you just need to specify to sort by ascending or descending. You can also use the short values for those: ASC / DESC.

To search multiple fields and values using the same keyword, separate multiple segments with semicolons.

searchFilter=Field Name:[Field Name];Field Name:[Field Name]
 
 4. Finalize the URL
Here is our final search URL:
https://joblistingpage.safechkout.net/simple?searchFor=Job title:&searchFilter=Department:;Experience:;Location:;Minimum salary>=;Education:;Degree required:No


Let's break down what is going on here.

The first part is the page's URL:
https://joblistingpage.safechkout.net/

Then comes the ? so that we can tell the browser that everything that comes after are just URL variables... not something that are part of the URL.
?

Then we have the searchFor= keyword so that we can do a simple search of the job titles that match the value our customers enter for that field. Notice the value part looks like all other merge fields.
searchFor=Job title:

Then we have an & sign. This is what to use when you want to specify a new action with a new keyword. Use these every time before you add a new keyword.
&

Then we have the searchFilter= keyword so that we can also find all the other fields that have specific values.
earchFilter=Department:;Experience:;Location:;Minimum salary>=;Education:;Degree required:No

 
5. Save yourself money by using Do Not Track
With this current set up, a new search record will be added each time a user performs a search. While this can help provide great insight into what your customers are looking for, it can also lead to TONS of new records. Since Ontraport charges for object records, this can be expensive.

A trick you can use to prevent this from happening is to use the Do Not Track form setting. While you won't collect any data on your users, you also won't be charged for a bunch of new records you might not use.

Dive into form settings and enable Do Not Track to save money.
 
6. Publish, test & launch. Then dive deeper (if you like).
You are now ready to test out search and filtering! Publish your page and play around. When you are ready, launch it to your customers!

Then, when you want add on even more functionality, check out our advanced demo page with all sorts of additional use cases. Here are a few of them:

Search multiple blocks and multiple objects
Often times you may want to expand your search and filter multiple different blocks and objects with the same form. Check out the advanced page to see this setup in action.

Add fields to sort results
Do you want to give visitors the ability to sort their results after they've searched? This is doable with only a few extra steps.

Add a clear results button
If visitors don't find the results they're looking for on the first try, they might want to clear out their results and try again. 
 Example 
The way this works is simple. We take the values from the form fields below and put them into this form's destination URL along with special keywords.

On that page lives a dynamic block with all the records we want to search. This is our "search results" page.

When the page loads, the custom URL is read, & only the records that match the values in the URL are shown!
settings
settings
settings
settings
settings
settings
settings
settings
Search results
You can direct your customers to a new search results page or put your form on the same page as your search results.
In this example the results are on the same page.
settings
Clear results
[Block//Job title]

Level: [Block//Experience]
Department: [Block//Department]
Location: [Block//Location]

Requirements:
Education: [Block//Education]
Degree: [Block//Degree required]

Salary:
Minimum Salary: [Block//Minimum salary]

settings
PREVIOUS
settings
NEXT
[bot_catcher]