Do you use Gravity Forms to register new users on your website?
When users create a profile on your website, they expect to be able to update it whenever they want. However, WordPress profiles are only editable from the backend, and this makes for a poor user experience. On top of that, showing the backend of your site to logged-in users looks unprofessional.
If you’re looking for a way for users to edit their profiles from the front end, GravityView offers the perfect solution!
In this post, we’ll show you how to create user profiles from Gravity Forms submissions and allow logged-in users to edit their information from the front end.
Ready? Let’s get started! 👇
Displaying User Profiles Using GravityView
GravityView is an add-on for Gravity Forms that allows you to display form submissions on the front end of your website. You can also make fields editable, allowing users to edit their information without needing to see the backend.
If you’re looking for an easier way to create and edit user profiles, you’re probably dealing with one of the following scenarios:
- You want to display team member profiles for your site’s About page
- You want to display user profiles for a member directory
Keep reading to see how GravityView can provide a better way to create, manage and update user profiles in Gravity Forms.
Create a User Profile Form
The first step is to create a form in Gravity Forms allowing users to submit information for their personal profile.
For this example, we’ll keep things simple by creating a new form with the following fields:
- Name (Name field)
- Job Title (Single Line Text field)
- Bio (Paragraph field)
- Profile Picture (File Upload field)
Here’s what it looks like on the front end:
Creating a View
After your users have filled in their profile information, the next step is to take that information and display it on the front end. To do that, you’ll need to install GravityView and create a new View.
A ‘View’ is a custom post type in WordPress that allows you to display Gravity Forms entries using a drag-and-drop builder.
To create a new View, hover over Views and click New View. Now give your View a name and select a data source (this should be the form you created in the previous step).
After that, you’ll need to choose a layout type 👇
Choosing the Perfect Layout for Displaying Gravity Forms User Profiles
By default, GravityView includes the following layout types:
- Table – Display data in a table with rows and columns
- List – Display entries in a directory-style layout, one after the other
📝 The GravityView Core + Extensions license gives you access to the DataTables layout and the All Access license includes a further two layouts: Maps and DIY. Find out more about GravityView layouts.
Feel free to choose the layout the best fits your needs. For this example, we’ll select the List layout.
Now you can begin adding fields to your View using GravityView’s drag and drop editor. At the top of the View editor, you’ll see three tabs corresponding to the three pages that make up a View:
- Multiple Entries Layout – The page where your entries will be displayed one after the other. If you’re building a directory, this would be the main directory page.
- Single Entry Layout – Users can click through to the Single Entry page to see more details about a particular entry.
- Edit Entry Layout – This is where users can edit their user profile information from the front end.
Start by configuring the Multiple Entries Layout and choose the fields you want to display in your users profiles.
Choosing the Fields You Want to Display
In the view editor, you’ll see sections for different information, including the “listing title”, “subheading”, “image” and more. To add a new field to your layout, simply click the Add Field button and select a field from the list.
Here’s what our layout looks like after adding our user profile fields:
Lastly, you may wish to add a link to the Single Entry Page. You can do this by adding the “Link to Single Entry” field somewhere in your View.
Okay, here’s what a user profile looks like on the front end:
As you can see, the List layout is perfect for a Team page, an About page or a member directory!
Making Fields Editable From the Front End
To help save you time, why not allow team members to edit their own profiles? To enable user edit, scroll down to the View Settings, click on the Edit Entry tab and check the box that says “Allow User Edit”.
Next, you’ll need to add a link to the Edit Entry page from either the Multiple Entries or Single Entry pages. To do this, click Add Field and select the “Link to Edit Entry” field.
Now scroll back up and click on the Edit Entry Layout tab at the top. Fields you add to the Edit Entry Layout will be made editable from the front end. If you leave the layout blank, all fields will be editable.
Here’s what the Edit Entry page looks like on the front end:
As you can see, users can also edit their profile picture by uploading a brand new image!
💡 Pro tip: Learn more about editing entries in Gravity Forms.
Only Show the Profile of the Logged-In User
If you’re running a directory, you may wish to only display the profile of the currently logged-in user. This is possible using the GravityView Advanced Filtering extension.
The Advanced Filter allows you to filter entries in a View using conditional logic! To install Advanced Filtering, follow the steps below:
- Hover over Views and click Manage Add-Ons.
- Scroll down to “Advanced Filtering” and click Install.
- After installation has finished, click Activate Plugin.
After installing the extension, head back to your View editor, and click on the Filter & Sort tab in the View settings. Now click Add Condition to add a new conditional logic filter.
Finally, add the following condition: “Create By” – “is” – “Currently Logged-in User”.
Now, when users log into your website, they will only see their own profiles.
Approving New Profiles Before They Go Live
If you’d like more control over the content in your users profiles, you can enable entry approval. GravityView allows you to hold new entries for approval before they show up in your View.
To enable entry approval, check the box that says “Show only approved entries” in the View Settings.
To approve a new entry, head over to the Entries page, hover over the circle next to the entry on the left and click on the green checkmark.
When the circle icon changes to a green checkmark, it means the entry has been approved! To unapprove an entry, click on the red ‘X’ icon.
That’s it!
💡 Pro tip: Find out how to build epic team pages using GravityView!
Create and Edit User Profiles in Gravity Forms
Sending users to the backend of your site to update their profile makes for a bad user experience. GravityView solves this problem by allowing you to display user profiles on the front end and add a link to edit the entry.
In this post, we showed you how to edit Gravity Forms user profiles from the front end of your site using GravityView. If you found this post helpful, subscribe to our newsletter below! 👇
