Vue Form Builder

A form builder is a tool that allows users to create and customize web forms without the need for manual coding. If you are looking for a powerful form builder that would enable even those of your team members who lack coding skills to design beautiful web forms, the SurveyJS product line offers just the right component. SurveyJS Form Builder for Vue 3 is an open-source visual form editor that features a user-friendly interface, 20+ accessible input types for your forms, seamless integration with any backend framework and database, integrated Theme Editor, and much, much more. This article shows just how easy it is to add SurveyJS Form Builder to your Vue 3 application.

We will implement a simple application that displays a list of surveys or forms stored in a database. Users can create new forms and edit/delete existing forms.

Task 1: Add Form Builder to your Vue 3 app

Step 1: Install Form Builder (aka Survey Creator)

Open CodeSandbox and create a new Vue 3 application by forking the Vue 3 template. Add the following packages to Dependencies:

• survey-creator-vue— Survey Creator rendering code for Vue 3.
• survey-creator-core — Platform-independent Survey Creator code.
• survey-vue3-ui — SurveyJS Form Library rendering code for Vue 3.
• survey-core — Platform-independent SurveyJS Form Library code.

If you want to add Survey Creator to a real-world application, use the following command to install the survey-creator-vuepackage. Other packages will be installed automatically as peer dependencies:

npm install survey-creator-vue@latest — save

As a result, your package.json should contain the following dependencies:

Step 2: Install Plugins

Survey Creator rendering code is encapulated in surveyPlugin and surveyCreatorPlugin. To use them in your application, open the main.js file, import these plugins, and install them using the app.use() method in the exact order shown below:

Step 3: Configure Styles and Render Form Builder

Survey Creator styles are distributed as two style sheets. Import them in a custom Vue component that will render Survey Creator. We can name this component FormBuilder. Create a component file named FormBuilder.vue in the components directory and import the style sheets.

Next, we need to render Form Builder on a web page. Import SurveyCreatorModel and ICreatorOptions from the survey-creator-core package. ICreatorOptions is an interface that describes Survey Creator settings. Instantiate theSurveyCreatorModel using anICreatorOptions object and pass the instance to the model attribute of the SurveyCreaterComponent element:

If you do everything right, the Form Builder will be shown in the CodeSandbox preview:

Task 2: Implement a form management UI that supports CRUD operations and set up Vue routing

This task bears no relation to SurveyJS functionality. We need to get the list of form from a database, allow users to create a new form, and change the name and JSON definition of an existing survey. Unfortunately, in real-world apps, you have to repeat these steps for every application. If you are familiar with them, you can skip this section and go directly to Task 3.

Step 1: Implement asynchronous functions that work with the database

To simplify the code and let you modify data locally in your browser, we will use the browser’s local storage and emulate asynchronous calls using thesetTimeout function. We will put all our data-related functions into the WebDataService.ts file. In the code below, this file contains only function signatures for brevity. Refer to the resulting CodeSandbox for a full code listing.

Step 2: Render the survey list

Create a FormList.vue component that will render the list of forms, allow users to add a new forms and edit/delete existing surveys. It will navigate to the following path for editing forms: /editsurvey/surveyId.

Step 3: Set up routing

Routing is provided by Vue Router 4. To install it, add the vue-router package to dependencies. In real-world applications, you can also use the following command:

npm install vue-router@4 --save

Open the main.js file and add the FormBuilder and FormList components to the routes:

Task 3: Load and save form JSON definitions

We need a form ID to load and save the survey JSON definition. We can get the ID from the id query parameter. All that’s left to do is to call the getSurveyJSON and saveSurveyJSON functions from the WebDataService.ts file.

Note that Survey Creator has an isAutoSave property. If you enable it, the saveSurveyFunc callback is called on every change. The callback has two parameters: a numeric saveNo and a callback function. saveNo is an incremental number. Since web services are asynchronous by their nature, older changes may come after more recent changes. It means that if you saved the change #152 on the server, you can simply ignore changes #151 and below. After getting a confirmation from the server, you can use thecallback parameter and call it as callback(saveNo, true) in case of a success or callback(saveNo, false) in case server could not save the data for some reason. In both cases, the Form Builder will show notifications.

Task 4: Change the survey name

You can implement different UIs to allow users to change the survey name. For example, users can edit the name in a survey list. The second option is to display a text input for editing the survey name below the Survey Creator. Another solution is to add a survey property that users can modify in the Survey Creator’s Property Grid (see the example).

In this article, we take the survey name from the survey title and save a record about it in the database. The record has three fields: id, name, and json.

Step 1: Set the survey title

You can do it in code as follows: creator.survey.title = "yourValue";. Do it within the onMounted hook after loading the survey JSON definition.

Step 2: Update the survey name in the database

Set the name field in the database record when the survey title property is changed. You can use thecreator.onModified event for this purpose.

Step 3: Make the survey title property required

You should prevent end users from emptying the survey title because the survey name in the database cannot be empty. There are several ways of doing it, but the easiest one is to find the needed property and set its isRequired attribute to true.

Conclusion

You have learnt how to add SurveyJS Form Builder into your Vue 3 application and save form JSON definitions in a database. It is not a complete service. Missing capabilities include showing forms to end users, gathering responses, and presenting them in a table or dashboard. Leave a comment below if you like our products.

About SurveyJS Project

SurveyJS Project includes four open-source JavaScript Libraries:

• SurveyJS Form Library — A free and open-source MIT-licensed JavaScript library that renders dynamic JSON-based forms in your web application, and collects responses. It offers native support for React, Angular, Vue.js and Knockout.
• SurveyJS Form Builder — A self-hosted drag-and-drop survey and form builder that automatically generates JSON definition (schemas) of your forms in real time. The Form Builder offers native support for React, Angular, Vue.js and Knockout. Try out its free full-featured demo built to evaluate its capabilities.
• SurveyJS Dashboard — Simplifies survey data analysis with interactive and customizable charts and tables. Visualize your insights with the survey data dashboard and analyze survey results in one view.
• SurveyJS Export to PDF — An open-source JavaScript library that renders SurveyJS surveys and forms as PDF files in a browser. With PDF Generator you can save an unlimited number of custom-built forms to PDF (both editable and read-only).

To learn more about SurveyJS, visit our website: surveyjs.io.