Skip to content

Update Contact.tsx#319

Open
ArshiBansal wants to merge 1 commit into
GitMetricsLab:mainfrom
ArshiBansal:contact_form_enhanced
Open

Update Contact.tsx#319
ArshiBansal wants to merge 1 commit into
GitMetricsLab:mainfrom
ArshiBansal:contact_form_enhanced

Conversation

@ArshiBansal
Copy link
Copy Markdown

@ArshiBansal ArshiBansal commented May 18, 2026

Related Issue


Description

This PR enhances the Contact Form section of the Contact page to improve usability, accessibility, and overall user experience.

Changes Made

  • Added a two-column layout for Full Name and Email fields on desktop screens.
  • Introduced field icons for Full Name, Email, and Message inputs.
  • Implemented form validation with inline error messages.
  • Expanded the Subject dropdown with additional options:
    • General Inquiry
    • Bug Report
    • Feature Request
    • Billing Support
    • Partnership
    • Other
  • Increased the Message textarea height and improved its placeholder text.
  • Added a live character counter for the Message field.
  • Replaced the floating send button with a prominent full-width submit button.
  • Added loading state while the form is being submitted.
  • Added trust indicators below the form:
    • Your information is secure
    • One business day response
    • Mon–Fri support
  • Reset form fields after successful submission.

Note: No changes were made to the header, background, contact information cards, or success popup.


How Has This Been Tested?

  • Verified that Full Name and Email fields display side by side on desktop and stack on mobile.
  • Tested validation for all fields:
    • Empty fields
    • Invalid email addresses
    • Message shorter than 20 characters
  • Confirmed inline error messages appear correctly.
  • Verified the submit button shows a loading state during submission.
  • Confirmed the form resets after successful submission.
  • Checked character counter updates in real time.
  • Tested in both Light and Dark modes.
  • Verified responsive behavior on mobile, tablet, and desktop screen sizes.

Before

  • Name and Email fields stacked vertically
  • Small floating send button inside textarea
  • No validation or trust indicators

After

  • Name and Email fields displayed in two columns on desktop
  • Large full-width gradient submit button
  • Inline validation messages
  • Character counter
  • Trust indicators below the form

Type of Change

  • Bug fix
  • New feature
  • Code style update
  • Breaking change
  • Documentation update

Summary by CodeRabbit

  • New Features
    • Enhanced contact form with real-time validation for required fields, email format, and message length
    • Added character counter for message field
    • Live error messages displayed below form fields
    • Form now shows loading state during submission with animated icon
    • Success popup confirmation after form submission
    • New Trust Indicators section showcasing security and reliability features

Review Change Stack

@netlify
Copy link
Copy Markdown

netlify Bot commented May 18, 2026

Deploy Preview for github-spy ready!

Name Link
🔨 Latest commit 5764c14
🔍 Latest deploy log https://app.netlify.com/projects/github-spy/deploys/6a0b1272d81b1e0008febb61
😎 Deploy Preview https://deploy-preview-319--github-spy.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 18, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d8df612c-40b8-40d8-bd86-e48b44e81366

📥 Commits

Reviewing files that changed from the base of the PR and between 8d17610 and 5764c14.

📒 Files selected for processing (1)
  • src/pages/Contact/Contact.tsx

📝 Walkthrough

Walkthrough

The Contact page is enhanced from a mostly uncontrolled form to a fully controlled, validated form. Form state management with validation logic is added, controlled input components are wired to render errors, and a success popup and reset flow are implemented. A Trust Indicators section with icons is added. Minor styling refinements are applied to the contact section cards.

Changes

Contact Form Enhancement

Layer / File(s) Summary
Form State, Validation & Submit Logic
src/pages/Contact/Contact.tsx
Introduces FormData and FormErrors types and state. Implements handleInputChange to update form data while clearing field errors. validateForm checks required fields, email format, and message length. handleSubmit validates, prevents default, simulates async submission, displays success popup, and resets form afterward.
Enhanced Form UI with Controlled Inputs & Trust Indicators
src/pages/Contact/Contact.tsx
Converts form inputs to controlled components bound to formData, renders field errors from errors state, and adds a live character count. Submit button shows "Sending…" with animated icon during submission. Introduces a Trust Indicators section below the form with Shield, Clock, and Calendar icons describing security, response time, and availability.
Contact Section Styling & Layout Refinements
src/pages/Contact/Contact.tsx
Updates header labels, title className formatting, and contact card styling. Refines card description text wrapping and destructuring. Adjusts dark/light mode className conditions for card text, icons, titles, and details. Removes duplicated styling fragments.

Sequence Diagram

sequenceDiagram
  participant User
  participant ContactForm as Contact Form
  participant Validator as Form Validator
  participant FormState as Form State
  participant UIRender as UI Renderer
  
  User->>ContactForm: Enter form data
  ContactForm->>FormState: handleInputChange updates formData
  FormState->>UIRender: Clear field error
  
  User->>ContactForm: Click submit
  ContactForm->>Validator: validateForm(formData)
  
  alt Validation fails
    Validator->>FormState: Set errors for invalid fields
    FormState->>UIRender: Display error messages
  else Validation passes
    Validator->>FormState: Clear errors
    FormState->>UIRender: Set isSubmitting true, disable submit
    ContactForm->>ContactForm: Simulate async submit (500ms delay)
    ContactForm->>UIRender: Show success popup
    ContactForm->>FormState: Reset formData to initial state
    FormState->>UIRender: Re-enable submit button
  end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested labels

level:intermediate, quality:clean, type:accessibility

Poem

🐰 A form that validates with care,
Input by input, error-aware,
Trust badges sparkle, success bells chime,
Contact form flows with better UI time!
✨ Enhancement hops along the way. 🚀

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check ❓ Inconclusive The title "Update Contact.tsx" is vague and generic, using a non-descriptive term that doesn't convey meaningful information about the changeset. Revise the title to be more specific, such as "Enhance Contact form with validation, layout improvements, and trust indicators" to clearly reflect the main changes.
✅ Passed checks (3 passed)
Check name Status Explanation
Description check ✅ Passed The pull request description is comprehensive, following the template structure with all required sections filled out including Related Issue, Description with detailed changes, testing methodology, and Type of Change selection.
Linked Issues check ✅ Passed The PR successfully implements all key objectives from issue #318: two-column layout for Name/Email fields, full-width submit button, input validation with error messages, field icons, expanded Subject dropdown, character counter, and trust indicators below the form.
Out of Scope Changes check ✅ Passed All changes in the PR are directly aligned with the objectives in issue #318. The modifications focus exclusively on Contact form enhancements with validation, layout, icons, and trust indicators as specified.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Enhance Contact Page UI/UX with Improved Visual Hierarchy, Form Usability, and Trust Indicators

1 participant