ERPNext Foundation ERPNext Cloud User Manual Blog Discuss Frappé* Donate

Custom SignUp Page


#21

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.