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 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:
Now, if we open any User, we’ll see the new meta fields appear:
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.
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.
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).
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 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.
Form Widget in Elementor
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.
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.
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.
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.
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.
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.