The Gravity Forms HTML field allows you to place a block of free form HTML anywhere in your form. Its limited in its functionality, as you need to know HTML.
That is why I started working on a native Gutenberg integration.
Gutenberg Field compared to HTML Field
Speed & Productivity
- Faster content creation
- HTML Field: slow
- Gutenberg Field: drag and drop, native tool
Media Management
- HTML Field: No upload, manual URLs, no Media Library
- Gutenberg Field: Full Media Library, drag & drop, image editing
Features Unique to Gutenberg Field
- Upload images directly
- Theme colors & fonts auto-loaded
- Drag & drop columns/layouts
- Visual table builder
- One-click embeds (YouTube, etc.)
- Undo/redo with full history
- All Gutenberg blocks
Work in progress
The GravityForms fieldtype is in active development and already used internally. Here some basic images. The thing was inspired by my Gutenberg Integration for Elementor.
Features
| Feature | Gravity Forms HTML Field | Gutenberg Field |
|---|---|---|
Editor Type | Plain text / code editor | Visual WYSIWYG block editor |
HTML Knowledge | Required | Not required |
Visual Preview | No (blind coding) | Live preview while editing |
Media Upload | No | Full Media Library integration |
Image Insert | Manual <img> tags | Drag & drop with upload |
Text Formatting | Manual HTML tags | Visual toolbar (Bold, Italic, etc.) |
Theme Colors | No | Auto-loaded from theme |
Theme Fonts | No | Auto-loaded from theme |
Responsive Images | Manual srcset | Automatic (WordPress handles it) |
Columns/Layouts | Complex HTML/CSS | Drag & drop columns |
Buttons | Manual <a> tags + CSS | Button block with styling |
Tables | Manual <table> HTML | Visual table builder |
Lists | Manual <ul>/<ol> | Click to create lists |
Quotes | Manual <blockquote> | Quote block with styling |
Embeds | Manual <iframe> | One-click embeds (YouTube, etc.) |
Undo/Redo | No | Full edit history |
Syntax Errors | Common (broken HTML) | No errors (blocks ensure valid HTML) |
Content Sanitization | Manual (security risk) | Automatic (wp_kses_post) |
Accessibility | Manual ARIA tags | Built-in accessibility |
Mobile Editing | Difficult on phone | Touch-friendly interface |
Learning Curve | Steep (HTML/CSS required) | Gentle (familiar WordPress ) |
Theme Integration
- Theme colors auto-loaded
- Theme fonts auto-loaded
- Theme gradients available
- Consistent with site design
- Updates if theme changes
- Custom colors also available
