Ali Ghasemirad

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 <code>/src/</code> and <code>/src-assets/</code> directories with complete build instructions. See the “Source Code & Build Tools” section below for complete documentation of all compiled assets.
<h4>WordPress.org Compliance: Source Code Transparency</h4>
ALL source code for compiled/minified assets is included in this plugin.
<ul>
<li>Minified Files:
<ul>
<li><code>/dist/js/main.js</code> (React form builder – compiled, 55 lines)</li>
<li><code>/dist/css/style.css</code> (React styles – compiled, 1 line)</li>
</ul>
</li>
<li>Source Code: <code>/src/</code> directory (React JSX, CSS, utilities – 40+ files, fully readable)</li>
<li>Build Tool: Vite 4.4.5 (configuration: <code>vite.config.js</code>)</li>
<li>Build Command: <code>npm install && npm run build</code></li>
<li>Dependencies: All listed in <code>package.json</code> with exact versions</li>
<li>Third-Party Libraries: Documented with GitHub source links (see below)</li>
</ul>
Standalone JavaScript/CSS (not compiled): 
* <code>/src-assets/js/custom-date-picker-frontend.js</code> → <code>/dist/js/custom-date-picker-frontend.js</code> 
* <code>/src-assets/css/*.css</code> → <code>/dist/css/*.css</code>
For complete build documentation and third-party library sources, see “Source Code & Build Tools” section below.
<h4>Features</h4>
<ul>
<li>Drag-and-Drop Form Builder – Intuitive interface for building forms</li>
<li>Multiple Field Types – Text, email, dropdown, checkbox, radio, textarea, and more</li>
<li>Advanced Field Types – Address, file upload, multi-step forms</li>
<li>Basic Form Styling – Customizable form appearance with themes</li>
<li>Responsive Design – Forms work perfectly on all devices</li>
<li>Submission Management – View and manage form submissions</li>
<li>Email Notifications – Automated email alerts for new submissions</li>
<li>Security Features – Built-in spam protection and security measures</li>
</ul>
<h4>Premium Features (Separate Plugin)</h4>
<ul>
<li>Conditional Logic – Show/hide fields based on user selections</li>
<li>Advanced Form Styling – Full customization of colors, fonts, and layouts</li>
<li>Form Analytics – Track form performance and conversion rates</li>
<li>reCAPTCHA Integration – Google reCAPTCHA v2 and v3 support</li>
<li>Cloudflare Turnstile – Alternative CAPTCHA solution</li>
<li>Google Sheets Integration – Send submissions directly to Google Sheets</li>
<li>Entry Tags – Organize and categorize form submissions</li>
<li>Priority Support – Get help from our expert support team</li>
</ul>
<h4>Developer Friendly</h4>
Auto Form Builder provides hooks and filters for developers to extend functionality:
<ul>
<li>Custom workflow triggers and actions</li>
<li>Form submission hooks</li>
<li>Field type extensions</li>
<li>Custom validation rules</li>
</ul>
<h4>Source Code & Build Tools (WordPress.org Compliance)</h4>
[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 <code>SOURCE-CODE.txt</code> in plugin root directory for a concise summary of all compiled files and their sources.
<h4>React Form Builder (Compiled with Vite)</h4>
Source Files: 
* <code>/src/</code> directory – React components, hooks, and styles 
 – <code>/src/main.jsx</code> – Entry point 
 – <code>/src/App.jsx</code> – Main application component 
 – <code>/src/components/</code> – All React components (FormBuilder, FieldSettings, etc.) 
 – <code>/src/store/</code> – State management (Zustand) 
 – <code>/src/styles/</code> – CSS stylesheets 
 – <code>/src/utils/</code> – Utility functions 
 – <code>/src/hooks/</code> – Custom React hooks
Build Configuration: 
* <code>vite.config.js</code> – Vite build configuration (in plugin root directory) 
* <code>package.json</code> – Dependencies and build scripts (in plugin root directory) 
* <code>eslint.config.js</code> – ESLint configuration (optional, for development)
Built Output: 
* <code>/dist/js/main.js</code> – Compiled and minified form builder JavaScript 
* <code>/dist/css/style.css</code> – Compiled and minified form builder CSS 
* <code>/dist/manifest.json</code> – Build manifest
Build Commands: 
 <code>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</code>
<h4>Standalone JavaScript/CSS (Human-Readable Source)</h4>
Source Files in <code>/src-assets/</code>: 
* <code>/src-assets/js/custom-date-picker-frontend.js</code> – Date picker initialization (280 lines) 
* <code>/src-assets/css/custom-date-picker-frontend.css</code> – Date picker styles 
* <code>/src-assets/css/modern-file-upload.css</code> – File upload component styles
Distribution: 
These files are copied directly (not compiled) from <code>/src-assets/</code> to <code>/dist/</code> during the build process. The files in <code>/dist/</code> are identical to the source files.
<h4>Third-Party Libraries</h4>
Flatpickr v4.6.13 – Date picker library 
* Source: https://github.com/flatpickr/flatpickr 
* License: MIT 
* Plugin files: <code>assets/js/vendor/flatpickr.min.js</code>, <code>assets/css/vendor/flatpickr.min.css</code>, <code>assets/css/vendor/flatpickr-material-blue.css</code> 
* 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 <code>package.json</code> with exact versions.
<h4>Human-Readable JavaScript & CSS (Non-Compiled)</h4>
All JavaScript and CSS files in <code>/assets/</code> directory are human-readable source code (NOT compiled or minified):
Admin JavaScript (<code>/assets/js/admin/</code>) – 14 files: 
* Dashboard, forms list, form builder admin, submissions management, import/export, settings, etc.
Form JavaScript (<code>/assets/js/form/</code>) – 14 files: 
* Form core, validation, field handlers (address, email, file upload, date picker, time picker, etc.)
Frontend JavaScript (<code>/assets/js/frontend/</code>) – 3 files: 
* Field behaviors, field initializers, validation handler
Admin CSS (<code>/assets/css/admin/</code>) – 13 files: 
* Admin interface styles for dashboard, form builder, submissions, settings, etc.
Form CSS (<code>/assets/css/form/</code>) – 22 files: 
* Form styles, field styles, themes, layouts, etc.
Frontend CSS (<code>/assets/css/frontend/</code>) – 2 files: 
* Frontend form styles and template
Total: 68 human-readable JavaScript and CSS files in <code>/assets/</code> directory
<h4>PHP Source Code</h4>
All PHP files are human-readable and not compiled: 
* <code>/includes/</code> – All plugin PHP classes and functionality (30+ files) 
* <code>/assets/</code> – Frontend and admin PHP templates 
* <code>auto-form-builder.php</code> – Main plugin file
<h4>Build Process</h4>
The plugin uses Vite 4.4.5 as the build tool for React components:
<ol>
<li>Install Node.js (v14 or higher recommended)</li>
<li>Navigate to plugin directory in terminal</li>
<li>Run <code>npm install</code> to install all dependencies listed in package.json</li>
<li>Run <code>npm run build</code> to compile React form builder</li>
<li>Compiled files are output to <code>/dist/</code> directory</li>
</ol>
Development Workflow: 
* <code>npm run dev</code> – Starts development server with hot module replacement 
* <code>npm run preview</code> – 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 <code>/dist/js/main.js</code> is minified for performance, but 100% of the human-readable source code is available in <code>/src/</code> and <code>/src-assets/</code> directories. Nothing is hidden or obfuscated beyond standard minification.
<h4>Summary: All Compiled/Minified Files & Their Sources</h4>
Complete mapping of all compiled/minified files to their human-readable sources:
 Compiled File 
 Source Location 
 Build Tool 
 Documentation
 <code>/dist/js/main.js</code> (55 lines) 
 <code>/src/</code> (40+ React files) 
 Vite 4.4.5 
 See “React Form Builder” section
 <code>/dist/css/style.css</code> (1 line) 
 <code>/src/styles/</code> (18 CSS files) 
 Vite 4.4.5 
 See “React Form Builder” section
 <code>/dist/js/custom-date-picker-frontend.js</code> 
 <code>/src-assets/js/custom-date-picker-frontend.js</code> 
 None (direct copy) 
 Human-readable
 <code>/dist/css/custom-date-picker-frontend.css</code> 
 <code>/src-assets/css/custom-date-picker-frontend.css</code> 
 None (direct copy) 
 Human-readable
 <code>/dist/css/modern-file-upload.css</code> 
 <code>/src-assets/css/modern-file-upload.css</code> 
 None (direct copy) 
 Human-readable
 <code>assets/js/vendor/flatpickr.min.js</code> 
 https://github.com/flatpickr/flatpickr 
 Flatpickr (3rd party) 
 See “Third-Party Libraries”
 <code>assets/css/vendor/flatpickr.min.css</code> 
 https://github.com/flatpickr/flatpickr 
 Flatpickr (3rd party) 
 See “Third-Party Libraries”
All other JavaScript and CSS files (68 files in <code>/assets/</code>) 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

Auto Form Builder

A powerful WordPress plugin for building professional forms with an intuitive drag-and-drop interface.

Whistleblowing Form Team

Tired of the tedious shortcode editor in Contact Form 7? Websync Builder replaces it with a modern, intuitive drag-and-drop visual form builder featuring a live preview.
Build complex, powerful forms in minutes. Add conditional fields to show or hide questions, and most importantly, save all form submissions to your database so you never lose a lead again. Manage entries right from your WordPress dashboard—all while maintaining 100% compatibility with the lightweight Contact Form 7 plugin.
<h4>Key Features</h4>
<h4>Visual Drag & Drop Builder</h4>
<ul>
<li>Build forms visually with a live preview. What you see is what you get.</li>
<li>Full support for all standard CF7 fields: text, email, dropdown, checkbox, file upload, and more.</li>
<li>Easily reorder, edit, and configure fields without touching code.</li>
</ul>
<h4>Save All Form Submissions</h4>
<ul>
<li>FREE FEATURE: Never lose a lead. Save every CF7 form entry directly to your WordPress database.</li>
<li>View, manage, and search all submissions from a dedicated admin area.</li>
<li>Pro Version: Unlock the ability to export entries to CSV or XLSX for reporting.</li>
</ul>
<h4>Conditional Logic (Show/Hide Fields)</h4>
<ul>
<li>Create smart forms that show or hide fields based on user selections.</li>
<li>Free Version: Includes 1 conditional rule per form.</li>
<li>Pro Version: Unleash unlimited conditional rules and groups for complex forms.</li>
</ul>
<h4>Multi-Step Forms (Pro)</h4>
<ul>
<li>Break long forms into beautiful, manageable steps to improve user experience.</li>
<li>Perfect for surveys, applications, and lengthy contact forms.</li>
</ul>
<h4>Seamless Integration</h4>
<ul>
<li>Works with your existing Contact Form 7 forms and most CF7 add-ons.</li>
<li>Styled to look great with any modern WordPress theme.</li>
</ul>
→ <a href="https://whistleblowing-form.de/en/visual-builder-for-contact-form-7/" rel="nofollow ugc">Upgrade to Websync Builder Pro</a> to unlock exports, unlimited conditional logic, multi-step forms, and premium support.
Note: This plugin requires the free <a href="https://wordpress.org/plugins/contact-form-7/" rel="ugc">Contact Form 7</a> plugin to be installed and active.
<h3>Upgrade to Pro</h3>
Unlock even more power:
<ul>
<li>Export Submissions to CSV/XLSX</li>
<li>Unlimited Conditional Fields & Logic</li>
<li>Build Multi-Step Forms</li>
<li>Priority Premium Support</li>
</ul>
<a href="https://whistleblowing-form.de/en/visual-builder-for-contact-form-7/" rel="nofollow ugc">Get Websync Builder Pro</a>
<h3>Credits</h3>
Built by the team at Websync. <a href="https://whistleblowing-form.de/en/visual-builder-for-contact-form-7/" rel="nofollow ugc">Contact us for support</a>.

Websync Builder for Contact Form 7

Create Contact Form 7 forms visually with drag-and-drop, add conditional logic, and store all submissions in your database.

Auto Form Builder vs Websync Builder for Contact Form 7