Tutorials

You've built a form in Formidable Pro and your users have been entering data. Now you want to provide your site's visitors with a way to search through that data and display a result set. If you've become frustrated looking for a solution, then you've come to the right place. In this tutorial, I'll build upon my previous Build a Better Guestbook tutorials to teach you how to create an Advanced Search Form with Formidable Pro. Before we begin, please make sure you've watched Guestbook Tutorial Part 2—The Custom Display. We're going to be modifying the custom display as well as building a search form.

Transcript

Download Transcript

Search and Display Results with Formidable Pro

Hello, this is Victor Font.

Today we're going to learn how to build search functionality using Formidable Pro. In my previous Formidable Pro tutorials, we learned how to build a better guestbook and display its entries using a custom view. Today, we're going to build on those lessons and take another step forward by searching for specific data entries.

Now granted, a guestbook may not be the best example for using a search form, but it’s the concepts and techniques that are important to understand because they can be applied to any data captured by a Formidable Pro form.

Before we get started, please let me take care of a housekeeping chore.

This lesson is the direct result of questions that were sent to me from Edward Jerome of the5buyinghabits.com. So please, remember to thank Edward when you visit his site.

Since this is an advanced tutorial topic, I'm going forward under the assumption that you already know how to create a form and a custom view using Formidable Pro. If you don't, please make sure you visit my previous tutorials to learn about these two important topics. I shall not be walking you through those steps again in this lesson.

Create the Search Form

To get started, create a duplicate of your target form. For this lesson, I'm duplicating my original guestbook form. We'll modify this duplicate to create our search form.

First, change the title to Search, remove any description that may be there or add your own search instructions.

Delete any fields that you don't want to display on the search form, like the Captcha and admin approval. Also, remove any radio buttons or checkboxes. If you really want to keep them you can, but it will require custom coding to make them work as search fields. Custom coding is beyond the scope of this lesson.

If there are any required fields copied from the original form, remove that restriction by unchecking the required checkbox. It's not necessary to have required fields on a search form.

Click the Create button to save the new Search form.

Settings Page

Saving the new search form automatically brings you to the settings page.

Change the text for the submit button to Search

Change the Action After Form Submission to Redirect to URL. I've prepopulated the URL. We'll revisit this in a moment for a full explanation.

If you are using the Formidable Pro math captcha add-on, check Do not include the math captcha with this form.

Also check Do not store any entries submitted from this form. It's not necessary to store search form entries.

Click Email Settings on the left menu

Remove any email addresses from the Email Recipients field. If you don't leave this field blank, you'll get an email every time a user searches for data.

Update the form.

Earlier, I mentioned that we would revisit the Redirect to URL setting. For this portion of the lesson, I'm going to turn control over to a very distinguished computer science professor.

Professor MacKnuttee

Thank you Victor!

Welcome to Query String Theory 101. I am Professor MacKnuttee.

Let's take a look at the query string entered into the Redirect to URL setting for the search form.

There you have it! It's quite simple, isn't it?

Hmm... Maybe that wasn't quite so easy after all.

Perhaps it would help if I explained query strings.

A query string is a set of characters input into a computer or Web browser that are sent to a query program to recover specific information from a database.

Simply put, a Query string is a request for information from a database.

A typical URL containing a query string is expressed as:

http://Domain/QueryProgram/?QueryString

The question mark is used as a separator and is not part of the query string

The main use of query strings is to capture the content of a HTML web form.

When a form containing the fields lname, fname and email is submitted, the fields are encoded as a query string:

lname=value1&fname=value2&email=value3

...and so on and so forth...

There are three more things you need to know about query strings:

1. The query string is composed of a series of key-value pairs.
2. Within each pair, the key name and value are separated by an equals sign, '='.
3. Each pair in a series is separated by an ampersand, '&'

So there you have it. You now know everything you need to know about query strings.

Well I can see by the clock that my class is just about over. It's time for me to turn this lesson back over to Victor.

Ahem, ...well, thank you Professor McNutty. Now that you understand how query strings function, let's dive into how they work with your Formidable Pro search form.

Dynamic URLS

For our search form to work properly, Formidable Pro requires that we redirect the output of the search form to a dynamic URL.

A Dynamic URL is the URL of a WordPress page that runs the actual search script.

The page that houses our custom view executes the search script. We haven't created that page yet, but we will shortly.

The query string delivers the filtering parameters to the search script so that the correct information displays on the search results page.

When a user clicks the form's search button, the URL is redirected to your search results page. The long line of characters attached to the URL is the query string.

In Formidable Pro, there are two ways to build the dynamic URL. You can use a standard format or you can use a conditional construct, which is unique to Formidable Pro.

The difference being that with the standard dynamic URL, if a user chooses to leave one or more search fields empty on the search page, the parameters will still be passed to the query string. Using the conditional construct, empty fields are not included in the query string.

Build the Dynamic URL

Let's go ahead and build the actual dynamic URL for our search page. I'm going to use the conditional construct because it results in a cleaner looking query string.

Since we are building a conditional query string for this dynamic URL, click on the Conditionals tab in the menu on the right.

Notice that all of the fields from our search form are listed here. We'll be inserting all of them in order into our query string.

First, let's start by typing the URL.

The search-results page doesn't exist yet. We'll create that in another step or two. I promise, the hard part is over. We're going to move fast from this point forward.

Let's add our conditionals in the following order Last, Name, Email, Country and Comments.

Formidable Pro inserts placeholder text between each conditional statement. We're going to replace the phrase "Conditional text here" with your query string's key-value pairs.

The key name can be anything you want it to be. It does not have to be the same as the field names on your form, but they should be something instantly recognizable to you.

Also, click the Insert Fields tab on the right. We'll insert the fields as the values for each key-value pair.

The key name for my last name field is lname. Remember from our query string class, that the first key-value pair follows the question mark. Each additional key-value pair is preceded by an ampersand. Let's finish our query string by replacing each placeholder text.

That's it! This search form is done.

For reasons that will shortly become apparent, we want to duplicate this search form, change the duplicate form's title to Search Again, change the submit button text to Search Again, and change the dynamic URL query string to match the fields on this new form. Use the same key names that you used on the first form.

Save the form and we'll move on to modifying our custom view.

Modify the Custom View

All the magic happens in the custom view.

Open your custom view and scroll down to the Advanced Settings section. We're going to modify the Filter Entries. By the way, this is the custom view from my second Formidable Pro tutorial. I've rewritten the source code to eliminate the html tables and display the form's entries entirely through <div> tags and css. It works much better now. And the source code is available to download for free.

We're in the Advanced Settings section. Add five filter entries, one for each field on our search form.

Select the fields that represent the data on the search form.

For each text field select "Like" as the comparison operator. For the country dropdown, you should choose "equal to." The difference is that "equal to" looks for an exact match, whereas "like" matches patterns. It is impossible that every person entering data into your form will spell text correctly or the same exact way each time. People make mistakes and using "like" as the comparison operator will provide more accurate search results.

In the value field, we enter square bracket "[" get param= plus the key name of each of the query string's key-value pairs. Close the whole thing off with a square bracket "]".

Save the custom view. We're ready to build our Search and Search Results pages.

Create the Search and Search Results pages

To make this all operational, create two new pages, one for the Search Form and a second for the Search Results page. I’ve already created these two pages on my site and will show you their contents.

For the search page, insert the search form you created. Add any decorative features you desire for the page. I like to surround my forms with a css border that matches the theme's color scheme.

For the search results page, insert the custom display and any other decorative features you desire for the page. Take note that I've also inserted the search again form. This is simply a matter of convenience for my users. Think about the process. A user enters data into the search form and results display. If the user wants to enter a new search, he or she would have hit the browser's back button or access the search form from the menu once again. By placing the search again form on the search results page; it's very easy for the user to further drill down on the data.

I also want to point out that I use a plugin called text expander so the search again form is initially hidden from the user's sight so he or she is not distracted from viewing the search results. This is an old plugin that has not been updated for more than two years. It still works, but you might find a more elegant solution by searching WordPress.org.

Make sure you've saved and published both pages. We're ready to see everything work.

It Works!

I'll load the search form and type a few letters of a last name. Since we are using "Like" for our comparison match of text fields, the search results page should display any records where the last name begins with "Lo."

There! Two records returned, both with a last name starting with "Lo."

Let's search again, this time for someone from Argentina.

There she is! And with that, our tutorial for building a custom search and displaying the results with Formidable Pro is concluded. I hope this has been a richly rewarding learning experience.

Affiliate Disclosure

In the spirit of full disclosure, I am an affiliate marketer for this wonderful product. I use it on all of my websites and on those belonging to my clients. If you choose to buy it, please click my affiliate link to purchase it and receive my undying gratitude and appreciation for helping to keep this website afloat.

This video was produced on a Mac with ScreenFlow 4.