How to create data collection forms in Elbuz

The form creator in Elbuz is a convenient tool for quickly creating various forms without the need for programming knowledge. With a simple drag-and-drop interface, you can easily add and customize form fields such as text fields, checkboxes, radio buttons, and more. You can embed the created forms on your website or send a link to them to collect data from users.

Using forms you can:

• 🛒 Register users for events
• 📝 Collect feedback and suggestions
• 📊 Conduct surveys and voting
• 📋 Create requests for services
• 💼 Fill out questionnaires for job seekers
• 📮 Create feedback forms
• 🎓 Conduct tests and quizzes
• 📑 Submit requests for technical support
• 💡 Collect ideas and suggestions
• 📈 Conduct marketing research

Getting started with forms

Open forms using a shortcut on your desktop or through the main menu.
To open projects through the main menu:

1. In the main menu, select the "Organizer" section
2. In the menu that opens, select "Forms"

Overview of the forms management interface

At the top of the window there are form management buttons, such as:

• Creating a form manually
• Creating a form using AI
• Form categories
• Calendar categories
• Form statuses
• Visual connection graph
• Search by status and other parameters

Forms can be displayed either in the form of cards or in the form of a list.

For editing mode, click on the "Pencil" icon, to view, click on "Eye" icon.

Creating a form using the Elbuz constructor

It's simple and fun!

Step-by-step instructions:

1. Create a new form by clicking on the "+" button (you can immediately select a form category)
   
2. On the left you will see a list of different types of fields that can be added to the form. It's like lego bricks that you use to build your shape!
3. On the right there is an empty field - this is the place where your future form will be located. To add a field from the list on the left, simply drag it with your mouse into this empty field on the right. This is called "drag" or "drag-and-drop".
   
4. Once you've dragged the field onto the form, you can customize it. To do this, click on the pencil icon next to the field. A window will open where you can specify various parameters of the field, for example, its name, hint, mandatory filling, and so on.
5. If you need to add more fields, just repeat steps 3 and 4. You can add as many fields as you need for your form!
6. When your form is ready, click on the "Save" button at the bottom of the page. Your form will be saved and you will be able to use it.
7. To check how your form will look for users, click on the "Preview" button. A new window will open where you will see your form in the form in which users will see it.
8. If you want to add your form to your website, click on the "Copy" or "Create Widget" button. Elbuz will generate a special code that you can insert into your website. This is called "embedding" the form.
9. When users fill out your form, you can view their responses. To do this, click on the "Answers" button.

That's it! Creating forms with Elbuz is very easy and fun. Try, experiment and you will succeed!

How to create a form using the AI assistant

Click the "Magic Wand" button

Provide a detailed description, what form you want to create and what the purpose is, tell what fields are required ( not necessary), this will help AI create what you require. Let's say you need an order form for young wizards who want to order their first magic wand. The form assumes the following fields:

• Name (text type)
• Age (number type from 3-18)
• Favorite magical animal (list type: unicorn, phoenix, dragon)
• Preferred color (radio button type: red, blue, green)

A form with the required set of fields will be created

Description of the form editing window

1. In the form creation window on the left there is a list of available fields with different types: Switches (checkbox flags), Date (date input), Heading (h1,h2,h3), Hidden field (hidden input), Number, Paragraph, Radio buttons, Select list, Text field (input), Textarea field.
2. On the right there is an area for adding fields by dragging, this is the future form. Simply drag the field you need from the list on the left to the area on the right.
3. After dragging a field, it can be edited, copied, deleted, or reordered. To do this, click on the pencil icon next to the field.
4. When editing a field, you can specify advanced settings depending on the field type, such as: Name, Placeholder, Label, Help Text, Required, Type, min, max, Step, Max Length, Rows, Options list. These settings will help you customize the field to suit your needs.
5. At the bottom there are form control buttons:
   • “Save” to save the form.
   • "Clear" to delete the form and create a new one.
   • "Preview" to check what the form will look like and test its operation, a new window will open with the final view of the form as users will see it.
   • "View JSON" to get form fields in JSON format for integration into various systems.
   • "Copy" to get the form code in HTML format for posting on your website, the code will be copied to the clipboard.
   • "Create widget" to create a ready-made code (iframe) for embedding on your website, the code will be copied to the clipboard.
   • "Responses" to view responses from users who filled out the form.
6. In a separate tab "Display settings" you can specify:
   • A link to your server to receive responses when filling out the form. The link will be inserted into the action attribute of the form object when the form is created.
   • Specify individual CSS styles to change the appearance of the form.
   • Specify custom JavaScript code to change the form's algorithm.
7. In a separate "Advanced" tab you can specify:
   • Name of the form.
   • Description.
   • Select the category to which the form belongs: General, Request for information, Personal, Survey, Registration, Technical support, Other.

Approximate view of the created online form (preview mode)

Form statuses

Each form can have one of the statuses:

• 🆕 New
• ⚡ In progress
• ✅ Completed
• ⏸️ Suspended
• ❌ Canceled
• ➕Create your own statuses if what you need is not in the list

How to change the status of a form

1. Click on the current status
2. Select a new status from dropdown list

Form categories and tags

Categories and tags help you group and quickly find the forms you need.

To add a category or tag:

1. Select the desired category from the list. If the category is not in the list, you can create a new one through the form category directory.
   
2. Provide a tag name and press Enter to add. If a tag has been added previously, then it will appear in the list for selection.

Form search

To quickly search for forms, use:

• Search bar at the top of the page - searches by name and description
• Filters by categories, tags, statuses
• You can sort and search by any fields in the "List" display mode

Start typing a search term to quickly find the forms you need. 🔍

Set flags for forms

Each flag has its own purpose. Activate the flags that suit your purposes:

Activity

• What it does: Flags the form as relevant to you.
• When to use: For forms that you work with and are relevant to you.

Favorites

• What it does: Places the form in the list favorites for quick access.
• When to use: For frequently used forms.

Pinned to top

• What it does: Pins the form to top of the list.
• When to use: For important forms that should always be on hand.

Archive

• What it does: Moves the form to the archive .
• When to use: For completed forms that need to be retained but removed from active use.

Trash

• What it does: Moves the form to the Trash for later removal.
• When to use: For forms that are no longer needed.

Template

• What it does: Marks the form as a template for reuse.
• When to use: To create basic blanks that can be copied.

Adding files to the form

The adding files feature allows you to attach additional materials to the form, such as like images or documents. This is useful for expanding information and storing related content in one place.

Follow the steps below to successfully add files.

Step #1 – Open the "Files" tab

There are two ways to add files:

• From local disk
• Via link

Addition file from local disk:

1. Click "Select file".
2. A window will open to select files on your computer.
3. Select the desired file.
   • Images, documents and other popular formats are supported.
4. Click "Open" , after that the file will be attached to the document.

Adding a file via the link:

1. Click the "Add file via link" button.
2. Enter the file URL in the field that appears.
   • Make sure the link is to a downloadable file.
3. Click "Add" so that the file is uploaded and attached to the form.

Step #2 – Verify that the file was successfully added

1. Once added, the file will appear in the list of attached files.
2. Check that the file is displayed correctly:
   • Images will show a preview of them.
   • For documents, the file name will be displayed.

Setting form reminders and notifications

You can set reminders for forms so you don't forget about important things.

How to set up a reminder

1. Open the "Reminders" tab 🔔
2. Select date and time or enter manually.
3. Set the frequency (if the form is repeated), the following modes are available: once, daily, weekly, monthly, annually.

The system will now send you notifications on the specified schedule until the form is completed. ⏰

If necessary, you can specify a reminder category, this will allow you to more effectively in the future use an event calendar in which your notifications will be distributed into folders.

Collaborate on forms

Share forms with colleagues and assign responsibility. By default, the form is visible only to the person who created it, if you want another user to see it, then give him access.

How to open access to the form

1. Open the user list
2. Select users by checking them

Templates forms

Use ready-made templates to quickly create standard forms.

How to create a document based on a template

1. Next to the "Create Document" button, click to the "Select template" item.
2. A list of templates to choose from will appear.

How to create a new form template

1. Create a new form.
2. Fill in the required fields.
3. Check the "Template" flag in the "Flags" tab.

Your template will then appear in the selection list templates To make the template available to all users, select the required ones in the form editing.

Adding links to a form

The adding links feature allows you to attach other elements to a form, such as projects, notes, tasks, documents, presentations and tables. This simplifies data management and creates visual connections between elements in a graph.

Follow the step-by-step instructions to set up connections.

Step #1 – Go to the “Connections” tab

You will see a list of already added connections, or an empty area if no connections have been created yet.

Step #2 – Create a connection

1. At the top, find the button with the icon "+" .
2. Click this button to open a list of available items.

Step #3 – Select an item to link

In the list that appears, you will see the available item types:

• Notes – to communicate with another note.
• Forms – for linking to another form.
• Projects – for attaching to a project.
• Tasks – to add an important task.
• Presentations – to add a connection to the presentation.
• Documents – to link to a document.
• Tables – for connecting a table.

In the list of elements that opens, its type will first be indicated, then its ID and name. You can use the search bar to quickly find an item.

Step #4 – Add a connection

1. After selecting an item, click the "Select" button.
2. The connection will appear in the list of connections.

Step #5 – Check the connections are correct

1. Make sure that the selected items appear in the links list.
2. If necessary, click on the "Pencil" icon to open the associated element for editing.
3. Include a note about the connection in the Description column.

How to view connections in a visual graph

Related items will be displayed in a visual graph for simplicity working with interrelated data. The graph makes it easy to see relationships between forms and projects, mark related elements and edit them directly from the graph. To do this, open the additional menu and select "Graph"

An intuitive visual a form in which abstract information will be linked, you can zoom in or out, as well as open elements for editing directly from the graph.

Glossary

• A form is a structured document containing fields for user input.
• Field is a form element intended for entering a certain type of data (text, number, date, selection from a list and etc.).
• Form Builder is a tool for creating forms without the need for programming knowledge.
• Drag-and-drop - a method of adding elements to a form by dragging them with the mouse from one area to another another.
• Embedding is the process of adding a form to a web page using special code (HTML or iframe).
• JSON is a text-based data exchange format that is easy to read and write by both humans and computers.
• CSS is a formal language for describing the appearance of a document written using a markup language (such as HTML).
• JavaScript is a multi-paradigm programming language that supports object-oriented, imperative, and functional styles.

Save a link to this article