Web Forms

Frappe provides an easy way to generate forms for your website with very little configuration. These forms may be public (anyone can fill them up) or can be configured to require login.

Web Form

Creating a Web Form

To create a Web Form, type "new web form" in awesomebar and hit enter.

  1. Enter Title
  2. Select DocType for which the record should be created.
  3. Select fields for your web form. These fields are populated from the DocType.

For detailed explanation, check user manual

New Web Form

Standard Web Forms

If you check the "Is Standard" checkbox, a new folder will be created in the module of the Web Form. In this folder, you will see a .py and .js file that you can use to configure the web form. These files need to be checked into version control with your custom app. You can install this app on any site and it will have this web form installed.

Custom Script

Introduced in Version 11

You can also add a custom client script to the web form

Event Handler

Write an event handler to do actions when a field is changed.

frappe.web_form.on([fieldname], [handler]);
Get Value

Get value of a particular field

value = frappe.web_form.get_value([fieldname]);
Set Value

Set value of a particular field

frappe.web_form.set_value([fieldname], [value])
Validate

frappe.web_form.validate is called before the web_form is saved. Add custom validation by overriding the validate method. To stop the user from saving, return false;

frappe.web_form.validate = () => {
    // return false if not valid
}
Set Field Property
frappe.web_form.set_field_property([fieldname], [property], [value]);
Trigger script when form is loaded

Initialize form with customisation after it is loaded

frappe.web_form.after_load = () => {
    // init script here
}

Examples

Reset value if invalid
frappe.web_form.on('amount', (field, value) => {
    if (value < 1000) {
        frappe.msgprint('Value must be more than 1000');
        field.set_value(0);
    }
});
Custom Validation
frappe.web_form.validate = () => {
    let data = frappe.web_form.get_values();
    if (data.amount < 1000) {
        frappe.msgprint('Value must be more than 1000');
        return false;
    }
});
Hide a field based on value
frappe.web_form.on('amount', (field, value) => {
    if (value < 1000) {
        frappe.web_form.set_field_property('rate', 'hidden', 1);
    }
});
Show a message on startup
frappe.web_form.after_load = () => {
    frappe.msgprint('Please fill all values carefully');
}

You can customize the breadcrumbs in a Web Form by adding JSON object.

Example:

[{"label": "Home", "route":"/" }]