The idea
This Sunday, my goal was to redesign the review section of this website, and I decided to utilize Gravity Forms to capture the reviews. My idea was to create a slick carousel slider that can display Gravity Forms entries, leveraging the Gravity Forms survey field for star ratings.
To bring this idea to life, I developed a shortcode that accomplishes exactly that. I thought it would be great to share the code with the GF community as a free plugin. If there is interest in this concept, I am open to enhancing this simple plugin further. Feel free to share your ideas and suggestions in the comments section at the bottom of this page.
Want to see what all the fuss is about? Head over to the homepage and see it in action.
Requirements
- Gravity Forms
- Gravity Forms Surveys add-on
- This Free plugin. Free download from github
The shortcode
Currently, the shortcode offers several parameters, with four being required:
Required Parameters:
- form_id: Specify the form ID from which entries should be fetched.
- name: Define the field ID for the name field in the form. This field is expected to be of the name type, with at least first and last name enabled.
- stars: This field ID corresponds to the survey rating field, where the choice values range from 1 to 5.
- text: This field ID represents the text or paragraph field that contains the review text.
Shortcode example:
[gf_rating_carousel form_id=1 name=2 stars=3 text=4]Optional Parameters:
- company: This is the field ID of a text field that holds the company name.
- function: Specify the field ID of a text field that contains the function at the company.
- url: The field ID for a company website URL.
- page_size: Enter a number to define the desired number of entries to load.
- dark_mode: Set the value to “true” to display the carousel in dark mode.
Shortcode example:
[gf_rating_carousel form_id=1 name=2 stars=3 text=4 company=5 function=6 url=7 page_size=100 dark_mode=true]Conditional entries
Additionally, the shortcode allows for conditional loading of entries based on the value of a field within each entry. This enables the use of the same form to review different products, ensuring that each review appears on the relevant page.
Use case: add a select field to your form and populate it with all your products. In your shortcode you can use the conditional parameters to filter entries based on the product selection by the user.
Conditional parameters:
conditional : true or false, defaults to false
conditional_field : the id of the conditional field that you want to use
conditional_value : the value the field should match
Shortcode example:
[gf_rating_carousel form_id=1 name=2 stars=3 text=4 conditional=true conditional_field=5 conditional_value=product_one]Performance
This plugin is very lightweight. The plugin loads the slick JS and CSS from the cloudflare CDN. It also loads a small JS and small CSS file to load the carousel. It loads everything in the footer and all the assets are only loaded if the shortcode is present on the page, it will not be loaded anywhere else on the website.
Responsiveness
The slick carousel is configured to have 3 slides on a desktop screen. 2 slides on a tablet screen and 1 slide on a mobile screen. Breakpoints used are 1024pc, 900px and 600px.
Conclusion
I trust that this resource will prove valuable to many users. Although I developed this script in an afternoon, it successfully fulfills its purpose for my use case. However, I believe there is always room for improvement, and I invite you to share your ideas and suggestions for enhancing the functionality of this small, free plugin.
Your feedback is greatly appreciated. Please feel free to leave your thoughts in the comments section below.