Vue Flow Form is a form generator tool for developing custom conversational forms. It's a free, open-source, and self-hosted solution built with Vue.js under the MIT license, that can be integrated into your app or website. Built to be flexible with versatile applications, appropriate for user registration, contact pages, support pages, feedback forms, surveys, or a quiz.
Key Concepts and Technology
Designed as simple, interactive, and non-intimidating, Vue Flow Form is aimed at increasing conversion rates. You can engage users with a human-like approach of asking only one question at a time. It's all about having a conversation rather than interrogating for data collection.
Fully responsive - optimized for all modern web browsers and mobile devices. Vue Flow Form includes all the essential form elements you might need, like basic text fields, number fields, and text areas. Multiple choice features and dropdowns are also supported.
Using an open-source, free, and self-hosted solution gives you control of your data and the app itself. It means you can host it on your server, customize it however you like, and build on top of it.
Vue.js is the technology of choice as the intention was to make Vue Flow Form a developer-friendly and scalable Vue component without a lot of overhead. This way, you have a lean and understandable, component-based source code, you can easily add, remove, or change features. Besides that, Vue is lightweight compared to other frameworks, so it helps for better app performance.
Features
Designed to increase form user completion and conversion rates by:
- Reducing the perceived complexity of the form.
- Providing enough structure and guidance to the completion point.
- Creating an interactive and engaging experience.
- Increasing the sense of accomplishment and progress.
Multi-Step Format
First impressions matter a lot. Long forms can look intimidating to the user, resulting in an early drop-off, or even discouraging them from engaging at all. Various user experience research studies suggest dividing long web and application forms into multiple steps increases conversion rates.
Multi-step form approach allows you to create designated routes and guide the user by providing the right form structure with helpful details. The shorter and more precise the path, the higher the probability of its completion.
Another advantage of multi-step forms comes to the fore when using standard or specialized form analytics tools. The multi-step format allows more precise tracking of different aspects of user form interactions, like steps with the highest drop-off rate. You can focus on problematic form segments and decrease your user drop-off.
Conversational Form Interface
Vue Flow Form takes one question at a time approach that seems just like a face-to-face conversation. Setting custom titles, subtitles, and help text can add context to the conversation and create an even more meaningful interaction.
Form Validators
Some of the form questions might require quite specific rules for what users can write into a field. Vue Flow Form comes with a number of validation functions, like required or pattern validators to ensure the user-provided email addresses, URLs or phone numbers accuracy.
Conditional Logic
The built-in conditional logic feature provides the opportunity to shorten the path to form completion by creating custom paths and avoiding questions not relevant to the user. The user will see only those questions that relate to him based on his previous answers.
Providing Guidance
To make the input format and question goals clear, you can offer additional help, tips and guidance to the user by providing: Custom placeholders and masked inputs; Titles, subtitles and helper text; Highlighted error messages.
Organizing Questions Into Sections
Vue Flow Form provides you with the possibility of arranging questions into sections. Custom section pages allow for segmentation of a lengthy form into more manageable pieces, and help respondents understand the topics covered.
When a user completes an action, he needs to feel the sense of accomplishment and reward for the time invested to be further engaged. For example, you can congratulate the user with an "Awesome job" message when they complete a section of your form.
Tracking Progress and Review
Simple form progress tracker indicates the percentage of completed steps. Users can go back and review their answers at any time, ensuring their confidence in the information they submit.
Auto-Focus and Keyboard Shortcuts
Users can start typing immediately without needing to click on the text input field first. The entire form can be completed using just a keyboard, which increases form usability and accessibility.
Custom Design and Branding
You get a light-hearted, out-of-the-box fully responsive design that doesn't distract from the entry fields. Make as many design modifications as you like. For example, you can add your company's logo, font, and color palette.
For easy customization, you can use a free open-source theming system set with variables. Light or dark color theme is automatically applied based on your system preferences.
Multi-Language support
Define questions, titles, and subtitles in a language of your preference when creating your form. All language-dependent strings - like messages, UI elements, and help entries can also be translated as part of the LanguageModel.
Integrating With Your Project
Install the component as any other npm package or simply embed Vue.js, the necessary JavaScript and CSS from the CDN and start coding away. Both methods are explained in the documentation. Vue Flow Form is kept up to date and supports Vue 3, but you can use the older version in your Vue 2.x projects.
GitHub
Live Demos
Documentation
We released this free open-source form generator project under the MIT license hoping someone could find it useful. Contributions are always welcome on our GitHub open-source repository. To help you figure out how to install and use it, check the project's documentation.
