ModernForm

ModernForm is a premium modern form component designed for collecting user information, artwork submissions, media uploads, and contact details through a clean and interactive interface. Built with responsive layouts and smooth animations, this component is ideal for creative portfolios, agencies, SaaS products, dashboards, and modern websites.

The component includes essential form fields such as Full Name and Email inputs along with optional Artwork and Video upload functionality. Users can upload multiple media formats including PDF, JPG, PNG, GIF, WEBP, SVG, MP4, WEBM, and MOV files, making the component perfect for creative submissions and media-based applications.

Main Features

Form Fields

• Full Name input field

• Email input field

• Optional Artwork upload

• Optional Video upload

• File type support for documents, images, and videos

File Upload Support

Supported file formats include:

• PDF

• JPG / JPEG

• PNG

• GIF

• WEBP

• SVG

• MP4

• WEBM

• MOV

Form Submission System

• Send form data using POST request

• FormData support with file uploads

• Custom Send To URL integration

• Redirect URL after submission

• Smooth success handling workflow

Animated User Experience

ModernForm includes smooth UI animations for better interaction:

• Staggered field entry animations

• Hover and tap button animations

• Animated success checkmark

• Fade-in Thank You message

• Auto-reset form after submission

Customization Controls

The component provides flexible customization settings:

• Custom field labels

• Editable placeholder text

• Custom submit button text

• Show/Hide upload fields

• File type configuration controls

Styling Controls

Fully customizable modern design system:

• Background color controls

• Border radius settings

• Shadow toggle options

• Adjustable container padding

• Input background colors

• Border styling

• Text color customization

• Button colors and text styling

• Success message colors

Typography Controls

Customize fonts for:

• Labels

• Inputs

• Buttons

• Success messages

Responsive Design Features

• Fully responsive layout

• Flexible sizing support

• Scrollable overflow handling

• Mobile-friendly structure

• Adaptive width and height system

Where This Component Can Be Used

• Portfolio Websites

• Creative Agency Sites

• Artwork Submission Forms

• Media Upload Platforms

• SaaS Applications

• Contact Forms

• Client Submission Portals

• Business Websites

• Dashboard Applications

• Freelancer Portfolios

Technologies Used

• React

• Framer Motion

• JavaScript / TypeScript

• FormData API

• Responsive CSS Layouts