Custom SignUp Page

No No, I mean that whatever data that is entered, how can we retrieve them to customize the signup. Suppose I add an extra field on the signup form say phone number, how can I put that in the database?

you should check templates/includes/login/login.js if you use ERPv7

Thank You @SwitsolAG for your reply, but that is only for the validations.

Probably you should check how it works and then can see how you can make it with your custom field.
I suppose in this part you can see how it takes value for signup
$(".form-signup").on("submit", function(event) { event.preventDefault(); var args = {}; args.cmd = "frappe.core.doctype.user.user.sign_up"; args.email = ($("#signup_email").val() || "").trim(); args.redirect_to = get_url_arg("redirect-to") || ''; args.full_name = ($("#signup_fullname").val() || "").trim(); if(!args.email || !valid_email(args.email) || !args.full_name) { frappe.msgprint(__("Valid email and name required")); return false; } login.call(args); return false; });

Has this been implemented by anyone yet? I am interested in the same since many people don’t like to use their email ID and would rather use a phone number. While a phone number can be easily used for login, there seems to be no straight forward way to use it for signup. Even though I have been able to make changes to the Signup page such that it asks for the phone number, I am not about how to get it to save in the database, such that a registration confirmation may be sent through the SMS. I will set up the SMS gateway later but for now I need the phone number to be saved at the time of signup itself.
Thank you

1 Like

@saurabh2804

1 Like

Thank you for the reply. It allows for signin with phone number but I am interested in being able to signup with a phone number, such that phone number is saved right at the time of signup.

Can someone point me to the resources I should be looking at if I want to figure it out. I am from a medical background and am just learning programming. I can look at existing solutions and change them for my use case. If I do, i will post the solution here. Basically I am looking for a way to accept more information from the User, apart from the Email and password at the time of registration itself. It might be helpful in several use cases besides mine.
Thank you.

I found this discussion as being helpful. I will build from here and if successful I will post back here. In the meantime, any help will be really appreciated.
Thank you.

A possible workaround:

  1. Create a custom doctype, which has all the fields you want to collect from the user
  2. Create a web form on that doctype and make it public. Share the link as the signup form
  3. Disable the default user signup from the website
  4. Create a hook that programmatically creates a new user from the information in the doctype when the web form is submitted

Can I get the OTP system to work with that workaround? I want the OTP to be sent by SMS only, not by email.

This is my solution for getting customers to input their Mobile Phone number during Signup.

We will need to make changes to 3 main files for this solution to work: login.html (apps/frappe/frappe/www/login.html), login.js (apps/frappe/frappe/templates/includes/login/login.js), and user.py (apps/frappe/frappe/core/doctype/user/user.py)

login.html

<form class="form-signin form-signup hide" role="form">
		<div class="page-card-head">
			<span class="indicator blue" data-text="{{ _("Sign Up") }}"></span>
		</div>
		<input type="text" id="signup_fullname"
			class="form-control" placeholder="{{ _('Full Name') }}" required autofocus>
		<input type="email" id="signup_email"
			class="form-control" placeholder="{{ _('Email address') }}" required>
			<input type="tel" id="mobile_no"
			class="form-control" placeholder="{{ _('Mobile Number') }}" required>
		<button class="btn btn-sm btn-primary btn-block btn-signup" type="submit">{{ _("Sign up") }}</button>
	</form>

Here we have added the line:

<input type="tel" id="mobile_no"
			class="form-control" placeholder="{{ _('Mobile Number') }}" required>

Here, id="mobile_no" is then used to customize login.js

login.js

$(".form-signup").on("submit", function(event) {
		event.preventDefault();
		var args = {};
		args.cmd = "frappe.core.doctype.user.user.sign_up";
		args.email = ($("#signup_email").val() || "").trim();
		args.mobile_no = ($("#mobile_no").val() || "").trim()
		args.redirect_to = get_url_arg("redirect-to") || '';
		args.full_name = ($("#signup_fullname").val() || "").trim();
		if(!args.email || !valid_email(args.email) || !args.full_name) {
			login.set_indicator("{{ _("Valid email and name required") }}", 'red');
			return false;
		}
		login.call(args);
		return false;
	});

Here, we have added a line:

args.mobile_no = ($("#mobile_no").val() || "").trim();

user.py

In user.py, we will add the mobile_no reference at 2 places:

def sign_up(email, full_name, mobile_no, redirect_to):

And within the same function:

from frappe.utils import random_string
		user = frappe.get_doc({
			"doctype":"User",
			"email": email,
			"mobile_no":mobile_no,
			"first_name": full_name,
			"enabled": 1,
			"new_password": random_string(10),
			"user_type": "Website User"
		})

The limitation is that we can only take information that is available in the “User” DocType. I am unable to customize the User DocType to add the fields that I need.
I can add custom fields in User DocType but it can’t be exported to one’s app.

6 Likes

saurabh2804

I’ve followed your above mentioned steps, there is no error though in creating new customer but I think user.py is not saving mobile_no in db. I’ve checked the login.js is taking value from login.html page. Couldn’t reach out why mobile_no is not saving in db. Could you please guide further?

1 Like

Hello can u plz explain this process how to do " 1. Create a hook that programmatically creates a new user from the information in the doctype when the web form is submitted" ???

Just pass the required field parameters accordingly. And set which are mandatory and which are not by throwing a validation error.

I’ve followed your above-mentioned steps, then do (bench restart) and everything works OK
Please try to do bench restart

Hi there. I’m interested in this subject also, but I have a personal question, if you don’t mind, pls.
If we change the following 3 files as you mention:

  • (apps/frappe/frappe/www/login.html), login.js
  • (apps/frappe/frappe/templates/includes/login/login.js), and user.py
  • (apps/frappe/frappe/core/doctype/user/user.py)…
    … these 3 files are core files, as I understand.
    If we update core files directly, in case we will update frappe to a new version, that means all customisations made on core files, will be lost.

Am I right, or is this safe?

Thank you!

do you find any solution now?? i have same issue now

do you find any solution now?? i have same issue now???/

could you tell me the correct method to validate on the cutom input that i added such as phone input???