外掛標籤
開發者團隊
原文外掛簡介
HXFE — Code-First Forms is a code-first WordPress form plugin. Instead of building forms in a GUI, you define them as PHP arrays and place a shortcode anywhere.
Because forms are PHP arrays, AI coding tools (Claude, Cursor, GitHub Copilot) can read and edit them directly — no screenshots, no GUI walkthroughs, no copy-paste. Your forms live in your codebase: version-controlled, automatically deployed, and free from database migration issues.
Why code-first?
AI-ready by design — Forms defined as PHP arrays are the lowest-cost input for AI agents. Ask Claude or Copilot to “add a phone number field” and get back a diff-ready code change instantly. No screenshots needed, no GUI explanation required. Ships with llms.txt, ai-reference.md, and CLAUDE.md for agentic coding tools
Git history for free — Every change to your form shows up in git diff
Deploy without fear — Forms are code, so they deploy with your theme. No more “the form disappeared on production”
Dynamic options — Pull select options from get_posts(), taxonomies, or any PHP source. No manual updates
One schema, four UIs — Add step_mode: chatbot or one_by_one to transform the same fields into a completely different interface
Four UI modes from one schema
Normal form — Classic input → confirm → complete flow (default)
Step form — Multi-page with progress bar (steps array)
One-by-one — Question-at-a-time survey style (step_mode: 'one_by_one')
Chatbot — Chat bubble interface with typing animation, header, and timestamps (step_mode: 'chatbot')
Key features
15 field types: text, email, tel, url, textarea, select, radio, checkbox, checkbox_group, number, date, file, honeypot, reCAPTCHA, privacy
Conditional logic: show_if, required_if, skip_if (hide_if deprecated) — works in chatbot mode too
Dynamic routing: to_rules, subject_rules, complete_redirect_rules, complete_html_rules based on submitted values
Diagnosis mode: use complete_html_rules without to — show results without sending email
Download after submit: download_url shows a download button on the complete screen (document request forms)
Form availability window: available_from / available_until with custom before/after HTML
Custom validation: pattern, minlength, maxlength, error_message schema keys + hxfe_validate_field and hxfe_validate_form filter hooks
Field HTML injection: before_html / after_html schema keys
Page slug tracking: subject auto-appended with [form-id@page-slug] for per-page aggregation
Webhook support: send to Zapier, Make, Slack, or any HTTP endpoint
SMTP built-in: Gmail, SendGrid, Mailgun, or custom SMTP
File upload: attached to email, auto-deleted after send
IP restriction and password-protected forms
iframe embedding with per-form CORS control (allowed_origins)
Zero cookies: GDPR/EU cookie-compliant by design
Clean default styles: CSS custom properties (design tokens) for easy theme integration, responsive at 768px
Schema examples panel in admin: 11 copy-paste samples to get started fast
AI-friendly: ships with llms.txt and ai-reference.md for agentic coding tools
Source code: available on GitHub
Minimum example
add_filter( 'hxfe_schemas', function( $schemas ) {
$schemas['contact'] = [
'id' => 'contact',
'to' => '[email protected]',
'subject' => 'Contact: {name}',
'fields' => [
[ 'key' => 'name', 'type' => 'text', 'label' => 'Name', 'required' => true ],
[ 'key' => 'email', 'type' => 'email', 'label' => 'Email', 'required' => true ],
[ 'key' => 'body', 'type' => 'textarea', 'label' => 'Message', 'required' => true ],
[ 'key' => 'hp', 'type' => 'honeypot' ],
],
];
return $schemas;
} );
Shortcode: [hxfe_form id="contact"]
Chatbot example
$schemas['support'] = [
'id' => 'support',
'to' => '[email protected]',
'step_mode' => 'chatbot',
'bot_name' => 'Support Bot',
'bot_icon' => '🤖',
'greeting' => 'Hi! How can I help you today?',
'fields' => [
[ 'key' => 'name', 'type' => 'text', 'label' => 'Name',
'bot_message' => 'What is your name?' ],
[ 'key' => 'email', 'type' => 'email', 'label' => 'Email',
'bot_message' => 'Thanks {name}! What is your email?' ],
[ 'key' => 'hp', 'type' => 'honeypot' ],
],
];
Diagnosis chatbot (no email)
$schemas['diagnosis'] = [
'id' => 'diagnosis',
// No 'to' — result shown without sending email
'step_mode' => 'chatbot',
'complete_html_rules' => [
[ 'when' => ['plan', '==', 'basic'],
'html' => '
Basic plan recommended
Hi {name}!
' ],
[ 'when' => 'default',
'html' => '
Thank you, {name}. We will be in touch.
' ],
],
'fields' => [ ... ],
];
Organize schemas in separate files
// functions.php — one line
require_once get_template_directory() . '/inc/hxfe-forms.php';
Or use HXFE as a standalone plugin with glob() auto-loading.
External Services
This plugin optionally connects to Google reCAPTCHA when the recaptcha field type is enabled in a form schema.
What the service is and what it is used for:
Google reCAPTCHA is a spam-prevention service. When enabled, it loads a script from Google’s servers and verifies the user’s response server-side to determine whether the form submission is from a human or a bot.
What data is sent and when:
When a page containing an HXFE form with reCAPTCHA is loaded, the visitor’s browser loads the reCAPTCHA script from google.com. On form submission, the reCAPTCHA token generated in the visitor’s browser is sent to Google’s verification endpoint (https://www.google.com/recaptcha/api/siteverify) along with your site key. No other form field data is transmitted to Google.
reCAPTCHA is disabled by default. It is only active when a site administrator adds a recaptcha field to a form schema and configures valid API keys in the plugin settings.
Links:
* Google reCAPTCHA Terms of Service: https://policies.google.com/terms
* Google Privacy Policy: https://policies.google.com/privacy
