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.