n8n-nodes-custom-form

This is an n8n community node that provides a Custom Form Trigger with full branding customization.

✨ Features

• 🎨 6 Customizable Colors - Match your brand perfectly
• 🚫 No n8n Attribution - Completely white-labeled forms
• 📁 File Upload Support - Accept file uploads from users
• 📱 Mobile Responsive - Works beautifully on all devices
• ⚡ Real-time Validation - Client-side form validation
• 🎯 Multiple Field Types - Text, Email, Number, Date, Dropdown, Textarea, File
• 🔒 Secure - Built on n8n's proven webhook infrastructure

📦 Installation

Option 1: Install via n8n GUI (Recommended)

1. Go to Settings > Community Nodes
2. Click Install
3. Enter n8n-nodes-custom-form
4. Click Install

Option 2: Manual Installation

cd ~/.n8n/nodes
npm install n8n-nodes-custom-form

🎨 Customizable Colors

Configure these colors directly in the n8n GUI under Options → Custom Colors:

1. Primary Color - Main button and highlights (default: #4CAF50)
2. Primary Hover Color - Button hover state (default: #45a049)
3. Background Color - Page background (default: #f5f5f5)
4. Card Background - Form card background (default: #ffffff)
5. Text Color - Headings and labels (default: #333333)
6. Border Color - Input field borders (default: #dddddd)

🚀 Quick Start

1. Add the node to your workflow
2. Configure form fields:
   • Form Title (e.g., "Contact Us")
   • Form Description
   • Add form elements (text, email, file, etc.)
3. Customize colors (optional):
   • Go to Options → Add Option → Custom Colors
   • Pick your brand colors
4. Activate workflow
5. Share the form URL with your users

📋 Example Use Cases

• Contact Forms - Collect customer inquiries
• Job Applications - Accept resumes and cover letters
• Event Registration - Gather attendee information
• Feedback Forms - Get user feedback
• Lead Generation - Capture sales leads
• File Submissions - Receive documents from clients

🎯 Field Types Supported

• ✅ Text
• ✅ Email (with validation)
• ✅ Number
• ✅ Date
• ✅ Dropdown
• ✅ Textarea
• ✅ File Upload (single or multiple)

🔧 Configuration Options

| Option | Description | Default | |--------|-------------|---------| | Form Path | URL segment for your form | Required | | Form Title | Heading displayed on form | Required | | Form Description | Subtitle/description text | Optional | | Form Elements | Fields to include in form | Required | | Response Mode | When to respond to user | Immediately | | Button Label | Submit button text | "Submit" | | Form Submitted Text | Success message | "Your response has been recorded" | | Redirect URL | Where to send users after submission | Optional | | Custom Colors | Brand color customization | Optional |

🎨 Example Color Schemes

Professional Blue

Primary: #2196F3
Hover: #1976D2
Background: #f5f5f5
Card: #ffffff
Text: #333333
Border: #dddddd

Corporate Red

Primary: #E53935
Hover: #C62828
Background: #fafafa
Card: #ffffff
Text: #1a1a1a
Border: #e0e0e0

Modern Purple

Primary: #9C27B0
Hover: #7B1FA2
Background: #f3f3f3
Card: #ffffff
Text: #2c2c2c
Border: #d0d0d0

📝 Workflow Example

Custom Form Trigger
    ↓
[Process form data]
    ↓
Send Email (with attachments)
    ↓
Save to Database

🆚 Differences from Standard Form Trigger

| Feature | Standard Form Trigger | Custom Form Trigger | |---------|----------------------|---------------------| | n8n Attribution | ✅ Included | ❌ Removed | | Custom Colors | ❌ No | ✅ Yes (6 colors) | | GUI Color Pickers | ❌ No | ✅ Yes | | File Uploads | ✅ Yes | ✅ Yes | | Mobile Responsive | ✅ Yes | ✅ Yes |

🐛 Known Issues

None currently. Please report issues if you find any.

📄 License

MIT

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

👨‍💻 Author

Subhan Qamar Email: [email protected] GitHub: @subhanqamar

🙏 Acknowledgments

Built on top of n8n's powerful workflow automation platform.

📚 Resources

• n8n Documentation
• n8n Community
• n8n GitHub

Made with ❤️ for the n8n community