Customization

You can customize your webform to make it more unique and enable functionalities to meet your usecase.

Fields Layout

You can add Column Breaks & Section Breaks in webform fields table to change the layout of the form fields. Web Form Field Layout Web Form Layout

Multi Step Webform

Updating the layout makes webform look better but still if webform has many fields it becomes lengthy. We can add Page Breaks to segregate the sections in different pages (called as Multi Step Webform).

You can add maximum 9 Page Breaks which will only allow 10 Pages.

Web Form Page Break Step Web Form Page 1 Step Web Form Page 2

All the customization options mentioned below can be done from the Customization Tab of webform document.

Submit Button Label

You can change the label of submit button on the webform. Web Form Submit Label

You can now add banner image on webform. Banner Image

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

Breadcrumbs are only visible if the webform list view is enabled. Check how you can enable list view.

Example: Custom Breadcrumbs Webform Breadcrumbs

After Submit Page

You can give custom success title and message which will appear after user has submitted the webform. Webform Success Title & Message Webform Success Page

Based on the access extra buttons will be visible on the submit page like & Webform Success Page

Configure your webform to redirect to a specific URL after 5 seconds after it has been submitted by setting success_url field. Webform Breadcrumbs

Custom CSS

You can add custom css to change the look of the webform

Example:

.web-form-header {
    margin-bottom: 2rem;
    border: 1px solid var(--blue-200) !important;
    border-radius: var(--border-radius);
    background-color: var(--blue-50) !important;
}

.web-form-head {
    border: none !important;
    padding-bottom: 2rem !important;
}

.web-form {
    border: 1px solid var(--dark-border-color) !important;
    border-radius: var(--border-radius);
    padding-top: 2rem !important;
}

Web Form Custom CSS

Client Script

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_df_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_df_property('rate', 'hidden', 1);
    }
});
Show a message on startup
frappe.web_form.after_load = () => {
    frappe.msgprint('Please fill all values carefully');
}