Auto Form Builder

Auto Form Builder is a comprehensive form builder plugin that allows you to create professional forms with an intuitive drag-and-drop interface. Perfect for contact forms, surveys, registration forms, and more.

IMPORTANT FOR REVIEWERS: This plugin includes React-based components that are compiled using Vite. All human-readable source code is included in the /src/ and /src-assets/ directories with complete build instructions. See the “Source Code & Build Tools” section below for complete documentation of all compiled assets.

WordPress.org Compliance: Source Code Transparency

ALL source code for compiled/minified assets is included in this plugin.

• Minified Files:
  • /dist/js/main.js (React form builder – compiled, 55 lines)
  • /dist/css/style.css (React styles – compiled, 1 line)
• Source Code: /src/ directory (React JSX, CSS, utilities – 40+ files, fully readable)
• Build Tool: Vite 4.4.5 (configuration: vite.config.js)
• Build Command: npm install && npm run build
• Dependencies: All listed in package.json with exact versions
• Third-Party Libraries: Documented with GitHub source links (see below)

Standalone JavaScript/CSS (not compiled):
* /src-assets/js/custom-date-picker-frontend.js → /dist/js/custom-date-picker-frontend.js
* /src-assets/css/*.css → /dist/css/*.css

For complete build documentation and third-party library sources, see “Source Code & Build Tools” section below.

Features

• Drag-and-Drop Form Builder – Intuitive interface for building forms
• Multiple Field Types – Text, email, dropdown, checkbox, radio, textarea, and more
• Advanced Field Types – Address, file upload, multi-step forms
• Basic Form Styling – Customizable form appearance with themes
• Responsive Design – Forms work perfectly on all devices
• Submission Management – View and manage form submissions
• Email Notifications – Automated email alerts for new submissions
• Security Features – Built-in spam protection and security measures

Premium Features (Separate Plugin)

• Conditional Logic – Show/hide fields based on user selections
• Advanced Form Styling – Full customization of colors, fonts, and layouts
• Form Analytics – Track form performance and conversion rates
• reCAPTCHA Integration – Google reCAPTCHA v2 and v3 support
• Cloudflare Turnstile – Alternative CAPTCHA solution
• Google Sheets Integration – Send submissions directly to Google Sheets
• Entry Tags – Organize and categorize form submissions
• Priority Support – Get help from our expert support team

Developer Friendly

Auto Form Builder provides hooks and filters for developers to extend functionality:

• Custom workflow triggers and actions
• Form submission hooks
• Field type extensions
• Custom validation rules

Source Code & Build Tools (WordPress.org Compliance)

[REQUIRED READING FOR WORDPRESS.ORG REVIEWERS]

This section documents ALL compiled/minified code and provides complete source code locations and build instructions as required by WordPress.org Plugin Guidelines (Section 4 – Human Readable Code).

All source code is included in the plugin for transparency and WordPress.org compliance.

QUICK REFERENCE: See SOURCE-CODE.txt in plugin root directory for a concise summary of all compiled files and their sources.

React Form Builder (Compiled with Vite)

Source Files:
* /src/ directory – React components, hooks, and styles
– /src/main.jsx – Entry point
– /src/App.jsx – Main application component
– /src/components/ – All React components (FormBuilder, FieldSettings, etc.)
– /src/store/ – State management (Zustand)
– /src/styles/ – CSS stylesheets
– /src/utils/ – Utility functions
– /src/hooks/ – Custom React hooks

Build Configuration:
* vite.config.js – Vite build configuration (in plugin root directory)
* package.json – Dependencies and build scripts (in plugin root directory)
* eslint.config.js – ESLint configuration (optional, for development)

Built Output:
* /dist/js/main.js – Compiled and minified form builder JavaScript
* /dist/css/style.css – Compiled and minified form builder CSS
* /dist/manifest.json – Build manifest

Build Commands:
npm install # Install dependencies
npm run build # Build for production (outputs to /dist/)
npm run dev # Development server with hot reload
npm run preview # Preview production build

Standalone JavaScript/CSS (Human-Readable Source)

Source Files in /src-assets/:
* /src-assets/js/custom-date-picker-frontend.js – Date picker initialization (280 lines)
* /src-assets/css/custom-date-picker-frontend.css – Date picker styles
* /src-assets/css/modern-file-upload.css – File upload component styles

Distribution:
These files are copied directly (not compiled) from /src-assets/ to /dist/ during the build process. The files in /dist/ are identical to the source files.

Third-Party Libraries

Flatpickr v4.6.13 – Date picker library
* Source: https://github.com/flatpickr/flatpickr
* License: MIT
* Plugin files: assets/js/vendor/flatpickr.min.js, assets/css/vendor/flatpickr.min.css, assets/css/vendor/flatpickr-material-blue.css
* Original unminified source: https://github.com/flatpickr/flatpickr/tree/master/src

React & Dependencies – Bundled in main.js via npm
* React 18.2.0 – https://github.com/facebook/react (MIT License)
* React DOM 18.2.0 – https://github.com/facebook/react (MIT License)
* @dnd-kit – https://github.com/clauderic/dnd-kit (MIT License)
* Zustand – https://github.com/pmndrs/zustand (MIT License)
* Immer – https://github.com/immerjs/immer (MIT License)

All npm dependencies are specified in package.json with exact versions.

Human-Readable JavaScript & CSS (Non-Compiled)

All JavaScript and CSS files in /assets/ directory are human-readable source code (NOT compiled or minified):

Admin JavaScript (/assets/js/admin/) – 14 files:
* Dashboard, forms list, form builder admin, submissions management, import/export, settings, etc.

Form JavaScript (/assets/js/form/) – 14 files:
* Form core, validation, field handlers (address, email, file upload, date picker, time picker, etc.)

Frontend JavaScript (/assets/js/frontend/) – 3 files:
* Field behaviors, field initializers, validation handler

Admin CSS (/assets/css/admin/) – 13 files:
* Admin interface styles for dashboard, form builder, submissions, settings, etc.

Form CSS (/assets/css/form/) – 22 files:
* Form styles, field styles, themes, layouts, etc.

Frontend CSS (/assets/css/frontend/) – 2 files:
* Frontend form styles and template

Total: 68 human-readable JavaScript and CSS files in /assets/ directory

PHP Source Code

All PHP files are human-readable and not compiled:
* /includes/ – All plugin PHP classes and functionality (30+ files)
* /assets/ – Frontend and admin PHP templates
* auto-form-builder.php – Main plugin file

Build Process

The plugin uses Vite 4.4.5 as the build tool for React components:

1. Install Node.js (v14 or higher recommended)
2. Navigate to plugin directory in terminal
3. Run npm install to install all dependencies listed in package.json
4. Run npm run build to compile React form builder
5. Compiled files are output to /dist/ directory

Development Workflow:
* npm run dev – Starts development server with hot module replacement
* npm run preview – Preview the production build locally

What Gets Compiled:
* All React JSX components are transpiled to JavaScript
* All CSS imports are bundled and minified
* Code is minified and optimized for production
* Source maps are NOT included in production builds

Important: All JavaScript in /dist/js/main.js is minified for performance, but 100% of the human-readable source code is available in /src/ and /src-assets/ directories. Nothing is hidden or obfuscated beyond standard minification.

Summary: All Compiled/Minified Files & Their Sources

Complete mapping of all compiled/minified files to their human-readable sources:

Compiled File
Source Location
Build Tool
Documentation

/dist/js/main.js (55 lines)
/src/ (40+ React files)
Vite 4.4.5
See “React Form Builder” section

/dist/css/style.css (1 line)
/src/styles/ (18 CSS files)
Vite 4.4.5
See “React Form Builder” section

/dist/js/custom-date-picker-frontend.js
/src-assets/js/custom-date-picker-frontend.js
None (direct copy)
Human-readable

/dist/css/custom-date-picker-frontend.css
/src-assets/css/custom-date-picker-frontend.css
None (direct copy)
Human-readable

/dist/css/modern-file-upload.css
/src-assets/css/modern-file-upload.css
None (direct copy)
Human-readable

assets/js/vendor/flatpickr.min.js
https://github.com/flatpickr/flatpickr
Flatpickr (3rd party)
See “Third-Party Libraries”

assets/css/vendor/flatpickr.min.css
https://github.com/flatpickr/flatpickr
Flatpickr (3rd party)
See “Third-Party Libraries”

All other JavaScript and CSS files (68 files in /assets/) are human-readable source code.

WordPress.org Compliance Status: ✓ COMPLIANT
* All compiled code has source available in plugin
* All build tools documented with instructions
* All third-party libraries documented with source links
* Total transparency – nothing hidden

1. Upload the auto-form-builder folder to the /wp-content/plugins/ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Navigate to ‘Auto Form Builder’ in your WordPress admin menu
4. Start creating your first form!

How do I embed a form on my site?

Use the shortcode [auto_form_builder id="X"] where X is your form ID. You can find the form ID in the forms list.

Can I customize the form appearance?

Yes! Each form has comprehensive styling options including colors, fonts, spacing, and layout options.

Are form submissions stored in the database?

Yes, all form submissions are securely stored in your WordPress database and can be viewed in the admin area.

Can I export form submissions?

Yes, you can export submissions in various formats including CSV and JSON.

Does this plugin make external requests?

Yes, but only with your explicit consent:

Dashboard Widget (Optional): The dashboard displays a development roadmap that loads from autoformcrm.com API. You must explicitly click “Load Timeline” to enable this. No personal data is sent. This can be disabled anytime.

reCAPTCHA/Turnstile (Optional): Only if you configure these anti-spam services with your own API keys.

Google Sheets (Optional): Only if you install the separate Google Sheets addon and authenticate via OAuth.

All external services require explicit user configuration and consent.

Is the plugin GDPR compliant?

Yes, the plugin includes privacy features and allows you to manage user data according to GDPR requirements.

What data does the plugin collect?

Data Collection & Privacy:

The plugin stores form submissions locally in your WordPress database. No data is sent to external servers unless you explicitly configure third-party integrations.

Local Data Storage:
* Form submissions (the data users enter in your forms)
* Submission metadata (date, time, form ID)
* User IP addresses (optional, can be disabled in Form Analytics settings)
* Browser information (optional, can be disabled in Form Analytics settings)

Third-Party Services (Optional & Explicit):
* Dashboard Roadmap Widget – If you enable it (opt-in on first view), loads development timeline data from autoformcrm.com API. No personal data is sent. You can disable this anytime in plugin settings.
* Google reCAPTCHA – If you configure reCAPTCHA, Google’s service will be loaded to verify submissions. By configuring reCAPTCHA, you consent to Google’s terms.
* Cloudflare Turnstile – If you configure Turnstile, Cloudflare’s service will be loaded. By configuring Turnstile, you consent to Cloudflare’s terms.
* Google Sheets – Premium addon that requires separate plugin and explicit OAuth authentication.

No Automatic Tracking:
The plugin does NOT automatically send any data to external servers. All form data stays on your WordPress site unless you explicitly configure an integration. The dashboard roadmap widget requires explicit user consent before loading.

Privacy Controls:
* IP tracking can be disabled in Form Analytics settings
* Data retention period is configurable
* Export and delete user data via WordPress privacy tools
* GDPR-compliant data management

1.0.0

• Initial release
• Drag-and-drop form builder
• Multiple field types
• Submission management
• Email notifications
• Basic styling options