Customize a Web Form

Web Forms can be customized to improve their appearance, simplify user interactions, and support specific business requirements. You can modify the layout, customize the submission experience, apply styling, and add client-side scripts.

Customize the Field Layout

You can organize fields using the following layout elements:

• Section Break – Groups related fields into separate sections.
• Column Break – Displays fields in multiple columns.

These layout elements help create well-structured and easy-to-read forms.

Using sections and columns makes large forms easier for users to navigate.

Create a Multi-Step Web Form

For forms with many fields, you can divide the form into multiple pages by inserting Page Breaks.

Each Page Break creates a new step in the form, resulting in a multi-step user experience.

Customize the Submit Button

You can change the label displayed on the submit button to better match your workflow or business process.

For example, instead of Submit, you may use labels such as Register, Apply, or Send Request.

Add a Banner Image

You can display a banner image at the top of the Web Form to improve branding and provide a more engaging appearance.

Customize Breadcrumbs

Breadcrumbs can be customized by providing a JSON configuration.

Customize the Success Page

After a successful submission, you can configure a custom confirmation page by specifying:

• Success title
• Success message

Depending on the user’s permissions, the confirmation page may also include actions such as:

• View your response
• Edit your response
• See previous responses
• Submit another response

When a Web Form is opened through a Web Form Request, these action links automatically preserve the request key.

Redirect After Submission

You can automatically redirect users to another page after a successful submission by configuring the success_url field.

The redirection occurs approximately five seconds after the confirmation page is displayed.

Apply Custom CSS

Custom CSS allows you to modify the appearance of your Web Form beyond the default styling.

You can customize elements such as:

• Colors
• Borders
• Spacing
• Typography
• Layout

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;
}

Add Client Scripts

Client Scripts allow you to add custom JavaScript functionality to a Web Form, including validation, dynamic field behavior, and event handling.

Available Functions

Field Event Handler

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

Get Field Value

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

Set Field Value

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

Custom Validation

frappe.web_form.validate = () => {
    // return false if validation fails
}

Update Field Properties

frappe.web_form.set_df_property([fieldname], [property], [value]);

Run Script After Form Loads

frappe.web_form.after_load = () => {
    // initialization code
}

Client Script Examples

Reset a Field Value

frappe.web_form.on('amount', (field, value) => {
    if (value < 1000) {
        frappe.msgprint('Value must be more than 1000');
        field.set_value(0);
    }
});

Validate Before Submission

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 Dynamically

frappe.web_form.on('amount', (field, value) => {
    if (value < 1000) {
        frappe.web_form.set_df_property('rate', 'hidden', 1);
    }
});

Display a Message When the Form Loads

frappe.web_form.after_load = () => {
    frappe.msgprint('Please fill all values carefully');
};