The Edit User Form Widget

The Edit User Form Widget

Required plugins: Elementor (free), Advanced Custom Fields (free), and ACF Frontend (free)

The Edit User widget enables users to edit user profiles from the frontend of a WordPress website, without needing to interact with the WordPress dashboard. The page to host the form is built in Elementor.

Important: By default a user needs to be logged in and carry the “administrator” role to see this form. This can be changed, however, in the Permissions settings of this widget.

Adding the Widget

Create a new page to host the form, then click “Edit with Elementor” to open the Elementor page builder. Search for “Edit User Form” in the sidebar, and drag the widget into the page.

To learn more about using the Elementor page builder see Elementor’s official tutorial.

It is advisable to disable cache or CDN on this page as it can interfere with the form’s operation.

Form Fields

This section defines the fields which are shown within the form itself.  This is where you actually define what data the end user can access when using the form.

Default Fields
There are a number of fields which are enabled by default, such as Username, Password, Email and more. These can be adjusted to your specific needs.

Adding and Removing Fields
To add more fields simply click the Add Item button. The form on your page will change to reflect these new fields. Fields can also be deleted by clicking the X.

Form Title
The Form Title is the title for the entire form. By default it will be called “Register Now”, but it can be left blank if you wish.

Submit Button
At the very bottom we can edit the text displayed on the Submit button, by default it says “Update”. 

Basic Field Attributes

The Field Type defines the type of field being edited. Changing this will affect the other available options. 

All the field types have options which can be changed to customize both the content and the style of the field. 

  • Label – This is shown above the field’s text box. This can be toggled to be displayed or hidden according to your needs.
  • Placeholder – This defines placeholder text to be shown within the text box. By default it is left blank to show nothing.
  • Default Value – This will populate a field if no value has been given yet. You can also use shortcodes from other text fields. For example: [$acf:field_name].
  • Instruction – This is shown in smaller text under the Label.
  • Required – Indicates if the field can be left blank.
  • Disabled – This will prevent users from editing the field and will not send the data.

Field Specific Options

As mentioned above, there are many options which are unique to a specific field type. We will cover some of the options for the default fields. There will be more articles going in depth to each field’s options.

Username
In addition to the standard field options, here we can specify if the user has access to change their username. Allowing your users to change their username might affect your existing URLs and their SEO ratings. For this reason the Allow Edit option is not enabled by default.

Password
You can define a minimum password strength. As the user inputs their password, the strength will be displayed. If their password is too weak it will not let them submit the form.

The actual field is hidden behind a button labelled “Edit Password”. The button text can be changed in the Edit Password Button field in the sidebar.

Confirm Password
This field adds an extra step to ensure the user typed their password correctly. It checks to confirm the text input here is the same as the text input in the Password field. If the fields do not match the form will give an error and will not be submitted.

Email
Here the user can update their email address.

Actions

Here we have several options for additional actions to take place outside the form itself, such as sending an email when the form is submitted.

You can also define where the page should redirect to after submitting. By default it will reload the current page. We can choose to redirect to a different page by selecting Custom URL.

You can also define a custom success message, or choose no success message, whatever suits your needs. 

Additionally, there is an Error Message which will display to the user if something in the form does not work correctly. This allows for graceful error handling in the event something goes wrong.

User

Here you define attributes of the user account being edited. You can set a role that is given to everyone using this form, hide the WordPress admin area from the user, and define a managing user. You can also configure if the user should be automatically logged in after completing the form.

Permissions

This is where we limit which kinds of users can access the form. It is very important to configure this correctly, as otherwise your users might not be able to see the form at all!

By default, only administrators can see the form. If you want to allow other users to access it, you need to add them. You can choose Roles under the Select By Role option, or add specific users under the Select By User option. This can be useful if you are creating a form to be used by a specific manager who needs to edit the user profiles for their team.

If you would like to form to be visible to anyone, set the Who Can See This option to All Users

Display Options

Here you can customize display options across all the fields. This includes hiding all the field labels, hiding the red asterisk for required fields, and moving the instructions to below the field instead of above.

Limit Submissions

Here you can set a maximum number of submissions for any user. You can configure the message seen when they attempt to exceed the limit, or even insert custom content instead of just text. 

You can also set rules for different roles or even specific users.

Modal Window

This will hide the entire form in a button which then will pop open in a modal window when clicked. This can be useful if you want to give users the ability to easily edit their account without leaving the page.

Final Result

Here we can see what the completed form will look like from the front end:

The Edit User Form Widget

Still stuck? 
Contact our support team here.

Get the free plugin and receive updates