Back to contents

JetEngine: How to Update WordPress Users via Front-end Form Submission Option

Follow this step-by-step guide to learn how to update personal Users information from the front-end.

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.

Preparations

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

wordpress users list

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:

meta box settings

Now, if we open any User, we’ll see the new meta fields appear:

new meta fields

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.

form fields

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.

preset form values

Here, where the dropdown list is located, are the default WP User’s fields, which could be used for overwriting.

user properties

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.

new notification

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:

notification fields map

You need to match each Form field with User meta fields. Click the dropdown icon and select the corresponding meta field.

ATTENTION!
It’s obligatory to choose User ID for the user_id field as it is responsible for a post update.

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.

form widget

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

form widget settings

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.

form preset

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.

form submitted

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.

values changes

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.

meta values 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!