Adding custom fields in the registration page

On Marketplacekit, you can add your own custom fields on the registration page. You can add Member type, Phone Number, Company Name, etc. within the signup form.

To enable Member type(Role) in the registration page, you can see "How to enable role in the registration page?".

Besides member roles, you can also let users add other options within the signup form on the registration page. But, with the latest update, you can only do this via HTML/Frontend editor which is only available on the paid version since the site needs rebuilding every time you make any change on the frontend/vue files.

So to add a custom field on the registration page, first, log in to your panel. Then, click on "Addons", you will be redirected to a new page. There, click on "Settings" of "HTML & CSS Editor".

You will be redirected to the following page.

Click on "HTML" to open up the frontend editor

Click on "layouts/default.vue" to open the list of other vue files. Then, find "pages/auth/register.vue" and click on it to open it in the editor.

In the editor, copy this code:

<div class="form-group">
 <label class="form-control-label" for="company">{{ __("Company") }}</label>
 <input class="form-control" type="text" id="company" v-model="form.filters.company" placeholder="Your company name" name="company" required autofocus="" />
</div>

and paste it inside the < form ></ form > tag.

Now, you'll need to rebuild the site's HTML to see any changes you make on the .vue files.

For this, go to https://app.marketplacekit.com/live. There, you will see your live site.

Click on it and you will be redirected to a new page, where you can edit the settings for the site. Now, scroll down to the "Advanced controls" section, where you can see the option to rebuild HTML at the very top. Click on "Rebuild" and wait for five to fifteen minutes to see the changes.

The form on the registration page will look like this.

The data entered on these additional fields can be viewed on that particular user's page in the admin panel under "Filters".