Help Center

How to Update User Accounts via Front End Form

How to Update User Accounts via Front End Form

Follow this step-by-step guide to learn how to update personal user information from the front end via the form using the JetEngine WordPress plugin.

Before you start check tutorial requirements:

Before we overview this option, it should be noted that it was developed for use in combination with User Profile Builder. To learn more about how the Profile Builder works, check this tutorial.

Create an Additional Meta Box

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

Create a Form

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.

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.

Form Pre-set Values

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.

preset form values

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

user properties

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

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 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:

notification fields map

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


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

Form Widget in Elementor

Open a page in Elementor and drop a Form widget to the 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

Front-end 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 the 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

Check the Result in the WordPress Dashboard

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

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

That’s all. The Profile Builder and JetEngine Form functionality allow users to make changes in their personal accounts right from the front end. Set up various fields and custom meta boxes to create a unique layout of the user account and to collect any data you need.

Was this article helpful?

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.