How to Add Document Upload to Your Next.js Contact Form

Building a contact form with document upload functionality can significantly enhance user experience by allowing visitors to share attachments, portfolios, or supporting documents. In this comprehensive guide, we'll walk through creating a robust Next.js contact form with secure file upload capabilities.

What You'll Learn

• How to implement file upload in React with proper validation
• Secure file handling with size and type restrictions
• Error handling for file uploads
• Form submission with FormData
• Integration with Static Forms API for seamless form processing

Note: File uploads are available on paid plans (Pro/Advanced, including trials). Free-tier submissions with files will be rejected.

Project Setup

First, let's set up our Next.js project with the necessary dependencies:

Building the Contact Form Component

Let's create a comprehensive contact form component with document upload functionality:

Key Features Explained

File Validation

Our form includes comprehensive file validation to ensure security and user experience:

FormData for File Uploads

When submitting files, we use FormData instead of JSON to properly handle binary data:

Environment Variables

Create a .env.local file to store your API keys securely:

Then use it in your component:

Setting Up Static Forms

1. Visit Static Forms and create an account
2. Create a new form and get your API key
3. Configure your form settings to accept file uploads
4. Add your domain to the allowed origins

Enhanced Security Considerations

Client-Side Validation

While we validate files on the client side, remember that client-side validation is primarily for user experience. Always validate files on the server side as well.

File Type Restrictions

Our form accepts common document and image types:

• Images: JPEG, PNG, GIF, WebP
• Documents: PDF, Word (.doc, .docx), Plain text, RTF

Size Limitations

We set a 5MB limit to prevent abuse and ensure reasonable upload times:

Styling with Tailwind CSS

The form uses Tailwind CSS for responsive, modern styling. Key classes include:

• file: prefix for styling file input buttons
• focus:ring-2 for accessibility-friendly focus states
• transition-colors for smooth hover effects

Advanced Features

Progress Indicator

For large file uploads, consider adding a progress indicator:

Multiple File Support

To support multiple files, modify the state and input:

Drag and Drop

Enhance user experience with drag-and-drop functionality:

Testing Your Form

1. Test with different file types and sizes
2. Verify error messages display correctly
3. Ensure form resets after successful submission
4. Test on mobile devices for responsive behavior

Common Troubleshooting

File Not Uploading

• Check file size limits
• Verify file type restrictions
• Ensure FormData is used instead of JSON

Validation Errors

• Verify all required fields are filled
• Check file validation logic

Conclusion

Adding document upload functionality to your Next.js contact form enhances user experience and provides valuable functionality for collecting attachments. By implementing proper validation, error handling, and security measures, you can create a robust form that handles file uploads safely and efficiently.

The combination of React's state management, proper file validation, and Static Forms' reliable backend processing creates a seamless experience for both developers and users. Whether you're building a portfolio submission form, support ticket system, or general contact form, these techniques will serve you well.

For more advanced form handling tutorials and Static Forms features, check out our getting started guide and learn about adding contact forms to static sites.

Related Articles

• Getting Started with Static Forms
• Adding Contact Forms to Static Sites
• Using Static Forms with Next.js