When it comes to GravityView, there are endless opportunities for creativity and innovation.
Websites that would usually require a team of developers and cost thousands of dollars to build can be launched by one individual within weeks if not days.
In this article, we’re going to explore how you can use GravityView to quickly and easily create a fully functioning online community marketplace.
We’ll also look at the different features of GravityView and how we can use them to create an enhanced user experience.
Our finished marketplace will allow users to:
- Post listings for items they want to sell
- Browse existing listings (after they’ve been approved)
- Contact sellers to arrange payment and collection for the item(s)
Ready? Let’s get started!
What Is an Online Marketplace?
You’re probably familiar with buy/sell groups on Facebook. Well, a community marketplace functions in a similar way.
The idea is that once users register on your site, they can post listings for goods they want to sell. This could be an unused birthday gift or an old iPhone, for example.
Members of the community can browse the listings on your site to find goods they’re interested in buying. Users can then get in touch with sellers via their contact information to arrange payment and collection for the item(s).
The benefit of creating a community marketplace is that you don’t need to worry about processing transactions through your website as this is taken care of privately by the seller.
Why Create an Online Marketplace?
There are several reasons why you might want to create an online marketplace. Here are some potential use cases:
- To help students at your university buy and sell used goods
- To create a centralized platform for buying/selling used goods in your area instead of having multiple social media groups
- To generate an income by charging users a membership fee to join your site
Now that we’ve established what a community marketplace is and the reasons for building one, let’s look at how we can create one using WordPress and GravityView!
Building Our Marketplace Using GravityView
When you think of building an eCommerce store on WordPress, your mind probably goes to WooCommerce, right? While WooCommerce is a powerful solution for any online store, it’s too bulky for a basic buy/sell community site.
In this case, GravityView is all we need to create a beautiful and sophisticated community marketplace.
GravityView is an add-on for the Gravity Forms plugin that lets you display Gravity Forms data on your website.
GravityView gives you several options for controlling the layout and visibility of your form data and in this example, we’re going to use it to display listings on the front end of our site.
Step #1: Creating the Listing Form
First off, we need to create a form that allows users to post a listing for an item they want to sell. Log in to the backend of your WordPress site, hover over Forms in the sidebar and click New Form. Name your new form, something like “Post a New Listing.”
The next step is to add the required fields to our form. We’ll keep it simple for now, by adding the following fields:
- Item for Sale
- Item Price
- Category
- Image
- Short Description
- Detailed Description
- Email Address
We’ll make the Category field a dropdown and for now, we’ll add three categories – “Electronics”, “Books” and “Toys”. For the Image field, we’ll use a File Upload and set it to accept common image formats including PNG, JPG/JPEG, and GIF.
💡 Pro tip: Learn more about uploading images to Gravity Forms.
When you’re done, remember to embed your new form in a post or page.
Pro tip: Set a character limit on the Description fields to limit lengthy descriptions.
Here’s what our finished form looks like:
Restricting Access to Our Form
We want to make it so that only users with an account on our site can post listings on our online marketplace. We’ll do this by going to the Form Settings tab and checking the box that says “Require user to be logged in”. Here you can also add a message that will display to logged-out users.
Okay, our listing form is complete! Now you can add it to a page on your website. The next step is to extract listing data from our form and display it in a user-friendly manner on the front end of our site.
That’s where GravityView comes in!
Step #2: Creating the Listing View
GravityView includes several layout types allowing you to display your entries in a table, as markers on a Map, and more! For our store, we’re going to make use of the List layout.
From your WordPress admin panel, hover over Views and select New View. Give your View a name (something like “Marketplace Listings”) and then select your listing form as the Data Source. Under “Choose a View Type”, we’re going to select “List”.
Now we need to configure our listing page to make sure the data is displayed exactly how we want it. We’ll begin by customizing the layout in the Multiple Entries tab. This is the default page that displays all of the listings.
Let’s add a search widget at the top of the page by clicking + Add Widget > Search Bar. This will allow users to search for goods that they want to buy.
The next thing we need to do is configure the search settings by clicking on the gear icon. In our example, we’re going to add a search field for the Category and one for the Item Name (called “Item for Sale” in our form).
Next, we’re going to add fields under where it says “Entries Fields”. Let’s start by adding the Item for Sale field where it says “Listing Title”. Next, we’ll set the “Subheading” to display the Item Price field.
Below that, we’ll add our Image field to the Image block, and then we’ll add the Short Description field under where it says “Other Fields.” Let’s also add the Category field here and give it a custom label called “Category”.
Finally, we’re going to add the Entry Date in the right footer block so users can see when listings were posted.
Note: Feel free to add any additional fields that you feel are necessary!
Okay, let’s take a sneak peek at our listing page.
Our online marketplace is looking good, isn’t it? There are just a couple of things left to do before we can move on to the next step.
When a user clicks on a listing, they will be taken to that listing’s Single Entry page where they can find out more information about the item and contact the seller. Let’s make the listing title and image both link through to the Single Entry page.
To do this, click on the blue gear icon and check the box that says “Link to single entry.”
Lastly, we want to ensure that only approved entries show up on the listing page. This can help us to eliminate spam and hide entries that don’t comply with our marketplace guidelines.
We’re in luck because GravityView makes this super easy. Simply check the box that says “Show only approved entries” under “View Settings”.
Step #3: Customizing the Single Entry View
The third and final step is to configure the Single Entry view for our listings. To do this, click on the Single Entry tab. Here we’re going to replicate the layout we just made for the Multiple Entries view while adding two important changes.
First off, we’re going to include the Detailed Description field here so that users can find out more information about the item they’re interested in.
We’re also going to include the Email Address field so that users can contact sellers about arranging payment and collection for the items. Let’s also give this field a custom label saying “Contact seller”.
To incentivize users to join our site and avoid spam, we’re also going to hide the Email Address field for logged-out users. We can do this by clicking on the gear icon and checking the box that says “Make visible only to logged-in users?”.
GravityView turns email addresses into clickable links that open in the user’s email client with a prefilled subject line and email body (optional). We can also use merge tags to include listing details in our email subject/body.
Pretty cool, huh?
Let’s prefill the subject line with “I’m interested in [item name]” by using the Item for Sale merge tag.
Finally, we want to change the title of the Single Entry page so that it says “Listing Details” rather than “Marketplace Listings”. To do this, go to View Settings > Single Entry and edit the “Single Entry Title” field.
Here’s what our single listing looks like on the front end:
That’s it, we’re done!
Taking it Further
Gravity Forms and GravityView work together to provide a robust and reliable framework for building a successful online marketplace.
However, you may need a way to restrict content to specific user roles. There are several WordPress membership plugins that allow you to do this. The one that you choose will depend on the size and scope of what you’re building.
You could also start off simple by using the free Members plugin by MemberPress. This handy plugin allows you to edit user roles, change capabilities, and restrict content on your website.
The paid version of MemberPress includes many other features. It also allows you to take payments through your membership site so that you can charge people a monthly subscription to be part of your community.
Start Building Your Online Marketplace with GravityView
GravityView is a powerful plugin that allows you to display Gravity Forms data in a variety of creative ways. In this post, we showed you how to use GravityView to create a simple but elegant online marketplace.
Creating an online marketplace is a great way to make an impact in your community by providing people with a simple platform where they can buy and sell used goods.
Not a GravityView customer yet? Our 30-day 100% money-back guarantee means you can try out GravityView completely risk-free!
So what are you waiting for? Get GravityView today!