frappe-web-forms

Name: frappe-web-forms
Author: lubusIN

45installs11forks

How to install frappe-web-forms?

lubusin/frappe-skills/frappe-web-forms

$npx -y skills add lubusIN/frappe-skills --skill frappe-web-forms

Installs into the current project.

Summary

Build public-facing web forms for data collection without Desk access. Use when creating customer submission forms, feedback forms, or self-service portals with Frappe Web Forms.

Files · 1

View on GitHub

SKILL.md

1	# Frappe Web Forms
2
3	Build public-facing web forms for data collection, submissions, and customer self-service.
4
5	## When to use
6
7	- Creating forms for external users (no Desk access)
8	- Building support/ticket submission forms
9	- Collecting customer feedback or registrations
10	- Enabling self-service data entry portals
11	- Replacing simple portal pages with form-based workflows
12
13	## Inputs required
14
15	- Target DocType for form submissions
16	- Which fields to expose on the web form
17	- Authentication requirements (login required vs guest)
18	- Whether users can edit/resubmit entries
19	- File upload requirements
20
21	## Procedure
22
23	### 0) Prerequisites
24
25	Ensure the target DocType exists and has the fields you want to expose.
26
27	### 1) Create the Web Form
28
29	1. Type "new web form" in the awesomebar
30	2. Enter a Title (becomes the URL slug)
31	3. Select the DocType for record creation
32	4. Add introduction text (optional, shown above the form)
33	5. Click "Get Fields" to import all fields, or add fields manually
34	6. Set field order and which are required
35	7. Publish the form
36
37	### 2) Configure settings
38
39	\| Setting \| Purpose \|
40	\|---------\|---------\|
41	\| Login Required \| Require authentication before form access \|
42	\| Allow Edit \| Let users edit their submitted entries \|
43	\| Allow Multiple \| Let users submit more than one entry \|
44	\| Show as Card \| Display in card layout style \|
45	\| Max Attachment Size \| Limit file upload sizes \|
46	\| Success URL \| Redirect after successful submission \|
47	\| Success Message \| Custom message after submission \|
48
49	### 3) Make it a Standard Web Form (app-bundled)
50
51	Check "Is Standard" (visible in Developer Mode) to export the form as files:
52
53	```
54	my_app/
55	└── my_module/
56	└── web_form/
57	└── contact_us/
58	├── contact_us.json # Web form metadata
59	├── contact_us.py # Server-side customization
60	└── contact_us.js # Client-side customization
61	```
62
63	### 4) Add server-side customization
64
65	```python
66	# contact_us.py
67	import frappe
68
69	def get_context(context):
70	"""Add custom context variables to the web form."""
71	context.categories = frappe.get_all("Support Category",
72	filters={"enabled": 1},
73	fields=["name", "label"],
74	order_by="label asc"
75	)
76
77	def validate(doc):
78	"""Custom validation before the document is saved."""
79	if not doc.email:
80	frappe.throw("Email address is required")
81
82	# Prevent duplicate submissions
83	existing = frappe.db.exists("Support Ticket", {"email": doc.email, "status": "Open"})
84	if existing:
85	frappe.throw("You already have an open ticket. Please wait for a response.")
86	```
87
88	### 5) Add client-side customization
89
90	```javascript
91	// contact_us.js
92	frappe.ready(function() {
93	// Handle field changes
94	frappe.web_form.on("field_change", function(field, value) {
95	if (field === "category" && value === "Urgent") {
96	frappe.web_form.set_df_property("description", "reqd", 1);
97	}
98	});
99
100	// Custom validation
101	frappe.web_form.validate = function() {
102	let data = frappe.web_form.get_values();
103	if (data.phone && !data.phone.match(/^\+?[0-9\-\s]+$/)) {
104	frappe.msgprint("Please enter a valid phone number");
105	return false;
106	}
107	return true;
108	};
109
110	// Custom after-save behavior
111	frappe.web_form.after_save = function() {
112	frappe.msgprint("Thank you for your submission!");
113	};
114	});
115	```
116
117	### 6) Control permissions
118
119	- Guest access: Uncheck "Login Required" for fully public forms
120	- Portal roles: Assign portal roles to control which logged-in users see the form
121	- User permissions: Set explicit document-level permissions on the target DocType
122	- Row-level access: Use User Permission rules to restrict which records users can edit
123
124	### 7) Style the web form
125
126	Web forms use the website theme by default. For custom styling:
127
128	```html
129	<!-- Add custom CSS via Web Form → Custom CSS field -->
130	<style>
131	.web-form-container { max-width: 600px; margin: 0 auto; }
132	.web-form-container .form-group { margin-bottom: 1.5rem; }
133	.web-form-container .btn-primary { background-color: #2490EF; }
134	</style>
135	```
136
137	## Verification
138
139	- [ ] Web form accessible at the correct URL (`/contact-us`)
140	- [ ] All fields render correctly
141	- [ ] Required field validation works
142	- [ ] Submission creates the correct DocType record
143	- [ ] Login requirement enforced (if configured)
144	- [ ] Edit and resubmit work (if configured)
145	- [ ] File uploads work within size limits
146	- [ ] Success message/redirect works after submission
147	- [ ] Custom Python validation runs on submit
148
149	## Failure modes / debugging
150
151	- Form not accessible: Check if published; verify URL slug
152	- Permission denied on submit: Check DocType permissions for Website User or Guest
153	- Fields not showing: En

People who liked this also viewed

6 picks

Type

hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026262k37k
request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026165k181k
analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026161k507
explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026161k507
ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026160k181k
scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026149k181k

frappe-web-forms

45installs11forks

View on GitHub

How to install frappe-web-forms?

lubusin/frappe-skills/frappe-web-forms

$npx -y skills add lubusIN/frappe-skills --skill frappe-web-forms

Installs into the current project.

Summary

Build public-facing web forms for data collection without Desk access. Use when creating customer submission forms, feedback forms, or self-service portals with Frappe Web Forms.

Files · 1

View on GitHub

SKILL.md

1	# Frappe Web Forms
2
3	Build public-facing web forms for data collection, submissions, and customer self-service.
4
5	## When to use
6
7	- Creating forms for external users (no Desk access)
8	- Building support/ticket submission forms
9	- Collecting customer feedback or registrations
10	- Enabling self-service data entry portals
11	- Replacing simple portal pages with form-based workflows
12
13	## Inputs required
14
15	- Target DocType for form submissions
16	- Which fields to expose on the web form
17	- Authentication requirements (login required vs guest)
18	- Whether users can edit/resubmit entries
19	- File upload requirements
20
21	## Procedure
22
23	### 0) Prerequisites
24
25	Ensure the target DocType exists and has the fields you want to expose.
26
27	### 1) Create the Web Form
28
29	1. Type "new web form" in the awesomebar
30	2. Enter a Title (becomes the URL slug)
31	3. Select the DocType for record creation
32	4. Add introduction text (optional, shown above the form)
33	5. Click "Get Fields" to import all fields, or add fields manually
34	6. Set field order and which are required
35	7. Publish the form
36
37	### 2) Configure settings
38
39	\| Setting \| Purpose \|
40	\|---------\|---------\|
41	\| Login Required \| Require authentication before form access \|
42	\| Allow Edit \| Let users edit their submitted entries \|
43	\| Allow Multiple \| Let users submit more than one entry \|
44	\| Show as Card \| Display in card layout style \|
45	\| Max Attachment Size \| Limit file upload sizes \|
46	\| Success URL \| Redirect after successful submission \|
47	\| Success Message \| Custom message after submission \|
48
49	### 3) Make it a Standard Web Form (app-bundled)
50
51	Check "Is Standard" (visible in Developer Mode) to export the form as files:
52
53	```
54	my_app/
55	└── my_module/
56	└── web_form/
57	└── contact_us/
58	├── contact_us.json # Web form metadata
59	├── contact_us.py # Server-side customization
60	└── contact_us.js # Client-side customization
61	```
62
63	### 4) Add server-side customization
64
65	```python
66	# contact_us.py
67	import frappe
68
69	def get_context(context):
70	"""Add custom context variables to the web form."""
71	context.categories = frappe.get_all("Support Category",
72	filters={"enabled": 1},
73	fields=["name", "label"],
74	order_by="label asc"
75	)
76
77	def validate(doc):
78	"""Custom validation before the document is saved."""
79	if not doc.email:
80	frappe.throw("Email address is required")
81
82	# Prevent duplicate submissions
83	existing = frappe.db.exists("Support Ticket", {"email": doc.email, "status": "Open"})
84	if existing:
85	frappe.throw("You already have an open ticket. Please wait for a response.")
86	```
87
88	### 5) Add client-side customization
89
90	```javascript
91	// contact_us.js
92	frappe.ready(function() {
93	// Handle field changes
94	frappe.web_form.on("field_change", function(field, value) {
95	if (field === "category" && value === "Urgent") {
96	frappe.web_form.set_df_property("description", "reqd", 1);
97	}
98	});
99
100	// Custom validation
101	frappe.web_form.validate = function() {
102	let data = frappe.web_form.get_values();
103	if (data.phone && !data.phone.match(/^\+?[0-9\-\s]+$/)) {
104	frappe.msgprint("Please enter a valid phone number");
105	return false;
106	}
107	return true;
108	};
109
110	// Custom after-save behavior
111	frappe.web_form.after_save = function() {
112	frappe.msgprint("Thank you for your submission!");
113	};
114	});
115	```
116
117	### 6) Control permissions
118
119	- Guest access: Uncheck "Login Required" for fully public forms
120	- Portal roles: Assign portal roles to control which logged-in users see the form
121	- User permissions: Set explicit document-level permissions on the target DocType
122	- Row-level access: Use User Permission rules to restrict which records users can edit
123
124	### 7) Style the web form
125
126	Web forms use the website theme by default. For custom styling:
127
128	```html
129	<!-- Add custom CSS via Web Form → Custom CSS field -->
130	<style>
131	.web-form-container { max-width: 600px; margin: 0 auto; }
132	.web-form-container .form-group { margin-bottom: 1.5rem; }
133	.web-form-container .btn-primary { background-color: #2490EF; }
134	</style>
135	```
136
137	## Verification
138
139	- [ ] Web form accessible at the correct URL (`/contact-us`)
140	- [ ] All fields render correctly
141	- [ ] Required field validation works
142	- [ ] Submission creates the correct DocType record
143	- [ ] Login requirement enforced (if configured)
144	- [ ] Edit and resubmit work (if configured)
145	- [ ] File uploads work within size limits
146	- [ ] Success message/redirect works after submission
147	- [ ] Custom Python validation runs on submit
148
149	## Failure modes / debugging
150
151	- Form not accessible: Check if published; verify URL slug
152	- Permission denied on submit: Check DocType permissions for Website User or Guest
153	- Fields not showing: En

People who liked this also viewed

6 picks

Type