Refactor Create Group form with field-by-field rendering and error handling

[Dhairya1890]

Related issues

Fixes #952

Checklist

• Did you run the pre-commit? (If not, your PR will most likely not pass — please ensure it passes pre-commit)
• Did you test the change? (Ensure you didn’t just prompt the AI and blindly commit — test the code and confirm it works)
• Added screenshots to the PR description (if applicable)

Summary by CodeRabbit

Release Notes

• New Features

  • Added real-time form validation feedback with error alerts on the group creation form

• Style

  • Redesigned group creation form with a larger, responsive card layout
  • Enhanced dark mode styling and compatibility
  • Improved error message and help text display for form fields
  • Updated submit button with enhanced styling

[coderabbitai]

Walkthrough

A single template file is updated to replace basic form rendering with a responsive, field-by-field form layout that includes form error alerts, dark mode styling via inline CSS, and improved visual hierarchy.

Changes

Cohort / File(s)	Summary
Form Template Refactor web/templates/web/study/create_group.html	Converts form from static form.as_p rendering to structured field-by-field layout with responsive card design, non-field error alert block, per-field error display, help text rendering, dark mode support through extensive inline styles, and updated button styling. Form container expanded and made responsive with decorative header icon.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• PR #847 — Implements matching template-level changes to form control styling in customize.html with Tailwind dark-mode support and improved input presentation, following similar pattern updates.

Suggested reviewers

• A1L13N

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	The pull request addresses all five coding objectives from issue #952: adds form error feedback, replaces form.as_p with field-by-field rendering, implements Tailwind-based styling without global CSS, adds dark mode overrides, and improves responsiveness.
Out of Scope Changes check	✅ Passed	All changes are scoped to the create_group.html template and directly address the five requirements outlined in issue #952; no out-of-scope modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title accurately summarizes the main change: refactoring the Create Group form with field-by-field rendering and error handling, which directly addresses the primary objectives of the PR.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@web/templates/web/study/create_group.html`:
- Line 13: Add aria-hidden="true" to the decorative <i> icons so they are
ignored by assistive tech; specifically update the <i class="fas fa-users
text-2xl text-green-600 dark:text-green-400"> element and the other decorative
<i> elements referenced around lines 21 and 52 to include aria-hidden="true" (or
an equivalent attribute) while leaving semantic labels for real controls
unchanged so visual appearance stays the same but screen readers won't announce
them.
- Around line 34-47: The template renders form fields using raw widgets
(references: form, field, field.field.widget.input_type, field.id_for_label) and
relies on a large inline <style> block; remove that custom CSS and instead add
Tailwind utility classes to the form widgets via their widget attrs in the form
definition (or Form __init__) so templates only output {{ field }} with
Tailwind-styled widgets, update label markup to use the same Tailwind classes
shown (e.g., block/text-sm/font-medium/mb-1.5 and inline-flex/items-center/gap-3
for checkboxes), and then delete the inline style block (lines 67-166) from the
template to comply with the Tailwind-only rule.
- Line 60: The primary submit button in create_group.html currently uses green
utility classes (e.g., bg-green-600 hover:bg-green-700 active:bg-green-800) —
replace that class attribute on the submit button element with the project
primary button classes: "bg-teal-300 hover:bg-teal-400 text-white px-6 py-2
rounded-lg transition duration-200" (keep any necessary focus/outline classes
like focus:outline-none and focus:ring-* if present).

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 20cc175 and ea38527.

📒 Files selected for processing (1)

• web/templates/web/study/create_group.html

[ghanshyam2005singh]

I see there is lot's of changes in CSS, could you please add a screen recording showing the page in both light and dark mode, as well as responsiveness and also the error handling you have added.

[Dhairya1890]

@ghanshyam2005singh Sure, Here is the screen recording

Screencast.From.2026-02-26.20-41-45.mp4

Update : Forgot to test responsiveness, you can see the test here

Screencast.From.2026-02-26.21-27-04.mp4