We are pleased to announced that, Bit Form version 2.0 is live now, which is the most optimized & polished version yet. We have completed the most challenging part of restructuring the complete version 1 base from the ground up, which has successfully reduced the frontend load size of JS (96%) and CSS (58%). We have replaced all the React.js code from the frontend in Bit Form with vanilla JavaScript and implemented a tremendous amount of optimization techniques to lower the sizes as much as possible.

Version 2.0 Announcement Blog Post: Visit Here

For more details & screenshots: Visit Here

As this process has changed the way the form works in the frontend, the forms of version 1.x was not emerging with version 2.0. To fix this issue, we have implemented a full-fledged migration workflow in Bit Form version 2.0.

Here's how the migration workflow works:​

1. Suppose you have updated Bit Form to version 2.0. By default, only the version number will be updated, but the forms and everything will remain the same as v1.x.

2. In the Bit Form dashboard, you will see a "Migrate Now" button, which on clicking will open a modal with an input to write "CONFIRM".

3. Clicking the "Migrate Now" button will start the process, and everything from version 1.x will be migrated to version 2.0 except the form styles you made in the forms. The styles will be reset to the new Bit Form Default theme. Note that the custom CSS or JS you wrote earlier will also not work as the markups are changed.

4. The migration process will reload the page multiple times, and after completing, you will see the version 2.0 dashboard with a "Rollback" button at the top.

Here's how the Rollback workflow works:​

1. During the migration to version 2.0, all of your version 1.x forms and everything will be copied into new database tables.

2. So, when you confirm the "Rollback Now" button, it will replace everything you did in version 2.0 with the previously copied data from the database.

3. After completion, the page will reload, and you will see the older dashboard with the previous contents of version 1.x.

With these tools, you have the power to migrate everything to version 2.0 under your command. And if anything goes wrong or for any emergency, you can restore everything with the Rollback tool.

But please note that these tools will be available for a limited time, so after the majority of users update to 2.0, we will remove these workflows and auto-migrate everything without any rollback option.

Support​

If you have any questions, please don't hesitate to contact our support team. We're always happy to assist you:

Support Chat | Support Email | Facebook Community

We are thrilled to announce the release of Bit Form 2.0 (Beta), a major update to our popular WordPress form plugin. This new version includes a host of new features and improvements to make creating and customizing forms on your website easier than ever before.

Highlights:​

Reduced the sizes of JS & CSS:​

Bit Form v1 uses the React framework to render forms on the user frontend. However, as the React is bundled and loaded with the form itself, this results in a large JavaScript (JS) file size of 320 KB, which is a concern for some users who find it to be "bloated". In response to user feedback, we took the inutiative to reduce it as much as possible.

The team decided to reduce the file size in v2 by rendering forms using vanilla JS. Additionally, to further reduce the JS file size, the JS file will now be regenerated based on the fields and settings enabled in the form. This means that the JS file will only include the code necessary for the specific fields and settings chosen by the user, rather than a pre-bundled version of the entire codebase.
The same applies to the CSS file, the development team implemented atomic CSS technique to reduce the overhead of sizing. Atomic CSS is a method of writing CSS in a way that minimizes the amount of code that needs to be loaded, by breaking styles down into small, single-purpose classes. This allows the CSS file to only include the styles necessary for the specific fields and settings chosen by the user, resulting in a smaller file size.

By implementing these changes, the team was able to significantly reduce the JS size, with a contact form including 5 fields with required validation, confirmation message, and email notification loading only 10.25 KB of JS. This represents a 96% reduction in size compared to the 320 KB in v1. Additionally, the team was able to reduce the size of the CSS by 11.4 KB (v1) to 4.83 KB (v2) [58% lower].

To make these improvements possible, the team had to re-write the whole form builder and form rendering system from scratch. This was a significant undertaking and took longer than initially expected, but the team is now ready to release the beta version of Bit Form v2. With these changes, Bit Form v2 will provide users with a faster and more lightweight form rendering experience while still providing all the necessary features.

For more details & screenshots: Visit Here

New Fields:​

1. HTML Native Select Field
   • The HTML Native Select Field is a browser-native implementation of the select field element that ensures a consistent and optimized experience across different platforms.
2. Dropdown Field
   • The Dropdown Field has been completely re-structured and re-designed from version 1. It now includes multiple option lists and the ability to activate them conditionally.
3. Advanced File Upload
   • The Advanced File Upload feature includes drag-and-drop support, the ability to capture files from a camera, and many other customizations.
4. Country Field
   • The Country Field has been completely re-structured and re-designed from version 1. It now includes the ability to automatically select a country based on the user's IP and geo-location.
5. Currency Field
   • The Currency Field uses an input mask based on the browser's locale and allows for custom number formatting patterns.
6. Phone Number Field
   • The Phone Number Field uses an input mask based on a custom number formatting pattern.
7. Title field
   • The Title Field allows users to add a heading (h1 to h6) to their forms, providing a clear and structured hierarchy for the organization of the form.
8. Image Field
   • The Image Field allows users to show an image to their forms, providing the ability to include visual elements to enhance the form's design and functionality.
9. Divider
   • The Divider Field allows users to add a horizontal divider line in their forms, providing a clear separation between different sections of the form and helping to improve the form's overall organization and design.

Builder New Features:​

1. Clone / duplicate field
   • The Clone/Duplicate Field feature allows users to easily create multiple copies of a specific field within the form, saving time and effort when building forms with multiple similar fields.
2. Field label, subtitle, & helper text
   • The Field Label, Subtitle, and Helper Text feature allows users to add text labels, subtitles, and additional information to individual form fields, providing context and clarity for users when filling out the form.
3. Prefix & suffix icon
   • The Prefix & Suffix Icon feature allows users to add icons to the field label, subtitle, input field, helper text, and error message, providing visual cues for users and helping to improve the form's overall design and usability.
4. Hide fields from the builder
   • The Hide Fields from the Builder feature allows users to temporarily remove fields from view in the form builder, making it easier to focus on specific areas of the form while building it and to control the visibility of fields for the end users.
5. Default value, read-only, disable field from field settings
   • The Default Value, Read-Only, and Disable Field from Field Settings feature allows users to set default values, make fields read-only, and disable fields directly from the field settings, rather than having to set it from conditional logic.
6. Autocomplete & custom suggestion list in the text field
   • The Autocomplete & Custom Suggestion List feature allows users to enable an autocomplete function in text fields and provide a list of custom suggestions to choose from.
7. Custom field name, rather than field key
   • The Custom Field Name feature allows users to set custom names for fields, rather than using the default field key.
8. Change form width based on the device breakpoint
   • This feature allows users to adjust the width of their form based on the device's breakpoints, ensuring a responsive and optimized experience for users on different devices.
9. Undo/redo feature in builder & style editor
   • This allows users to undo and redo changes made in the form builder and style editor, providing an easy way to revert mistakes and make changes more efficiently.
10. Custom CSS / JS code editor in builder
    • allows users to add custom CSS and JavaScript code to their forms directly in the form builder, rather than having to add it from the theme builder.
11. 10,000+ icons added from different open source library
    • The addition of over 10,000 icons from different open-source libraries allows users to have a wide range of icons to choose from for their forms, providing more options for customization and enhancing the overall design of their forms.
12. Builder from 6 columns to 60 column layout
    • The Builder layout has been significantly enhanced in version 2, going from the 6 column layout in version 1 to a 60 column layout. This provides users with much greater flexibility and convenience when designing the structure and layout of their forms. and many more...

Style Editor New Features:​

1. Multiple theme support including no CSS theme (inherit from your website theme)
2. Global theme level styling [change once, design all the fields]
3. Individual Field Themeing [override global theme & choose a theme for your specific field]
4. Individual Field Styling [override theme & style your fields individually]
5. Each & every part of a field will be divided into layers so that you can select that part and style with ease
6. Layer selector tool - ability to hover on a part of your field and that will show you the styling section of that layer
7. Color Scheme: Light & Dark [style individually for them, to match the user's color scheme preference]
8. RTL (Right to Left) support
9. Font Family [inherit from the theme, custom font name input, 1400+ google font list]
10. Field sizing [extra small, small, medium (default), large, extra large]
11. Button styling
12. Input field styling based on multiple states (eg: hover, focus, disabled, read-only)
13. Add Custom class name & attributes [at every HTML element]
14. Required 'Asterisk' icon styling, and many more...

For more details & screenshots: Visit Here

Accessibility Improvements:​

In addition to the new features and enhancements, we have also focused on improving the accessibility of the form. This includes all existing fields as well as the new custom advanced fields. To ensure that users with disabilities can easily interact and use the form, each field has been thoroughly tested with accessibility tools. This includes testing for keyboard navigation, which allows users to navigate through the form using only a keyboard, and screen reader compatibility, which ensures that the form can be read out loud by assistive technology for users who are visually impaired. We have also implemented ARIA attributes to ensure that the form is properly conveyed to assistive technology. All this will help people with disabilities to have a better experience when using the form.

Conditional Logics:​

We have also rebuilt the conditional logics from the ground up in version 2. This includes the addition of Else If and Else scenarios for the logics. This provides more flexibility and control over the form's logic, allowing for more complex and nuanced conditions to be set. Additionally, a new Calculator Field is now available, providing users with the ability to perform calculations within the form and use the results to influence the form's logic. This will help users to create more dynamic and interactive forms, with a great flexibility in terms of conditional logics and calculations.

For more details & screenshots: Visit Here

Confirmation Messages:​

In version 2, you have the ability to customize the style of success and error messages to better align with the overall design of your form. This allows you to create a consistent and visually appealing experience for users when interacting with the form. You can choose from three types of message display:

i) Below the form, which displays the message directly below the form,
ii) As a modal, which displays the message in a separate modal window, and
iii) As a snackbar, which displays the message at the bottom of the screen.

This gives you the flexibility to choose the best way to display messages to your users. Additionally, you can also change the look of messages with all possible custom styling options, such as font, color, background, and more. You can also set the duration of the message. All these options will help you to create a tailor-made message display that suits your needs and design.

Improved Payment System:​

We have also made improvements to the payment fields and their working structure in version 2. One of the major improvements is the ability to save the form entry even if the payment fails. This is important because sometimes the payment may fail due to server issues, and the form entry is not saved. With this new feature, the entry will be saved in the database, allowing you to manually process the payment later. This will help to ensure that no valuable data is lost and that users can continue to fill out the form without interruption. Additionally, the payment fields have been optimized for better performance. All these changes will help to make the payment process more smooth and reliable for the users.

How to get the new version and install​

1. Go to the Bit Apps
   Subscriptions page Here
2. You will find the Bit Form V2 Beta & Bit Form Pro V2 Beta plugin there.
3. You will have to install both the plugins into the WordPress.
4. No license key is required to install the pro beta version.

Bug Report​

As this is a beta version, we are expecting some bugs. So if you find any, please report it here: Trello Board