One-click Like/Unlike – Formidable Pro Tutorial

One click add remove favorites - Formidable Pro TutorialHere’s a Formidable Pro tutorial straight out of a real-world application that is so recent, the site I used this technique on hasn’t even gone live yet.

Note: At the time I am writing this, Formidable Pro version 2.0 is still in beta testing and this project is being developed in the latest beta version of 2.0 in anticipation of it’s release. Some of the field descriptions and screen shots might be different from what you are familiar with, but this technique does not require you to be using version 2.0.

The Setup

I’m working on a WordPress and Formidable Pro based site that is for dog owners to list their dogs when, for whatever reason, they are no longer able to provide a home for them and would like an alternative to taking them to their local shelter or listing them on Craigslist. Those looking for a new dog can browse profiles of nearby dogs and make contact with owners of dogs that interest them. One feature we wanted to include is a way for users to easily tag a dog as a favorite so we could later provide a view of favorited dogs to users.

Seems simple enough and if there’s one thing I’ve learned as a fanatical fan of Formidable Pro, anything is possible! This one, however, took me a little work to get my head around the best approach. While there is a similar example in the Formidable Pro documentation, it wasn’t exactly what we were looking for and there are a couple gaps in the documentation so I set out to follow the example where I could and, where necessary, come up with our own solution.

Step One – Create a Favorites form

What we are doing when a user clicks the link to “Like” a profile is creating an entry in a new form, so we should start by creating this new form. Even though it won’t look like it, in the end we’ll be adding this form to the page that shows the profile view for the dog being added to the Favorites form.

This form only requires two fields. A data from entries field for the id of the profile being saved and a hidden user id field. There is nothing special about the hidden user id field, but for the data from entries (called a Dynamic Field in FP 2.0), here are the settings:

Settings for ID field - Formidable Pro TutorialImport Options From: This field needs to set to import from the form that contains the items being Favorited or Liked. It should then pull data from the field that contains the unique ID for this entry. In our case, we had created and hidden field called Fido ID that auto increments a unique ID that we structured.

Dynamic Default Value: This value needs to automatically get the value of the entry parameter for the profile being viewed by using the shortcode below.

 Visibility: Set this to Administrator, essentially hiding it from normal users. Later I’ll show you how I also hid this field from admins to help with styling the page.

For the Form Settings, be sure to disable it from emailing you every time there is an entry, then follow these settings:

Favorites form settings - Formidable Pro TutorialOn Submit: Set this to Redirect to URL, but just leave the URL field blank and it will default to whatever page you add the form to.

AJAX: Check the “

Permissions: Here you need to check and set Form Visibility to Logged In Users plus you want to check and set Front-end Editing of Entries to allow Logged In Users to edit their own entries. Here you will also want to set the form so it will redirect to URL and leave the URL field blank. (See image)

Style Template: Finally, since later we are going to use our own unique image button, set this to not use Formidable styling.

Step Two: Customizing the submit button

For this project, I didn’t want a boring submit button or a plain old link for users to click, so I chose to use two images. One of a solid heart to indicate that a dog has been favorited and an outline of the same heart for dogs that have not been favorited. To do this, we are going to change the standard button into an image button that will show our outlined heart image.

In the Customize HTML tab for our Favorites form, find the field to customize the submit button. In the field you will see code similar to this:

Within this code, we only need to change the HTML Input tag, which looks like this:

Advanced users may wish to make additional edits. Much of the code that pertains to back buttons and saving a draft doesn’t apply to our purposes, but leaving means it will just be ignored.

Replace the input tag to look similar to this:

Obviously your image src and width will need to be changed to match your own image location and width. The text in the title parameter is what will show when a user mouses over the image.

Step Three: Creating a view

This is where it might get a little more confusing. It’s certainly the part that took me the longest to work out. While I made reference earlier to how our submit button is a form, we are not going to insert that form directly into the profile view. Instead, we are going to create a view, filter the view based on the id of the user and the profile id in our form, (which we will pass in the URL). When our filtering means there are no entries to show, (because this user has not favorited this profile), only then will we display the form we created. Simple, right? Here we go…

Setting the view filters - Formidable Pro TutorialUse Entries from Form: Set this to the form you just created.

View Format: All Entries

Filter Entries: You need two filters.

First create a filter for your hidden User ID field and set it to show entries that are equal to current user.

Next filter is for your data from entries field and it needs to be set to show entries that are equal to a parameter you are going to pass in the URL when a user clicks to view a specific profile. In most cases, this will be another view you created with a list of entries then a detailed or dynamic view. I won’t try to cover every possible way you could add this, but in my case the link to the detailed view looks something like this:

 This means for my second filter I used Formidable’s “Get”shortcode to grab this from the URL:

 Message if nothing to display: This is where we will add the shortcode to show our Favorites form we created. I’ve got to admit I was a little excited when I tested this and realized it would work. In the field I just added my shortcode like this:

 Change 18 to the id of your form.

Change 242 to the id of the data from entries field, (remember I told you I would show you how to hide the field from admins… viola!)

Keep minimize=1 as this will prevent the pesky p and br tags that WordPress likes to automatically add from throwing off your styling later.

Step Three and a half: Our view content

For the view’s content, we are going to add our image that shows this profile has been liked (solid heart), but we will do so within Formidable’s deletelink shortcode, like this:

Adding content to our view - Formidable Pro TutorialNotice that the label parameter is a basic HTML image tag with the source pointing to my solid heart image and, like earlier, the title parameter is the text that will show on mouseover. What’s new here is the confirm parameter. This is the content that will be added to a confirmation pop-up when the user clicks the delete entry link. This pop-up is built into Formidable Pro and I didn’t experiment to see if I could force it’s removal. Instead I just changed it’s content to make it work with my project.

At the time I’m writing this, there’s a small bug in how the deletelink shortcode works that will prevent it from deleting the entry when the form has not been added to the page where the deletelink shortcode has been added. This may have been fixed by now, but if you find the delete link is not working, then you will want to add the Favorites form to the same page where you added the view of the Profile form. This won’t work if you add it within the view, it must be added to the page itself. Of course you will then want to hide the form using CSS because you don’t want users to see this.

Step Four: Pulling it all together

View within a view - Formidable Pro TutorialAll that’s left to be done now is to add our Favorites view wherever we want it to show within the Profile view. Once all the other pieces are in place, this part is pretty easy.

That’s all there is to it! How can you use this technique in your own projects?

 

1 Comment

  1. Aziz on February 5, 2018 at 1:57 PM

    Hello,
    hank you for this description.
    I want to realize the real estate demo, what I still miss is how many visitors have looked at each ad.
    Can you do something like that? Visitors counter…
    Best regards from Hamburg
    Aziz



Leave a Comment





This site uses Akismet to reduce spam. Learn how your comment data is processed.