n8n Custom Form Trigger

A powerful custom form trigger node for n8n with customizable branding, multiple form types, and AI-powered PDF analysis. Create branded webhook forms without n8n branding and extract data from PDFs using Azure Document Intelligence.

Author: Subhan Qamar
Email: [email protected]
License: MIT

🌟 Features

• ✨ Custom Branding - Remove n8n branding and customize colors completely to match your brand identity
• 📋 Multiple Form Types:
  • Custom Form - Text, email, number, textarea fields with full customization
  • Standard Trigger - Basic form trigger functionality
  • PDF Form - Upload PDFs and extract data automatically
• 🤖 AI-Powered PDF Analysis - Extract structured data from PDFs using Azure Document Intelligence
• 🎨 Flexible Styling - Customize button colors, backgrounds, text, and fonts
• 🔗 Webhook-Based - Receive form submissions directly in your n8n workflows
• ⚡ Easy Integration - Works with all n8n deployment methods
• 📱 Responsive Design - Mobile-friendly forms that work on all devices

📥 Installation

Method 1: Via n8n Community Nodes (Recommended)

1. Open your n8n instance
2. Navigate to Settings → Community Nodes
3. Click Install a community node
4. Enter the package name: n8n-nodes-pdf-form-trigger
5. Click Install
6. Restart your n8n instance

Method 2: Via npm (Self-Hosted)

cd ~/.n8n
npm install n8n-nodes-pdf-form-trigger
# Then restart n8n

Method 3: Using Environment Variables

# Add this to your .env file or environment
N8N_CUSTOM_EXTENSIONS=n8n-nodes-pdf-form-trigger

Docker Compose Example

services:
  n8n:
    image: n8nio/n8n:latest
    environment:
      - N8N_CUSTOM_EXTENSIONS=n8n-nodes-pdf-form-trigger
      - NODE_ENV=production
    ports:
      - "5678:5678"
    volumes:
      - n8n_data:/home/node/.n8n
    restart: unless-stopped

volumes:
  n8n_data:

Coolify/VPS Deployment

1. Go to your n8n service settings
2. Add environment variable:
   • Key: N8N_CUSTOM_EXTENSIONS
   • Value: n8n-nodes-pdf-form-trigger
3. Restart the service
4. Verify installation by checking Community Nodes in the UI

🎨 Usage Guide

Quick Start

1. In n8n, add a new node and search for "PDF Form Trigger"
2. Select your desired form type
3. Configure the fields and styling
4. Save and publish to get your unique webhook URL
5. Share the form URL with users or embed it in your application

Form Type: Custom Form

Create fully branded forms with your colors and styling:

Configuration Steps:

1. Select Form Type → Custom Form
2. Add form fields:
   • Text Input - For short text entries
   • Email - For email addresses
   • Number - For numeric inputs
   • Textarea - For longer text content
3. Configure appearance:
   • Form Title - The headline of your form
   • Form Description - Helper text for users
   • Primary Color - Button and accent color (e.g., #007BFF)
   • Background Color - Form background (e.g., #FFFFFF)
   • Text Color - Form text color (e.g., #000000)
   • Button Text - Custom submit button label
4. Save and get your webhook URL
5. Share the form or embed in your website

Example Output:

{
  "full_name": "John Doe",
  "email": "[email protected]",
  "message": "This is a test submission",
  "timestamp": "2025-01-15T10:30:00Z"
}

Form Type: PDF Form with AI Analysis

Automatically extract data from uploaded PDFs:

Prerequisites:

• Azure account with Document Intelligence resource
• Azure endpoint URL
• Azure API key

Configuration Steps:

1. Select Form Type → PDF Form
2. Add Azure credentials:
   • Azure Endpoint - Your Document Intelligence endpoint URL
   • Azure API Key - Your API key (stored securely)
3. Set document analysis options:
   • Extract Tables - Enable to extract tabular data
   • Extract Forms - Enable to extract form fields
4. Customize appearance (colors, text, etc.)
5. Save and get your webhook URL
6. Users can now upload PDFs and extract data

Example Output:

{
  "file_name": "invoice_2025.pdf",
  "file_size": 245000,
  "analysis": {
    "full_text": "Invoice for services rendered...",
    "emails": ["[email protected]"],
    "dates": ["2025-01-15"],
    "phone_numbers": ["+1-555-0123"],
    "tables": [...],
    "form_fields": [...]
  },
  "status": "success"
}

⚙️ Configuration Reference

Common Settings

| Setting | Description | Example | |---------|-------------|---------| | Form Title | The main heading | "Contact Us" | | Form Description | Helper text | "Please fill out this form" | | Form Type | Type of form | Custom Form / PDF Form | | Webhook Path | Custom URL path | "contact-form" | | Primary Color | Button/accent color | #007BFF | | Background Color | Form background | #FFFFFF | | Text Color | Form text | #333333 | | Submit Button Text | Button label | "Send Message" |

PDF Form Settings

| Setting | Description | Required | |---------|-------------|----------| | Azure Endpoint | Document Intelligence endpoint | Yes | | Azure API Key | Authentication key | Yes | | Extract Tables | Enable table extraction | No | | Extract Forms | Enable form field extraction | No |

🔧 Advanced Usage

Custom Styling with CSS

Customize the form appearance using the color configuration options or by modifying the template files in the templates/ directory.

Using Form Data in Workflows

After receiving form submissions:

1. Access Form Data - Use {{ $json }} to access submitted data
2. Send Emails - Forward submissions to email addresses
3. Store in Database - Save data to your database
4. Trigger Actions - Based on form content, trigger other workflows
5. Integrate with APIs - Send data to third-party services

Example Workflow

[PDF Form Trigger] → [Parse Data] → [Save to DB] → [Send Email] → [Update CRM]

🐛 Troubleshooting

Form not appearing?

• Check if the webhook URL is accessible from the internet
• Verify your n8n instance URL in Settings
• Clear browser cache and try again

PDF extraction failing?

• Verify Azure credentials are correct
• Check if the PDF file is not corrupted
• Ensure Document Intelligence is enabled in Azure

Custom colors not showing?

• Use valid hex color codes (e.g., #FFFFFF)
• Clear browser cache
• Refresh the form page

Issue with form submissions?

• Check the workflow logs for errors
• Verify webhook is active in the node
• Test with a simple workflow first

📚 Examples

Example 1: Lead Capture Form

[Custom Form] → [Add Lead to CRM] → [Send Welcome Email]

Example 2: Invoice Processing

[PDF Form] → [Extract Invoice Data] → [Update Accounting System]

Example 3: Feedback Collection

[Custom Form] → [Save to Sheet] → [Create Support Ticket]

🚀 Publishing Your Own Version

If you want to fork and publish your own version:

Step 1: Fork/Clone Repository

git clone https://github.com/your-username/n8n-nodes-custom-form
cd n8n-nodes-custom-form

Step 2: Update Package Information

Edit package.json:

{
  "name": "n8n-nodes-YOUR-PACKAGE-NAME",
  "author": {
    "name": "Your Name",
    "email": "[email protected]"
  },
  "repository": {
    "url": "git+https://github.com/your-username/your-repo.git"
  }
}

Step 3: Build the Project

npm install
npm run build

Step 4: Create npm Account

• Visit npmjs.com
• Create a free account
• Verify your email

Step 5: Publish to npm

# Login to npm
npm login
# Enter your npm username, password, and email

# Publish
npm publish

# Or publish as a scoped package
npm publish --access public

Step 6: Register with n8n

1. Go to n8n Community Nodes Registry
2. Submit your package
3. Wait for approval

🤝 Contributing

Contributions are welcome! Feel free to:

• Report bugs
• Suggest features
• Submit pull requests
• Share improvements

📄 License

MIT License - See LICENSE file for details

This package was created for enterprise use and is now available publicly for the community.

📞 Support & Contact

• Email: [email protected]
• Report Issues: GitHub Issues
• Discussions: GitHub Discussions

🙏 Credits

Built with ❤️ using n8n and TypeScript

Includes integrations with:

• Azure Document Intelligence
• Handlebars.js
• Axios

3. Standard Form Trigger

Use the default n8n form trigger with custom styling:

1. Add PDF Form Trigger node
2. Select Form Type: Form Trigger
3. Configure fields
4. Customize colors (optional)

🔧 Configuration Options

Form Fields

• Field Name: Internal name for the field
• Field Label: Display label shown to users
• Field Type: text, email, number, textarea
• Required: Make field mandatory

Styling

• Primary Color: Hex color for buttons and accents (e.g., #007bff)
• Background Color: Form background color (e.g., #ffffff)
• Text Color: Form text color (e.g., #333333)

PDF Analysis (PDF Form only)

• Azure Endpoint: Your Azure Document Intelligence endpoint
• Azure API Key: Your API key (stored securely)

📊 Output Data

Custom Form / Form Trigger

{
  "fieldName1": "value1",
  "fieldName2": "value2",
  "email": "[email protected]"
}

PDF Form

{
  "pdfData": {
    "content": "Extracted text...",
    "fields": {
      "field1": "value1",
      "field2": "value2"
    },
    "tables": [...],
    "keyValuePairs": {...}
  },
  "fileName": "document.pdf",
  "fileSize": 12345
}

🛠️ Development

Prerequisites

• Node.js >= 18
• npm >= 9
• n8n >= 1.0.0

Build

npm install
npm run build

Development Mode

npm run dev

🐛 Troubleshooting

Node Not Showing Up

1. Check n8n logs for installation errors
2. Ensure package name is correct: n8n-nodes-pdf-form-trigger
3. Restart n8n after installation
4. Clear browser cache

PDF Analysis Not Working

1. Verify Azure credentials are correct
2. Check Azure endpoint URL (should end with /formrecognizer/)
3. Ensure API key has proper permissions
4. Check Azure subscription quota

Custom Colors Not Applied

1. Ensure hex colors are valid (e.g., #007bff)
2. Clear browser cache
3. Try different color values

📝 License

MIT © Subhan Qamar

🔗 Links

• npm Package
• GitHub Repository
• n8n Documentation
• Azure Document Intelligence

🤝 Contributing

Contributions, issues, and feature requests are welcome!

⭐ Support

If you find this node helpful, please give it a star on GitHub!