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.