This article will help you build sophisticated forms that enhance productivity and user experience.
Show/hide fields based on user input to create smart, adaptive forms:
// Example: Display "Additional Feedback" only if rating is ≤ 3
frappe.ui.form.on("Feedback", {
"rating": function(frm) {
frm.toggle_display("additional_feedback", frm.doc.rating <= 3);
}
});
Use Cases:
✔ Show follow-up questions for negative feedback
✔ Display warranty fields for product-related feedback
✔ Hide irrelevant sections based on user type
Auto-populate fields using:
Session data (logged-in user details)
URL parameters (e.g., ?product_id=123)
Linked documents (via Dynamic Link fields)
Restrict file types (PDF, PNG, etc.)
Set maximum upload size
Auto-attach to linked documents
Trigger workflows when forms are submitted:
Create Tasks for support teams on low ratings
Update CRM Records with new feedback
Send Alerts via email/SMS for urgent responses
# Example: Auto-create support ticket for poor ratings
def on_submit(doc, method):
if doc.rating <= 2:
frappe.get_doc({
"doctype": "Support Ticket",
"subject": f"Negative Feedback: {doc.name}",
"priority": "High"
}).insert()
Push data to Google Sheets for analysis
Sync with CRM systems like Salesforce
Trigger Zapier workflows for 500+ app connections
Role-based access: Restrict form visibility
Encrypted fields: For sensitive data (e.g., medical info)
GDPR compliance: Add consent checkboxes
Limit responses per user/IP address
Set form expiration dates
Enable CAPTCHA to prevent spam
/* Add company colors & fonts */
.web-form-container {
font-family: "Arial";
background-color: #f9f9f9;
}
.rating-widget {
color: #FFD700; /* Gold stars */
}
Remove "Powered by iVendNext"
Add custom logos
Match your brand’s color scheme
Lazy load non-critical fields
Minify custom JavaScript/CSS
Cache frequently accessed forms
Track user behavior with:
Google Analytics event tracking
Heatmaps (via Hotjar)
A/B testing tools like Optimizely