Before we overview this option, it should be noted that it was developed for use in the combination with User Profile Builder. To learn more about how the Profile Builder works, check this tutorial.
1 Step — Adding Users to WordPress
First, navigate to WP Dashboard > Users and create several users (or you can operate with those you’ve got).
2 Step — Create Additional Meta Boxes
Let’s add some extra fields to our Users: photo and biography.
Navigate to JetEngine > Meta Boxes and add a new one. Make sure that you selected Users in the field Meta Box for. Then add new meta fields. Here’s what we’ve got:
Now, if we open any User, we’ll see the new meta fields appear:
Form creation and setup
1 Step — Create a Form
Afterward, you need to proceed to the Form creation. Go to JetEngine > Forms and click Add new button. Here, you are free to create as many fields as you need. For this tutorial, we’ve got a few essential fields to show the mechanism of the frontend submission.
In the Form’s field settings, there’s an option to make the fields visible depending on whether the user is logged in to the Account or not. It means that the User can change the information, which belongs only to his account, not to other users’ ones.
2 Step — Form Pre-set values
After the Form’s fields are done, locate the Pre-set form field values and enable it. Then, go ahead and fulfill the settings below.
Here, where the dropdown list is located, are the default WP User’s fields, which could be used for overwriting.
Please note that User Meta is responsible for pulling the data from the custom meta fields. If this option is selected, a new field will appear, in which a meta field key should be inserted (as shown in the screenshot above).
3 Step — Form Notification Settings
After you set up the fields according to your needs, scroll down and locate the Notification Settings block. Click the Add Notification button.
In the Type block select an Update User option. It is responsible for updating the User data. To assign the Form fields to the User fields, proceed to Fields Map:
You need to match each Form field with User meta fields. Click the dropdown icon and select the corresponding meta field.
Let’s take a closer look at the profile_picture and user_bio fields. Those fields match the meta fields we created on the 2nd step.
For that reason, we need to select a User Meta option from the dropdown list. Then, a meta field key should be inserted in the newly appeared field. In our case, they’re user-photo and user_bio.
Save the Form and let’s proceed to the Elementor editor.
4 Step — Form widget in Elementor
Open any page in Elementor and drop a Form widget to an editing area.
Select the Form you created in the Content block and style up the widget according to your needs.
5 Step — Frontend User Account checking
Log in as one of the Users to check how the Form works.
For our tutorial, we logged in as a Tester user, which has the Editor access to our site.
After that, open the page with the Form. Here’s how it looks. Pay attention that its fields contain pre-set values, that we assigned in step 3.
Complete the form and hit the Submit button. In the screenshot below you can see our Form with the new values we set before and the new profile picture.
6 Step — Check the result in WP dashboard
Let’s check how the information was transferred to the backend.
Log in to the WP dashboard as an Administrator, and proceed to Users.
As you can see, email and name were successfully re-recorded to the ones we put in the Form.
Now, enter the Tester user to see if the User Photo and User Bio (which were created as custom meta fields) were changed.
This awesome functionality is a perfect match with the Profile Builder, allowing each user to make changes in their personal accounts right from the frontend. It saves time for the website administrator to make tons of changes. Set up various fields and custom meta boxes to create a unique layout of the user account and to collect any data you need.
Enjoy managing Users!