Try ERPNext Buy Support Partners Foundation

Custom SignUp Page

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.

4 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?

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.