Define forms as PHP arrays. AI-ready, Git-managed, zero database — contact forms, step forms, chatbots, and surveys from one schema.

youheiokubo

<p><strong>HXFE — Code-First Forms</strong> 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.</p>
<p>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.</p>
<h4>Why code-first?</h4>
<ul>
<li><strong>AI-ready by design</strong> — 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 <code>llms.txt</code>, <code>ai-reference.md</code>, and <code>CLAUDE.md</code> for agentic coding tools</li>
<li><strong>Git history for free</strong> — Every change to your form shows up in <code>git diff</code></li>
<li><strong>Deploy without fear</strong> — Forms are code, so they deploy with your theme. No more “the form disappeared on production”</li>
<li><strong>Dynamic options</strong> — Pull select options from <code>get_posts()</code>, taxonomies, or any PHP source. No manual updates</li>
<li><strong>One schema, four UIs</strong> — Add <code>step_mode: chatbot</code> or <code>one_by_one</code> to transform the same fields into a completely different interface</li>
</ul>
<h4>Four UI modes from one schema</h4>
<ul>
<li><strong>Normal form</strong> — Classic input <span aria-hidden="true" class="wp-exclude-emoji">→</span> confirm <span aria-hidden="true" class="wp-exclude-emoji">→</span> complete flow (default)</li>
<li><strong>Step form</strong> — Multi-page with progress bar (<code>steps</code> array)</li>
<li><strong>One-by-one</strong> — Question-at-a-time survey style (<code>step_mode: 'one_by_one'</code>)</li>
<li><strong>Chatbot</strong> — Chat bubble interface with typing animation, header, and timestamps (<code>step_mode: 'chatbot'</code>)</li>
</ul>
<h4>Key features</h4>
<ul>
<li>15 field types: text, email, tel, url, textarea, select, radio, checkbox, checkbox_group, number, date, file, honeypot, reCAPTCHA, privacy</li>
<li>Conditional logic: show_if, required_if, skip_if (hide_if deprecated) — works in chatbot mode too</li>
<li>Dynamic routing: to_rules, subject_rules, complete_redirect_rules, complete_html_rules based on submitted values</li>
<li>Diagnosis mode: use <code>complete_html_rules</code> without <code>to</code> — show results without sending email</li>
<li>Download after submit: <code>download_url</code> shows a download button on the complete screen (document request forms)</li>
<li>Form availability window: <code>available_from</code> / <code>available_until</code> with custom before/after HTML</li>
<li>Custom validation: <code>pattern</code>, <code>minlength</code>, <code>maxlength</code>, <code>error_message</code> schema keys + <code>hxfe_validate_field</code> and <code>hxfe_validate_form</code> filter hooks</li>
<li>Field HTML injection: <code>before_html</code> / <code>after_html</code> schema keys</li>
<li>Page slug tracking: subject auto-appended with <code>[form-id@page-slug]</code> for per-page aggregation</li>
<li>Webhook support: send to Zapier, Make, Slack, or any HTTP endpoint</li>
<li>SMTP built-in: Gmail, SendGrid, Mailgun, or custom SMTP</li>
<li>File upload: attached to email, auto-deleted after send</li>
<li>IP restriction and password-protected forms</li>
<li>iframe embedding with per-form CORS control (<code>allowed_origins</code>)</li>
<li>Zero cookies: GDPR/EU cookie-compliant by design</li>
<li>Clean default styles: CSS custom properties (design tokens) for easy theme integration, responsive at 768px</li>
<li>Schema examples panel in admin: 11 copy-paste samples to get started fast</li>
<li>AI-friendly: ships with <code>llms.txt</code> and <code>ai-reference.md</code> for agentic coding tools</li>
<li>Source code: available on <a href="https://github.com/okuboyouhei/hxfe-code-first-forms" rel="nofollow ugc">GitHub</a></li>
</ul>
<h4>Minimum example</h4>
<pre><code>add_filter( 'hxfe_schemas', function( $schemas ) {
    $schemas['contact'] = [
        'id'      => 'contact',
        'to'      => 'admin@example.com',
        '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;
} );
</code></pre>
<p>Shortcode: <code>[hxfe_form id="contact"]</code></p>
<h4>Chatbot example</h4>
<pre><code>$schemas['support'] = [
    'id'        => 'support',
    'to'        => 'admin@example.com',
    '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' ],
    ],
];
</code></pre>
<h4>Diagnosis chatbot (no email)</h4>
<pre><code>$schemas['diagnosis'] = [
    'id'        => 'diagnosis',
    // No 'to' — result shown without sending email
    'step_mode' => 'chatbot',
    'complete_html_rules' => [
        [ 'when' => ['plan', '==', 'basic'],
          'html' => '<h3>Basic plan recommended</h3><p>Hi {name}!</p>' ],
        [ 'when' => 'default',
          'html' => '<p>Thank you, {name}. We will be in touch.</p>' ],
    ],
    'fields' => [ ... ],
];
</code></pre>
<h4>Organize schemas in separate files</h4>
<pre><code>// functions.php — one line
require_once get_template_directory() . '/inc/hxfe-forms.php';
</code></pre>
<p>Or use HXFE as a standalone plugin with <code>glob()</code> auto-loading.</p>
<h3>External Services</h3>
<p>This plugin optionally connects to Google reCAPTCHA when the <code>recaptcha</code> field type is enabled in a form schema.</p>
<p><strong>What the service is and what it is used for:</strong><br />
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.</p>
<p><strong>What data is sent and when:</strong><br />
When a page containing an HXFE form with reCAPTCHA is loaded, the visitor’s browser loads the reCAPTCHA script from <code>google.com</code>. On form submission, the reCAPTCHA token generated in the visitor’s browser is sent to Google’s verification endpoint (<code>https://www.google.com/recaptcha/api/siteverify</code>) along with your site key. No other form field data is transmitted to Google.</p>
<p>reCAPTCHA is <strong>disabled by default</strong>. It is only active when a site administrator adds a <code>recaptcha</code> field to a form schema and configures valid API keys in the plugin settings.</p>
<p><strong>Links:</strong><br />
* Google reCAPTCHA Terms of Service: https://policies.google.com/terms<br />
* Google Privacy Policy: https://policies.google.com/privacy</p>


Alternatives to HXFE — Code-First Forms

Top alternatives