• Skip to main content

Victor Font Consulting Group, LLC

Digital Business Strategists

Call Us Toll Free:

1-844-VIC-FONT (842-3668)

  • Home
  • Care Plans
    • Care Articles
    • Optional Subscriptions
  • Consultations
  • Products
    • Code Snippets
    • Public GitHub Repositories
    • Gist Snippets
    • Pastebin Snippets (Free)
    • Free Plugins
  • FAQs
  • Support
    • Graphic Design
  • Our Team
    • Contact
    • Speakers
    • Portfolio
  • Resources
    • Free WordPress Video Training
    • Tutorials
    • Articles
    • Cybersecurity
    • EU Referral Network
You are here: Home / Code Snippet / Search and Display Results with Formidable Pro

Search and Display Results with Formidable Pro

By Victor M. Font Jr.
March 10, 201413 Comments

Contents
  • Transcript
    • Search and Display Results with Formidable Pro
    • Create the Search Form
    • Settings Page
    • Professor MacKnuttee
    • Dynamic URLS
    • Build the Dynamic URL
    • Modify the Custom View
    • Create the Search and Search Results pages
    • It Works!
  • Affiliate Disclosure
Search and Display Results with Formidable Pro

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.

http://www.victorfont.com/search-results/?[if 1063]&fname=[1063][/if 1063][if 1064]&lname=[1064][/if 1064][if 1065]&email=[1065][/if 1065][if 1067]&country=[1067][/if 1067][if 1068]&comments=[1068][/if 1068]

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.

//victorfont.com/search-results/?

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.

ScreenFlow 4

This video was produced on a Mac with ScreenFlow 4.

Formidable Pro—The Custom View
  • 2shares
  • Facebook0
  • Twitter0
  • Pinterest0
  • LinkedIn2
  • Print
  • SMS0

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur, and Senior IT Executive. A Founding Board Member of the North Carolina Executive Roundtable, he has served on the Board of Advisors, of the North Carolina Technology Association, the International Institute of Business Analysis, Association of Information Technology Professionals, Toastmasters International, and the North Carolina Commission for Mental Health, Developmental Disabilities, and Substance Abuse Services. He is author of several books including The Ultimate Guide to the SDLC and Winning With WordPress Basics, and Cybersecurity.

Reader Interactions

VictorFont.com runs on the Genesis Framework

Genesis FrameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple—start using Genesis now!

Click here to download The Genesis Guide for Absolute Beginners (PDF - 1.4 MB)

Leave a Reply Cancel reply

Your email address and website will not be published. Required fields are marked *
Posting a comment means that you agree with and accept our Comment & Product Review Policy

Comments

  1. Harith Alnisayer

    February 17, 2016 at 4:25 am

    Hello Mr. Victor,

    I’ve Installed Formidable pro, created a table, and did all of your Tutorial suggestions for search entries…
    now I want to:

    1. view search result as landscape table with all fields.
    2. edit selected record from specific Page using search results.
    3. print table from page contains all entries or specific records.
    Reply
    • Victor M. Font Jr.

      February 17, 2016 at 6:53 am

      Hello Harith,

      The tutorial you watched on YouTube is quite simple and meant to get you started with displaying results only. If you want to add functionality to edit, search, and print entries on your own, I recommend you take a look at the jQuery DataTables plugin. You also have to make sure you set the view to display records dynamically. For best performance, you really need to access the information with ajax.

      If you would prefer to hire the Victor Font Consulting Group, LLC to do this work for you, please fill out a project inquiry form and someone will contact you to discuss.

      Reply
  2. Choco

    October 30, 2015 at 12:48 pm

    Hi Victor, I followed your tutorial and it work great, but I am having an issue in one of my fields, it is a country field and is populated with a taxonomy of countries. When I select a country from that list and hit search , I get the ‘no entries found’ message even though I do have entries with that country. Any advice?

    Reply
    • Victor M. Font Jr.

      October 31, 2015 at 1:46 pm

      Are you using separate value? I don’t know that I can help with this without seeing the code.

      Reply
  3. Pete

    August 12, 2015 at 8:35 pm

    Fantastic. I couldn’t quite get this right from the instructions in FP but found this video and it did the trick.
    Never take it down as I have referenced it in FP and asked the team there to add it to their list of videos too

    Thanks

    Reply
  4. Joe Capone

    July 21, 2014 at 1:09 pm

    Is it possible to have some math done within the search function?

    Lets say that I can output a number which represents the cost of one unit of something. In the quote form, the person says that they want 40 units.

    The search function would find the specific cost for that 1 unit based on other factors that they have provided…we just need to multiply by 40 units.

    Would I need to have all calculations done in excel and then imported in as csv with the search literally only able to search for the item (no calculations allowed)?

    Reply
    • Victor M. Font Jr.

      July 21, 2014 at 2:18 pm

      Yes, you can do math calculations. The best approach is writing custom jQuery scripts to do the calculations and write the results back to the appropriate field.

      Reply
  5. Joe Capone

    July 21, 2014 at 12:56 pm

    You mentioned that there would be additional programming that is required if you use a dropdown or radio buttons.

    What would that look like? How is that done? Do you have any demos of this?

    Reply
    • Victor M. Font Jr.

      July 21, 2014 at 2:16 pm

      Joe, there may be custom programming required. It depends on the nature of the lookup data and how you want to maintain the data. The Formidable Pro website has plenty of examples. Search for “data from entries.”

      Reply
  6. Joe

    July 20, 2014 at 5:11 pm

    I’m trying to create a quote tool. A quote tool is essentially a search tool where the user inputs the specific variables that they want or that need to he included. This includes age, amount of coverage, as well as additional policy riders.

    We are converting a desktop based quote tool where the insurance company won’t give is the code to turn it into an online calculator. To get around that, we’ve gone and created tables that include all potential variables from the tool. Having this in excel means that we an import into formidable as a cvs. All of the numbers are there.

    Your a 38 year old male, living in CA, in occupation X, and you want 10000 of monthly disability insurance benefit, with riders A, B, and D.

    The “what they want” is simply a search. Function.

    How can we use your tutorial to “search” for the resulting premium numbers?

    Reply
    • Victor M. Font Jr.

      July 20, 2014 at 5:36 pm

      I’m very familiar with what you want to do. I once built a complex insurance quote system for independent distributors. This tutorial can help you build a simple search form, and while the principles will be the same for your application, it isn’t going to be that simple. If you’d like my help building this app in Formidable Pro, I’m available for contract. It could probably be done in a day or two as long as the data is ready. You can contact me directly if you want to discuss.

      Reply
  7. jamie

    May 9, 2014 at 8:07 am

    You say you are going to create the search-results page “in a step or two”, but you never get specific about that page. I followed along with the video and still when I submit a search on the search page, the browser goes back to home page (or 404 error).

    I will continue to hack away at this, as I need to wrap my mind around what is actually happening with this solution, but I feel like I am missing something with regards to “search-results” page.

    Reply
    • Victor M. Font Jr.

      May 9, 2014 at 9:32 am

      Jamie,

      You did miss something. The instructions are complete.

      Make sure you are calling the search results page with the correct permalink. If you’d like me to help you, please send me a private email with access to your site. I can clear this up for you in a few minutes.

      Victor

      Reply

Toll free: 844-VIC-FONT (844.842.3668)

Send us an E-mail Fax: 919.205.4446

Accessibility Statement | Affiliate Marketing Disclosure | Capability Statement

Cookie Policy | Comment & Product Review Policy | Privacy Policy | Site Map | Terms & Conditions

Copyright © 2003–2021 Victor M. Font Jr.

Return to top of page
Cover image: 5 Things You Can Fix On Your Website In The Next Week To Increase Engagement

Attract New Customers Automatically for Free!

  • Learn how to use the Internet to attract REAL clients
  • Avoid the 3 big mistakes EVERYBODY makes
  • Put this system on AUTOPILOT with the tools the Pros use!

GET YOUR COPY!

This little ebook has helped hundreds of business professionals get real results.
Now it's your turn!

ebook lead capture
Privacy Policy
{"cookieName":"wBounce","isAggressive":false,"isSitewide":true,"hesitation":"","openAnimation":false,"exitAnimation":false,"timer":"","sensitivity":"","cookieExpire":"7","cookieDomain":"","autoFire":"","isAnalyticsEnabled":false}
We only use analytical cookies on our website that allow us to recognize and count the number of visitors, but they do not identify you individually. They help us to improve the way our website works. By clicking Accept you, agree to cookies being used in accordance with our Cookie Policy.OkNoCookie policy