home / skills / venkateshvenki404224 / frappe-apps-manager / frappe-web-form-builder

frappe-web-form-builder skill

safe

/frappe-apps-manager/skills/frappe-web-form-builder

This skill helps you generate public-facing web forms with validation and file uploads for customer portals, surveys, and registrations.

npx playbooks add skill venkateshvenki404224/frappe-apps-manager --skill frappe-web-form-builder

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

2.8 KB

---
name: frappe-web-form-builder
description: Generate Frappe Web Forms for public-facing forms. Use when creating customer portals, registration forms, surveys, or public data collection forms.
---

# Frappe Web Form Builder

Generate public-facing web forms with validation, file uploads, and integration with Frappe DocTypes.

## When to Use This Skill

Claude should invoke this skill when:
- User wants to create public forms
- User needs customer-facing forms
- User mentions web forms, surveys, or registration
- User wants portal functionality
- User needs forms without login

## Capabilities

### 1. Web Form JSON

**Customer Registration Form:**
```json
{
  "name": "Customer Registration",
  "route": "customer-registration",
  "title": "Register as Customer",
  "doc_type": "Customer",
  "is_standard": 0,
  "login_required": 0,
  "allow_multiple": 1,
  "show_sidebar": 0,
  "success_url": "/thank-you",
  "success_message": "Registration successful! We'll contact you soon.",
  "introduction_text": "Please fill in your details to register",
  "web_form_fields": [
    {
      "fieldname": "customer_name",
      "label": "Full Name",
      "fieldtype": "Data",
      "reqd": 1
    },
    {
      "fieldname": "email_id",
      "label": "Email",
      "fieldtype": "Data",
      "options": "Email",
      "reqd": 1
    },
    {
      "fieldname": "mobile_no",
      "label": "Phone",
      "fieldtype": "Data",
      "reqd": 1
    },
    {
      "fieldname": "customer_group",
      "label": "Type",
      "fieldtype": "Select",
      "options": "Individual\nCompany",
      "reqd": 1
    },
    {
      "fieldname": "company_name",
      "label": "Company Name",
      "fieldtype": "Data",
      "depends_on": "eval:doc.customer_group=='Company'"
    }
  ]
}
```

### 2. Multi-Step Form

**Multi-Page Web Form:**
```json
{
  "name": "Job Application",
  "is_multi_step": 1,
  "web_form_fields": [
    {
      "fieldname": "step_1",
      "fieldtype": "Section Break",
      "label": "Personal Information"
    },
    {"fieldname": "full_name", "fieldtype": "Data", "reqd": 1},
    {"fieldname": "email", "fieldtype": "Data", "options": "Email", "reqd": 1},

    {
      "fieldname": "step_2",
      "fieldtype": "Section Break",
      "label": "Experience"
    },
    {"fieldname": "years_experience", "fieldtype": "Int"},
    {"fieldname": "current_company", "fieldtype": "Data"},

    {
      "fieldname": "step_3",
      "fieldtype": "Section Break",
      "label": "Documents"
    },
    {"fieldname": "resume", "fieldtype": "Attach", "reqd": 1}
  ]
}
```

## References

**Web Form Implementation:**
- Web Form DocType: https://github.com/frappe/frappe/tree/develop/frappe/website/doctype/web_form
- Web Form Controller: https://github.com/frappe/frappe/blob/develop/frappe/website/doctype/web_form/web_form.py

Overview

This skill generates Frappe Web Forms for public-facing data collection, including registration pages, surveys, and file-upload flows. It produces JSON definitions that map to Frappe DocTypes, supports multi-step forms, validation rules, conditional fields, and post-submit behavior. Use it to create portal-friendly forms that do not require user login and integrate directly with your Frappe app.

How this skill works

The skill outputs Web Form JSON conforming to Frappe's Web Form DocType structure: metadata (name, route, doc_type), UI options (title, introduction, success message/url), and a web_form_fields array describing each field. It can mark forms as multi-step, set required fields, define selects and dependencies, and include file attachment fields. Generated JSON is ready to be imported or used with Frappe APIs to create public web forms tied to your DocTypes.

When to use it

Create customer-facing registration or signup pages without requiring login
Build public surveys, feedback forms, or data collection pages
Implement multi-step applications such as job applications or registrations
Collect documents, attachments, or uploads from external users
Expose specific DocType creation through a simple public route

Best practices

Map form fields to an existing DocType to leverage Frappe validation and workflows
Use conditional fields (depends_on) to show relevant fields and reduce user friction
Set success_url and a clear success_message to guide users after submission
Require only essential fields to maximize completion rates and use server-side validation
Use Attach fieldtype for uploads and enforce size/type constraints in DocType validation

Example use cases

Customer Registration form that creates Customer records with email and phone validation
Multi-step Job Application with personal info, experience, and resume upload
Event RSVP page that collects attendee details and ticket type selection
Public survey that stores responses in a custom DocType for analytics
Support request form that accepts screenshots via Attach and routes to support workflows

FAQ

Can the form create records without user accounts?

Yes. Set login_required to 0 so external users can submit without logging in.

How do I require a file upload?

Add a field with fieldtype 'Attach' and set reqd to 1; validate file types/sizes in the DocType.

Can I split the form into pages?

Yes. Use is_multi_step and Section Break fields to define steps in the web_form_fields array.