If you are using WPForms Pro version you know you can register user to your site using User Registration addon for WPForms. In this tutorial we will tell you how you can allow users to update their profile from site frontend using WPForms Views.
List of plugins we will be using:
- WPForms Pro
- WPForms User Registration Addon
- Views For WPForms Pro
- Views for WPForms – Inline Edit Addon
Step1: Create a User Registration Form in WPForms
Start by creating a new Form from WPForms => Add New
Let’s name this form as User Registration
Now search for User Registration Template from left side and click on Use Template button.
This will automatically add 5 default fields to your form & we will be adding 1 more field to store it as user meta.
- Name – To store user name in account
- Username – This will be username which user will use to login to site
- Email – To store user email in account
- Password – To allow users to set password for their account
- Short Bio – To allow user to add some words about them. This will be stored in default Bio field in user profile.
- Gender – This will be a Multiple Choice Field to store user gender as a User Meta which we will display in user profile in site frontend.
This is how our form looks now will all fields
Now let’s setup User Registration addon settings. Click on Settings tab & select User Registration from there.
You will see option to map form fields with user profile fields.
Map fields like shown below. To store Gender, map Gender field in Custom User Meta section
Step2: Create new View & enable Inline Edit feature in WPForms Views
To display user info on site frontend let’s create a new View from WPForms Views => Add New
Select View type as List & add the fields you want to display on page.
Enable Inline Edit for this view from View Settings => Multiple Entries => Enable Inline Edit
Step3: Display User Profile information using WPForms Views
Copy the view shortcode & add it on page.
Remember to click on “Display only logged in user Entries” in View settings so that user only see their entry.
Clicking on Enable Inline Edit will highlight the editable fields. Click on any field you want to edit, data will saved instantaneously including any custom user meta.