Advanced Form Customization (HTML / CSS / JS / Animations) for n8n Forms

Feature Requests
1

:puzzle_piece: Advanced Form Customization for n8n Forms (HTML/CSS/JS/Animations)

TL;DR: We need more advanced customization options for n8n forms, including custom JavaScript, editable HTML, and extended CSS, to create professionally branded, client-facing forms without relying on third-party tools.

Description

Currently, the customization options for n8n forms are quite limited. While some basic HTML and CSS editing is possible, there is no support for JavaScript, animations, or more advanced styling. This results in forms that appear generic and are difficult to align with specific client branding and project requirements.

For those of us who are self-hosting, such as agencies and consultants, this is a significant constraint. The goal is to provide modern, visually appealing, and fully-branded forms directly within the n8n ecosystem, eliminating the need for external form-building services like Typeform or Tally.

Feature Proposal

To address these limitations, we propose the following enhancements for self-hosted n8n instances:

  1. Custom JavaScript Injection: The ability to add custom JavaScript would enable dynamic behaviors, interactive elements, and animations, creating a more engaging user experience.
  2. Editable HTML Structure: Access to the form’s underlying HTML structure would allow for the addition of custom classes, attributes, and other modifications necessary for advanced styling and integration.
  3. Extended CSS Customization: The platform should support more extensive CSS customization, perhaps through the ability to link dedicated stylesheets.
  4. Live Preview: An optional live preview feature would be invaluable, allowing for real-time visualization of changes as the form is being customized.
  5. (Bonus) Custom Form Builder Mode: For ultimate flexibility, a “custom form builder” mode could be introduced, providing complete control over the form’s design and layout.

Why It Matters

  • Professional, Brand-Aligned Forms: These features would empower users to create forms that are consistent with their clients’ brand identities.
  • Reduced Dependency on Third-Party Tools: By enhancing the native form capabilities, n8n can reduce the need for users to rely on external form-building services.
  • Strengthening the n8n Ecosystem: This would further solidify n8n’s position as a comprehensive, all-in-one no-code automation platform.

Example

I am currently working with three clients who use n8n forms. However, the existing customization options are insufficient to match their established branding. With the proposed advanced customization features, I could develop clean, dynamic, and professional forms that align perfectly with their brand guidelines, all within the n8n environment.