Overview

This article will walk you through the process of creating, customizing, and integrating Web Forms into your existing workflows.

1. Understanding Web Forms

What Are Web Forms?

Web Forms in iVendNext are dynamic interfaces that allow users to input data, which is then stored in a designated DocType. They are useful for:

• Customer Feedback: Collect ratings and comments.

• Surveys: Gather insights from users.

• Order Processing: Capture order details.

• Service Requests: Register support tickets.

Key Benefits

• No Coding Required: Built using a drag-and-drop interface.

• Seamless Integration: Works with DocTypes and Notifications.

• Customizable: Supports various field types and layouts.

2. Creating a Web Form

Step 1: Define a DocType

Before creating a Web Form, you need a custom DocType to store submitted data.

1. Navigate to Home > Build > Custom DocType > New.

2. Add relevant fields:

• Dynamic Link Field: Connects the form to documents (e.g., Sales Order).

• Rating Field: For feedback (e.g., 1–5 scale).

• Text Fields: For comments or descriptions.

Idea: Use a clear naming convention (e.g., "Customer Feedback Form") for easy identification.

Step 2: Build the Web Form

1. Go to Home > Website > Web Form > New.

2. Select the target DocType (e.g., "Feedback").

3. Drag and drop fields into the form layout.

3. Customizing Web Forms

Field Types and Advanced Options

iVendNext supports multiple field types for different use cases:

Conditional Logic with Client Scripts

Enhance user experience by showing/hiding fields based on selections.

// Example: Show "Comments" only if rating is low  

frappe.ui.form.on("Feedback", {  

    "rating": function(frm) {  

        frm.toggle_display("comments", frm.doc.rating <= 3);  

    }  

});  

4. Integrating Web Forms into Workflows

Notifications with Embedded Forms

Automate feedback collection by sending Web Form links via email:

1. Create a Notification under Settings > Notifications.

2. Use a dynamic URL:

https://yourdomain.ivendnext.com/feedback?new=1&document=Sales%20Order&document_name={{doc.name}}  

• Replace your domain with your iVendNext instance.

• {{doc.name}} auto-populates the linked document name.

Permissions and Security

• Restrict access by assigning roles (e.g., "Customer").

• Enable "Allow Editing After Submission" for corrections.

5. Best Practices for Web Forms

• Keep It Simple: Limit fields to essential data.

• Test Before Deployment: Preview forms to ensure functionality.

• Monitor Responses: Use List View to analyze submissions.