hashthemes

Unleash the power of creativity and interaction with Hash Form. With its user friendly interface and robust features, you can effortlessly design custom forms that cater to your specific needs. Whether you’re looking to gather user feedback, conduct surveys, or enable easy contact options, this plugin offers an intuitive drag and drop interface that lets you craft visually appealing forms without any coding expertise. This plugin is your all in one solution for seamlessly embedding forms that resonate with your brand’s aesthetics. Every aspect of form design is customizable, from choosing color schemes to selecting field types, ensuring a cohesive and professional look that aligns with your website’s design. Whether you’re a beginner or an experienced developer, Form’s versatility empowers you to experiment, iterate, and create forms that not only serve their functional purpose but also elevate the overall user experience.
This plugin is built with beginners in mind. Even if you’re not a tech wizard, you can effortlessly create fantastic forms without dealing with complicated code!
But wait, there’s more – once your form is set, the power is in your hands to customize every detail. Adjust the font size, letter spacing, and line height. Choose the color scheme that suits your taste, and set the spacing for rows and columns with ease. Our customization options allow you to make your form uniquely yours in a breeze! No need for generic designs, tailor your form to your liking effortlessly.
<h3>Test Dashboard</h3>
Explore a test dashboard to get a hands on experience with our features and functionalities. Visit <a href="https://tastewp.com/plugins/hash-form/" rel="nofollow ugc">Test Dashboard</a> to access the test environment.
Feel free to experiment, and if you have any feedback or encounter issues, please let us know through our support tickets.
<h3>Documentation</h3>
For detailed information and instructions, please refer to our official documentation at <a href="https://hashthemes.com/documentation/hash-form-drag-and-drop-form-builder-documentation/" rel="nofollow ugc">Hash Form Documentation</a>.
If you have any questions or need further assistance, feel free to reach out to our support team through support tickets.
<h3>Available Fields Types</h3>
Customize your contact forms effortlessly with our drag and drop field types. Let’s explore the various field types and understand their functionalities.
<ul>
<li>Name: The Name field provides flexibility for collecting names in various formats, such as Full Name, First Last, Last First, and First Middle Last.</li>
<li>Email: The email field type serves the purpose of collecting users’ email addresses, enabling communication for notifications about upcoming events or responding to any inquiries they may have. </li>
<li>Website/URL: Add a ‘Website/URL’ field in your contact form for users to share their website addresses, providing context for inquiries and networking.</li>
<li>Address: Users can provide their complete address by filling in these fields, offering a comprehensive way to collect location information. This can be particularly useful for various purposes such as event planning, shipping, or personalized communication.</li>
<li>Text Area: The textarea element is commonly employed in forms to gather user inputs such as comments or reviews. Unlike single line input fields, a text area can accommodate an unlimited number of characters. </li>
<li>Checkbox: Checkboxes provide users with the flexibility to choose from a range of options, enabling the easy selection of preferences. This feature helps in distinctly capturing user choices, streamlining the data collection process for enhanced efficiency.</li>
<li>Dropdown: In a contact form, a dropdown appears as a compact menu with a default option. Users can click or tap to reveal and choose from a list of options.</li>
<li>Radio Buttons: Radio buttons in a contact form are circular elements for selecting a single option from a set. Users can choose only one option, making them ideal for questions with mutually exclusive answers.</li>
<li>Image Selector: The Image Selector feature enables you to integrate pictures into your contact forms, serving as visual representations of available options. Users can conveniently choose their preferred selection by interacting with the images provided.</li>
<li>Range Slider: A range slider is a UI element with two draggable handles, allowing users to set numeric ranges visually. Widely used in applications for data filtering and preference setting, it offers an intuitive and visually engaging way for users to define their numeric preferences.</li>
<li>Star: Gather user ratings with a star based input, perfect for feedback or reviews.</li>
<li>Phone: Collect customer contact details with the convenient phone field type, streamlining communication for your online platform.</li>
<li>Date and Time: Capture specific dates and times, crucial for scheduling or event related details</li>
<li>HTML: Embed custom HTML code, providing flexibility for advanced customization.</li>
<li>ReCAPTCHA: ReCAPTCHA holds significant importance in the context of a contact form. It acts as a crucial security layer, discerning between human users and automated bots. By incorporating challenges like distorted characters or image selections, it effectively thwarts spam submissions and safeguards the form from malicious activities.</li>
<li>User ID: The User ID field is designed to store the ID number of a logged in user upon form submission. This functionality facilitates the linkage of submitted entries to specific users on your website, enhancing the organization and association of user generated content.</li>
<li>Hidden: A hidden field enables web developers to incorporate data that remains unseen and unmodifiable by users during form submission. Typically, a hidden field stores information such as the database record that requires updating upon form submission.</li>
<li>Heading: You have the flexibility to select suitable headings for your titles, similar to the formatting options available in WordPress. Choose from a range of heading levels, including H1, H2, H3, H4, H5, and H6.</li>
<li>Paragraph: Add descriptive text for instructions or additional information.</li>
<li>Separator: A separator is a dividing line in form. Choose styles like solid, double, dotted, dashed, groove, and ridge for customization.</li>
<li>Spacer: A spacer is a useful tool for creating gaps between elements in a contact form. It allows you to add space by specifying the number of pixels.</li>
<li>Image: The Image section in your contact form enables you to incorporate pictures, providing users with visual context about the content or purpose of the form.</li>
<li>Spinner: The Spinner element provides users with an intuitive interface to easily select numeric values by spinning a control mechanism.</li>
<li>Number: The Number Field is employed to gather numeric values, encompassing integers, decimals, or percentages. Users are restricted to inputting only numerical data into this field.</li>
<li>Upload: This feature allows respondents to effortlessly submit diverse files, enriching data collection with images, documents, or other relevant attachments. Seamlessly integrated into the form, the upload field ensures an intuitive experience, and submitted files can be securely managed for further analysis or processing.</li>
</ul>
<h3>Drag and Drop Elements to Create Contact Forms</h3>
Effortlessly design forms in a snap with our user friendly drag and drop feature. No design skills are required – our easy row and column alignment ensures a polished and professional look for your forms. Creating stunning forms has never been this simple!
<h3>Beginner Friendly</h3>
This plugin is a breeze for everyone, even if you’re not a tech pro. No coding is needed! Design awesome forms effortlessly, and with our friendly support team, you’re never alone. Whether it’s a tiny question or a bigger issue, we’re here to guide you through building your forms with ease!
<h3>Missed Out on Email Replies? Don’t Worry!</h3>
Ever get lost in the daily hustle and miss replying to emails? We’ve got your back! Introducing Auto Responder – a friendly feature to shoot back a quick message, letting your customers know you’ve got their queries in your sights and will get back to them soon.
<h3>Confirmation Messages</h3>
As users send in their queries and tap the Submit button, our contact form swiftly responds with a reassuring confirmation message. It’s a way of letting them know their message is on its way and will be responded to in no time
<h3>Conditional Logic</h3>
Conditional logic allows you to show or hide certain form fields or sections based on specific conditions or criteria. It adds a dynamic aspect to the form, allowing it to adapt and display different content depending on the user’s input.
<h3>Multiple Email Templates</h3>
The Multiple Email Templates feature in a contact form allows users to create and use various pre designed email templates for different purposes. Each template is associated with specific criteria, ensuring personalized and efficient responses to diverse inquiries. This feature streamlines communication enhances user experience, and may include automation and analytics for better performance tracking.
<h3>Email Entries</h3>
Our contact form is designed with a streamlined Email Entries feature, ensuring that email addresses and other essential information are effortlessly captured. This functionality allows you to seamlessly gather important details in one centralized location. Additionally, you’ll be notified in case email delivery encounters any issues, ensuring you stay informed and connected with your audience effortlessly.
<h3>Design Your Form Exactly to Your Liking</h3>
Once your form is created, the power is in your hands to customize every detail. From typography adjustments like font size, letter spacing, and line height to choosing the color scheme, and even specifying the spacing for rows and columns – make it uniquely yours with complete freedom! This custom feature gives you the liberty to make your own unique form in no time.
<h3>Import/ Export Forms</h3>
Take control of your forms by exporting and importing settings seamlessly. Whether you’re moving within the same site or venturing into a new one, it’s a breeze – export your settings and import them hassle free.

Hash Form – Drag & Drop Form Builder

Create any kind of forms effortlessly with Hash Form – the ultimate drag & drop form builder plugin for WordPress.

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.

Hash Form – Drag & Drop Form Builder vs Auto Form Builder