WP Manifestindependent plugin directory
manifest / integrations / jetformbuilder-markupmarkdown-integration

JetFormBuilder MarkupMarkdown Integration

A WordPress plugin that integrates JetFormBuilder with MarkupMarkdown, replacing TinyMCE WYSIWYG fields with a powerful markdown editor.

by Muneeb Gawri · github.com/muneebgawri/jetformbuilder-markupmarkdown-integration · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/muneebgawri/jetformbuilder-markupmarkdown-integration/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/muneebgawri/jetformbuilder-markupmarkdown-integration ↗

A WordPress plugin that integrates JetFormBuilder with MarkupMarkdown, replacing TinyMCE WYSIWYG fields with a powerful markdown editor.

Description

This plugin seamlessly integrates JetFormBuilder forms with the MarkupMarkdown plugin, providing users with a modern markdown editing experience instead of the traditional TinyMCE editor. It converts WYSIWYG fields to markdown editors and adds a dedicated Markdown field type to JetFormBuilder.

Features

  • WYSIWYG Replacement: Automatically converts JetFormBuilder WYSIWYG fields to Markdown editors
  • Custom Field Type: Adds a dedicated Markdown field type to JetFormBuilder
  • EasyMDE Integration: Uses the powerful EasyMDE editor with live preview
  • Dynamic Loading: Handles conditional blocks and dynamic form loading
  • Form Compatibility: Maintains all JetFormBuilder validation and submission functionality
  • Admin Settings: Easy configuration through WordPress admin panel
  • Responsive Design: Works on desktop and mobile devices

Requirements

  • WordPress 5.0 or higher
  • PHP 7.4 or higher
  • JetFormBuilder plugin (active)
  • Markup Markdown plugin (active)

Installation

  1. Download the plugin zip file
  2. Go to WordPress Admin → Plugins → Add New → Upload Plugin
  3. Upload the zip file and activate the plugin
  4. Go to Settings → JFB MarkupMarkdown to configure the plugin

Configuration

Admin Settings

Navigate to Settings → JFB MarkupMarkdown to configure the plugin:

  • Replace WYSIWYG Fields: When enabled, all JetFormBuilder WYSIWYG fields will be converted to Markdown editors
  • Enable Custom Markdown Field: When enabled, a dedicated Markdown field type will be available in JetFormBuilder

Usage

  1. Automatic Conversion: If "Replace WYSIWYG Fields" is enabled, existing WYSIWYG fields will automatically use the Markdown editor
  2. Custom Field: If "Enable Custom Markdown Field" is enabled, you can add dedicated Markdown fields to your forms
  3. Form Building: Create or edit JetFormBuilder forms as usual - the Markdown editor will be used automatically

How It Works

WYSIWYG Field Conversion

When enabled, the plugin:

  1. Intercepts JetFormBuilder WYSIWYG field configuration
  2. Disables TinyMCE and QuickTags
  3. Converts the field to a textarea
  4. Initializes MarkupMarkdown editor on the textarea

Custom Markdown Field

The plugin adds a new field type called "Markdown Editor" that:

  1. Provides a dedicated textarea for markdown content
  2. Automatically initializes MarkupMarkdown editor
  3. Includes proper form validation and submission handling

Frontend Integration

The plugin:

  1. Detects pages with JetFormBuilder forms
  2. Enables MarkupMarkdown frontend support
  3. Loads necessary assets (CSS/JS)
  4. Initializes editors on form fields
  5. Handles dynamic form loading and conditional blocks

Technical Details

Hooks and Filters

  • mmd_frontend_enabled: Enables MarkupMarkdown on frontend for JetFormBuilder forms
  • jet-form-builder/fields/wysiwyg-field/config: Modifies WYSIWYG field configuration
  • jet-form-builder/blocks/items: Adds custom Markdown field type
  • jet-form-builder/form-handler/after-save: Handles form submission

JavaScript Events

The plugin listens for these JetFormBuilder events:

  • jet-form-builder/conditional-block/block-toggle-hidden-dom
  • jet-form-builder/form-submit/after
  • jet-form-builder/repeater/add-item
  • jet-form-builder/repeater/remove-item

File Structure

jetformbuilder-markupmarkdown-integration/
├── jetformbuilder-markupmarkdown-integration.php (Main plugin file)
├── templates/
│   ├── markdown-field.php (Custom field template)
│   └── admin-page.php (Admin settings page)
├── assets/
│   ├── css/
│   │   ├── admin.css (Admin styles)
│   │   └── frontend.css (Frontend styles)
│   └── js/
│       ├── admin.js (Admin JavaScript)
│       └── frontend.js (Frontend JavaScript)
└── languages/ (Translation files)

Troubleshooting

Common Issues

  1. Markdown editor not loading: Ensure both JetFormBuilder and MarkupMarkdown plugins are active
  2. Form submission issues: Check that the plugin settings are properly configured
  3. Styling issues: Verify that the plugin CSS is loading correctly

Debug Mode

Add ?jfb_mmd_debug=1 to your URL to enable debug logging in the browser console.

Support

For support and bug reports, please visit the plugin repository on GitHub.

Changelog

Version 1.0.0

  • Initial release
  • WYSIWYG field conversion
  • Custom Markdown field type
  • Admin settings page
  • Frontend integration
  • Dynamic form handling

License

This plugin is licensed under the GPL v2 or later.

Credits

  • Built for JetFormBuilder by Crocoblock
  • Integrates with MarkupMarkdown plugin
  • Uses EasyMDE editor for markdown editing