# Add new custom fields to account\_settings page **URL:** \ **Category:** Development\ **Tags:** how-to\ **Created:** [January 18, 2021, 7:08am UTC](https://discuss.openedx.org/t/add-new-custom-fields-to-account-settings-page/4062 "2021-01-18T07:08:49Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![111](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/111/32/2454_2.png) [@111](https://discuss.openedx.org/u/111)\ **Post date:** [January 18, 2021, 7:08am UTC](https://discuss.openedx.org/t/add-new-custom-fields-to-account-settings-page/4062/1 "2021-01-18T07:08:50Z")
hello there how can I add new custom fields (added through custom\_reg\_form plugin) to account\_settings page?? make them appear there to edit them as default fields like: full name, gender …). ---
**Author:** ![Agrendalath](https://avatars.discourse-cdn.com/v4/letter/a/c68b51/32.png) [@Agrendalath](https://discuss.openedx.org/u/Agrendalath)\ **Post date:** [January 25, 2021, 4:30pm UTC](https://discuss.openedx.org/t/add-new-custom-fields-to-account-settings-page/4062/2 "2021-01-25T16:30:18Z")
Hi @111, it’s possible to add extra fields to the `account_settings` page via the `extended_profile_fields` site configuration. To do this, you can do the following. 1. Go to the Django admin → Site configurations to [configure your site](https://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/configuration/sites/create_site.html). 2. Update your existing site configuration (or create one, if it doesn’t exist) with the following: ```json "extended_profile_fields": [ // Fields you'd like to include on that page. "first_name", "last_name", "mailing_address", "city", "state", "country", "ZIP/Postal Code" ], ``` If you’d like to make more changes to this page (e.g. hide existing fields), you might want to consider [creating a theme](https://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/configuration/changing_appearance/theming/create_theme.html#creating-a-theme), which will override the default [account\_settings\_factory](https://github.com/edx/edx-platform/blob/master/lms/static/js/student_account/views/account_settings_factory.js). Then you will need to add it below [this line](https://github.com/edx/edx-platform/blob/9778e69c7624ac4c71bb1094817f6700dd46e02e/lms/static/lms/js/build.js#L36-36) in your theme and override [this line](https://github.com/edx/edx-platform/blob/9778e69c7624ac4c71bb1094817f6700dd46e02e/lms/templates/student_account/account_settings.html#L35) to import the custom factory from your theme. ---
**Author:** ![111](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/111/32/2454_2.png) [@111](https://discuss.openedx.org/u/111)\ **Post date:** [April 21, 2021, 3:46pm UTC](https://discuss.openedx.org/t/add-new-custom-fields-to-account-settings-page/4062/3 "2021-04-21T15:46:59Z")
> [@Agrendalath](#): > > If you’d like to make more changes to this page (e.g. hide existing fields), you might want to consider [creating a theme](https://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/configuration/changing_appearance/theming/create_theme.html#creating-a-theme), which will override the default [account\_settings\_factory](https://github.com/edx/edx-platform/blob/master/lms/static/js/student_account/views/account_settings_factory.js). Then you will need to add it below [this line](https://github.com/edx/edx-platform/blob/9778e69c7624ac4c71bb1094817f6700dd46e02e/lms/static/lms/js/build.js#L36-36) in your theme and override [this line](https://github.com/edx/edx-platform/blob/9778e69c7624ac4c71bb1094817f6700dd46e02e/lms/templates/student_account/account_settings.html#L35) to import the custom factory from your theme. please can you explain this point in more details. ---
**Author:** ![Agrendalath](https://avatars.discourse-cdn.com/v4/letter/a/c68b51/32.png) [@Agrendalath](https://discuss.openedx.org/u/Agrendalath)\ **Post date:** [April 30, 2021, 1:51pm UTC](https://discuss.openedx.org/t/add-new-custom-fields-to-account-settings-page/4062/4 "2021-04-30T13:51:53Z")
@111, sure, but please let me know what exactly you would like to know, as numerous areas could be covered by the theming. Are you looking for a way to reorder fields, hide some sections, etc.? ---
**Author:** ![111](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/111/32/2454_2.png) [@111](https://discuss.openedx.org/u/111)\ **Post date:** [May 3, 2021, 11:06am UTC](https://discuss.openedx.org/t/add-new-custom-fields-to-account-settings-page/4062/5 "2021-05-03T11:06:11Z")
ok, I have added new custom fields to the registration page by following: > **[GitHub - open-craft/custom-form-app: An example app that can be used as a...](https://github.com/open-craft/custom-form-app)** > > An example app that can be used as a template for extending the registration form in the OpenEdx LMS. - GitHub - open-craft/custom-form-app: An example app that can be used as a template for extend... the new fields are phone number, how to know us and others fields. everything work fine and I can access and edit these new fields from Django admin site, what I want to do is to allow students edit these new custom values through account\_settings page like defaults values in registration page (as ex. full name). to do that I have create new theme to override the default [account\_settings\_factory](https://github.com/edx/edx-platform/blob/master/lms/static/js/student_account/views/account_settings_factory.js) and then add it below [this line](https://github.com/edx/edx-platform/blob/9778e69c7624ac4c71bb1094817f6700dd46e02e/lms/static/lms/js/build.js#L36-36) in my theme and override [this line](https://github.com/edx/edx-platform/blob/9778e69c7624ac4c71bb1094817f6700dd46e02e/lms/templates/student_account/account_settings.html#L35) to import the custom factory from my theme, but when I have copied the [student\_account](https://github.com/edx/edx-platform/tree/master/lms/static/js/student_account) folder and pasted it to my theme in (mytheme/lms/static/js/student\_account) and compiled the platform account\_settings page show nothing (white page). this is log: > Blockquotelms\_1 lms\_1 | 172.18.0.1 - - [03/May/2021:11:16:09 +0000] “GET /login?next=/account/settings HTTP/1.0” 200 63582 “[http://localhost/dashboard](http://localhost/dashboard)” “Mozilla/5.0 (X11; Ubuntu; Linux x86\_64; rv:88.0) Gecko/20100101 Firefox/88.0” > nginx\_1 | 172.18.0.1 - - [03/May/2021:11:16:09 +0000] [http://localhost](http://localhost) “GET /static/indigo/js/i18n/ar/djangojs.cb65a2c7b785.js HTTP/1.1” 200 384022 “[http://localhost/login?next=/account/settings](http://localhost/login?next=/account/settings)” “Mozilla/5.0 (X11; Ubuntu; Linux x86\_64; rv:88.0) Gecko/20100101 Firefox/88.0” “-” > nginx\_1 | 172.18.0.1 - - [03/May/2021:11:16:09 +0000] [http://localhost](http://localhost) “GET /static/indigo/js/ie11\_find\_array.bd1c6dc7a133.js HTTP/1.1” 200 1685 “[http://localhost/login?next=/account/settings](http://localhost/login?next=/account/settings)” “Mozilla/5.0 (X11; Ubuntu; Linux x86\_64; rv:88.0) Gecko/20100101 Firefox/88.0” “-” > nginx\_1 | 172.18.0.1 - - [03/May/2021:11:16:09 +0000] [http://localhost](http://localhost) “GET /static/js/lms-base-application.2062f84b79fa.js HTTP/1.1” 200 13655 “[http://localhost/login?next=/account/settings](http://localhost/login?next=/account/settings)” “Mozilla/5.0 (X11; Ubuntu; Linux x86\_64; rv:88.0) Gecko/20100101 Firefox/88.0” “-” > nginx\_1 | 172.18.0.1 - - [03/May/2021:11:16:09 +0000] [http://localhost](http://localhost) “GET /static/bundles/commons.004f5b2a86f4b4464ea3.e18c22953351.js HTTP/1.1” 200 1881977 “[http://localhost/login?next=/account/settings](http://localhost/login?next=/account/settings)” “Mozilla/5.0 (X11; Ubuntu; Linux x86\_64; rv:88.0) Gecko/20100101 Firefox/88.0” “-” > nginx\_1 | 172.18.0.1 - - [03/May/2021:11:16:09 +0000] [http://localhost](http://localhost) “GET /static/js/lms-base-vendor.cb449c35a4fc.js HTTP/1.1” 200 324795 “[http://localhost/login?next=/account/settings](http://localhost/login?next=/account/settings)” “Mozilla/5.0 (X11; Ubuntu; Linux x86\_64; rv:88.0) Gecko/20100101 Firefox/88.0” “-” > nginx\_1 | 172.18.0.1 - - [03/May/2021:11:16:09 +0000] [http://localhost](http://localhost) “GET /static/indigo/lms/js/require-config.38226099c6ad.js HTTP/1.1” 200 9017 “[http://localhost/login?next=/account/settings](http://localhost/login?next=/account/settings)” “Mozilla/5.0 (X11; Ubuntu; Linux x86\_64; rv:88.0) Gecko/20100101 Firefox/88.0” “-” > nginx\_1 | 172.18.0.1 - - [03/May/2021:11:16:09 +0000] [http://localhost](http://localhost) “GET /static/indigo/js/student\_account/logistration\_factory.75b59f8d1a17.js?raw HTTP/1.1” 200 433 “[http://localhost/login?next=/account/settings](http://localhost/login?next=/account/settings)” “Mozilla/5.0 (X11; Ubuntu; Linux x86\_64; rv:88.0) Gecko/20100101 Firefox/88.0” “-” > nginx\_1 | 172.18.0.1 - - [03/May/2021:11:16:09 +0000] [http://localhost](http://localhost) “GET /static/js/vendor/noreferrer.aa62a3e70ffa.js HTTP/1.1” 200 1236 “[http://localhost/login?next=/account/settings](http://localhost/login?next=/account/settings)” “Mozilla/5.0 (X11; Ubuntu; Linux x86\_64; rv:88.0) Gecko/20100101 Firefox/88.0” “-” > nginx\_1 | 172.18.0.1 - - [03/May/2021:11:16:09 +0000] [http://localhost](http://localhost) “GET /static/indigo/js/utils/navigation.08930e16ab3d.js HTTP/1.1” 200 4438 “[http://localhost/login?next=/account/settings](http://localhost/login?next=/account/settings)” “Mozilla/5.0 (X11; Ubuntu; Linux x86\_64; rv:88.0) Gecko/20100101 Firefox/88.0” “-” > nginx\_1 | 172.18.0.1 - - [03/May/2021:11:16:09 +0000] [http://localhost](http://localhost) “GET /static/indigo/js/header/header.309a1243e175.js HTTP/1.1” 200 7848 “[http://localhost/login?next=/account/settings](http://localhost/login?next=/account/settings)” “Mozilla/5.0 (X11; Ubuntu; Linux x86\_64; rv:88.0) Gecko/20100101 Firefox/88.0” “-” > nginx\_1 | 172.18.0.1 - - [03/May/2021:11:16:10 +0000] [http://localhost](http://localhost) “GET /static/indigo/images/logo.b866e99e5b18.png HTTP/1.1” 200 122010 “[http://localhost/login?next=/account/settings](http://localhost/login?next=/account/settings)” “Mozilla/5.0 (X11; Ubuntu; Linux x86\_64; rv:88.0) Gecko/20100101 Firefox/88.0” “-” ---
**Author:** ![Agrendalath](https://avatars.discourse-cdn.com/v4/letter/a/c68b51/32.png) [@Agrendalath](https://discuss.openedx.org/u/Agrendalath)\ **Post date:** [June 28, 2021, 11:09am UTC](https://discuss.openedx.org/t/add-new-custom-fields-to-account-settings-page/4062/6 "2021-06-28T11:09:42Z")
@111, you don’t need to copy the whole `student_account` directory to your theme - it’s sufficient to add only `student_account/views/account_settings_factory.js` and put all necessary overrides there. These JS errors won’t likely be visible in the LMS logs - you should see them in your browser’s console, though. Also, please provide specific parts of code that have been overridden - they’re invaluable for getting the context about your changes. ---
**Author:** ![luan.tm](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/luan.tm/32/4138_2.png) [@luan.tm](https://discuss.openedx.org/u/luan.tm)\ **Post date:** [December 6, 2022, 3:32am UTC](https://discuss.openedx.org/t/add-new-custom-fields-to-account-settings-page/4062/7 "2022-12-06T03:32:16Z")
> [@Agrendalath](#): > > `extended_profile_fields` Hi, how can I find extended\_profile\_fields in existing site configuration ---
**Author:** ![Agrendalath](https://avatars.discourse-cdn.com/v4/letter/a/c68b51/32.png) [@Agrendalath](https://discuss.openedx.org/u/Agrendalath)\ **Post date:** [December 6, 2022, 9:41am UTC](https://discuss.openedx.org/t/add-new-custom-fields-to-account-settings-page/4062/8 "2022-12-06T09:41:52Z")
@luan.tm, if you don’t have `extended_profile_fields` in your existing site configuration, you should add it there. Please see [my previous comment](https://discuss.openedx.org/t/add-new-custom-fields-to-account-settings-page/4062/2) for detailed instructions. If you want to see which fields are already displayed, you can find them under [`fields_already_showing`](https://github.com/openedx/edx-platform/blob/23e12ac77900bf193c145d0b8fb94b08beee2b0b/openedx/core/djangoapps/user_api/accounts/settings_views.py#L235-L236). ---
**Author:** ![luan.tm](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/luan.tm/32/4138_2.png) [@luan.tm](https://discuss.openedx.org/u/luan.tm)\ **Post date:** [December 6, 2022, 10:05am UTC](https://discuss.openedx.org/t/add-new-custom-fields-to-account-settings-page/4062/9 "2022-12-06T10:05:32Z")
Hi, thanks for your answer I have a custom field select like this ![image](https://us1.discourse-cdn.com/flex020/uploads/openedx/original/2X/8/822621433bdc71a74c8b8f867c3bae749066d978.png) I try your example custom, It’s worked but display as text not select ![image](https://us1.discourse-cdn.com/flex020/uploads/openedx/original/2X/0/03ce6c7f7f3b9b35bdffa941f09443ccd06b941b.png) ![image](https://us1.discourse-cdn.com/flex020/uploads/openedx/original/2X/c/cccef7816aa977a2cdbf46ae2854d3ded028e3f5.png) After that, can I add my custom field to another block same as extended\_profile\_fields or my define block Hope you can answer this, many thanks ---
**Author:** ![Agrendalath](https://avatars.discourse-cdn.com/v4/letter/a/c68b51/32.png) [@Agrendalath](https://discuss.openedx.org/u/Agrendalath)\ **Post date:** [December 9, 2022, 1:02pm UTC](https://discuss.openedx.org/t/add-new-custom-fields-to-account-settings-page/4062/10 "2022-12-09T13:02:58Z")
@luan.tm, you can specify the dropdown options by adding the following items to your SiteConfiguration: ```json { "extended_profile_fields": [ "google_calendar" ], "EXTRA_FIELD_OPTIONS": { "google_calendar": [ "Accept", "Never" ] } } ``` After a user updates this field, this information will be available in the UserProfile → Meta (you can see it on the Django admin page `/admin/auth/user/`). Side note: the user will see the options just like provided in the `EXTRA_FIELD_OPTIONS`, but the result (in the UserProfile) will be in lowercase (i.e., “accept” or “never”). ---
**Author:** ![luan.tm](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/luan.tm/32/4138_2.png) [@luan.tm](https://discuss.openedx.org/u/luan.tm)\ **Post date:** [December 12, 2022, 7:23am UTC](https://discuss.openedx.org/t/add-new-custom-fields-to-account-settings-page/4062/11 "2022-12-12T07:23:23Z")
> [@Agrendalath](#): > > `extended_profile_fields` Many thanks for your answer , how about add a button and handle event in that button in account settings ---
**Author:** ![Agrendalath](https://avatars.discourse-cdn.com/v4/letter/a/c68b51/32.png) [@Agrendalath](https://discuss.openedx.org/u/Agrendalath)\ **Post date:** [December 12, 2022, 9:06am UTC](https://discuss.openedx.org/t/add-new-custom-fields-to-account-settings-page/4062/12 "2022-12-12T09:06:13Z")
It is possible but may need more changes. Given that [this page should be removed in the Olive release](https://edx.readthedocs.io/projects/open-edx-release-notes/en/latest/nutmeg.html#account-micro-frontend-mfe), it would be a throwaway effort. ---
**Author:** ![luan.tm](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/luan.tm/32/4138_2.png) [@luan.tm](https://discuss.openedx.org/u/luan.tm)\ **Post date:** [December 13, 2022, 2:28am UTC](https://discuss.openedx.org/t/add-new-custom-fields-to-account-settings-page/4062/13 "2022-12-13T02:28:08Z")
> [@Agrendalath](#): > > you might want to consider [creating a theme](https://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/configuration/changing_appearance/theming/create_theme.html#creating-a-theme), which will override the default [account\_settings\_factory](https://github.com/edx/edx-platform/blob/master/lms/static/js/student_account/views/account_settings_factory.js) Do you have any project or example to describe this for override account\_settings\_factory.js file ---
**Author:** ![luan.tm](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/luan.tm/32/4138_2.png) [@luan.tm](https://discuss.openedx.org/u/luan.tm)\ **Post date:** [December 13, 2022, 3:47am UTC](https://discuss.openedx.org/t/add-new-custom-fields-to-account-settings-page/4062/14 "2022-12-13T03:47:32Z")
> [@Agrendalath](#): > > @luan.tm, you can specify the dropdown options by adding the following items to your SiteConfiguration: > > ```json > { > "extended_profile_fields": [ > "google_calendar" > ], > "EXTRA_FIELD_OPTIONS": { > "google_calendar": [ > "Accept", > "Never" > ] > } > } > > ``` > > After a user updates this field, this information will be available in the UserProfile → Meta (you can see it on the Django admin page `/admin/auth/user/`). > > Side note: the user will see the options just like provided in the `EXTRA_FIELD_OPTIONS`, but the result (in the UserProfile) will be in lowercase (i.e., “accept” or “never”). Unfortunately EXTRA\_FIELD\_OPTIONS is not show verbose\_name and help\_text in account\_settings , so I have to custom in account\_settings\_factory.js