jfb-settings-tab

Create JetFormBuilder settings tabs with Vue UI and nonce-protected saves.

21|1|Updated Apr 29, 2026
One-click install
npx skills add https://github.com/Lonsdale201/wp-agent-skills --skill jfb-settings-tab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: jfb-settings-tab
Source: https://github.com/Lonsdale201/wp-agent-skills/tree/main/jetformbuilder/jfb-settings-tab
Command: npx skills add https://github.com/Lonsdale201/wp-agent-skills --skill jfb-settings-tab

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a standardized way to expose a plugin's configuration UI inside JetFormBuilder Settings, reducing boilerplate and ensuring consistent persistence.

Core Features & Use Cases

  • PHP Base_Handler extension for per-tab persistence
  • JS integration with jet-form-builder/register-tabs-handlers and a Vue component to render the settings UI
  • Secure save flow via the Jet Form Builder AJAX endpoint and nonce protection

Quick Start

Create a SettingsTab class extending Base_Handler and register it with jet-form-builder/register-tabs-handlers, then ensure JFB admin assets are enqueued so the tab loads and saves.

Frequently Asked Questions about jfb-settings-tab

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a custom settings tab to JetFormBuilder for plugin configuration?▼

To add a custom settings tab to JetFormBuilder, you create a PHP Base_Handler subclass and register it using the jet-form-builder/register-tabs-handlers hook. This enforces slug consistency and integrates your plugin's configuration UI directly into the JFB Settings page.

How does the Vue component integrate with JetFormBuilder settings tabs?▼

The Vue component integration works by registering a JavaScript handler alongside the PHP Base_Handler subclass. You must ensure JFB admin assets are enqueued so the Vue-based UI renders correctly within the custom settings tab.

How do I securely save settings from a custom JetFormBuilder tab via AJAX?▼

To securely save settings from a custom JetFormBuilder tab, the flow uses the jet_fb_save_tab AJAX endpoint with nonce protection. This ensures per-tab persistence is handled safely without exposing your configuration to unauthorized requests.

Do I need a Base_Handler subclass to expose API keys in JetFormBuilder settings?▼

Yes, you need a Base_Handler subclass to expose API keys or debug flags in JetFormBuilder settings. Extending this class provides the standardized per-tab persistence mechanism required to store and manage your plugin's configuration securely.

What is the best way to configure third-party integrations inside JetFormBuilder?▼

The best way to configure third-party integrations inside JetFormBuilder is by creating a custom settings tab. This approach reduces boilerplate by enforcing a PHP Base_Handler extension and Vue UI registration, providing a standardized configuration interface.

Why is my custom JetFormBuilder settings tab not loading in the admin panel?▼

If your custom JetFormBuilder settings tab is not loading, you likely failed to enqueue JFB admin assets. You must ensure the JavaScript tab registration with jet-form-builder/register-tabs-handlers is properly executed so the tab renders and saves correctly.