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:

Afterward, you need to proceed to the form creation. Go to JetEngine > Forms and click the “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 front-end 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.

After the form fields are done, locate the Pre-set form field values and tick the checkbox. Then, go ahead and fulfill the settings below.

Here, where the dropdown list is located, are the default WordPress user fields, which could be used for overwriting.

Please note that the 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).

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 the Update User option. It is responsible for updating the user data. To assign the form fields to the user fields, proceed to the Fields Map:

You need to match each form field with the 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 in the 2nd step.

For that reason, we need to select the “User Meta” option from the dropdown list. Then, the meta field key should be inserted in the newly appeared field. In our case, they’re the “user-photo” and “user_bio”.

Save the form, and proceed to the Elementor editor.

Open a page in Elementor and drop a Form widget to the editing area.

Select the form you created in the Content block and style up the widget according to your needs.

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 the 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.

Let’s check how the information was transferred to the backend.

Log in to the WordPress 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.