Help and support
These are the most common building blocks, like:
Mostly Used Components:
Common form components include text fields for short inputs, text areas for longer entries, and specialized fields for email, phone, and numbers.
Other key elements are date/time pickers, password fields, checkboxes, select boxes, radio buttons, buttons for actions, and signature capture.
Lets understand them in detail:
Text Field: This is where users can enter information like their name or short text. You can customize it by adding a label, making it mandatory, or even changing the way the text appears (uppercase, lowercase, etc.).
Email: This field is specifically designed for email addresses and comes with built-in validation to ensure users enter valid email formats.
Text Area: This is a free-flowing text box where users can enter paragraphs or longer descriptions. So, whenever you have more to say than a single line can hold, a text area is there for you to express yourself freely
Phone Number: This ensures users only enter phone numbers in the correct format.
Number: Number field as a special box that only accepts numbers. It's like having a handy tool that ensures only the right kind of information goes in. Number fields are like little guardians that ensure your data stays accurate, organized, and ready for calculations – all to make things easier for you!
Date/Time: This lets users select dates and times from a calendar popup.
Password: This hides what users' type, perfect for creating secure password fields.
Checkbox: Checkboxes are like little light switches for your computer. Clicking the box turns it "on," which translates to a true value in computer language. This is useful for things like marking a task as completed or indicating a preference like "enable dark mode." Leaving the box empty means it's "off," which translates to a false value. So, next time you see a checkbox, think of it as a tiny on/off switch for your computer!
Select Boxes: These allow users to choose from a predefined list of options. You can add these options yourself.
Radio Buttons: These are like checkboxes, but users can only select one option at a time.
Button: This creates a clickable button that can perform actions like submitting the form, saving data, or resetting the form entirely.
Signature: This allows users to capture their signature electronically on the form itself.
Fine-tuning Your Building Blocks
Once you've placed a component on your form, you can customize it further. Each component has its own set of properties you can adjust, like:
Display: Change the label, hide the component, or make it mandatory.
Data: Control how the entered information is formatted (uppercase, lowercase, etc.).
Validation: Set rules to ensure users enter data in the correct format (e.g., requiring a minimum number of characters).
API: This connects your form to your backend system, where the collected data is stored.
Conditions and Logic: Make your form dynamic! Show or hide components based on user selections in other parts of the form.
With this drag-and-drop builder and the ability to customize each component, creating user-friendly and powerful forms is easier than ever!
This form builder offers a wide range of pre-built components you can easily customize to create your perfect form.
Here's a breakdown of each component:
Draggable and Customizable Fields
Email: Simply drag and drop the email field where you want it. Users can enter their email addresses, and the system automatically validates the format.
Text Area: This free-form field allows users to enter any text without restrictions. Customize it to fit your needs.
Phone Number: Ensure users provide valid phone numbers with this field. It only accepts numerical input and can be formatted according to your preferences.
Number: Like the phone number field, this component restricts input to numbers.
Date/Time: Add a date picker for users to easily select dates and times.
Password: Create secure password fields where users can enter their login credentials.
Interactive Options for User Input
Checkbox: Let users select options with checkboxes. You can define the options and customize their appearance.
Select Boxes: Provide users with a list of pre-defined options to choose from. You can add these options while configuring the field.
Select (Dropdown): This component offers a dropdown menu where users can select a single value from the list you provide.
Radio Buttons: Present users with a group of radio buttons where they can only choose one option. Define the options while setting up the field.
Special Components
Button: Create buttons with customizable text and functionality. Choose from actions like submit, save, or reset.
Signature: Allow users to capture their signatures within a designated area on the form.
Fine-Tune Every Aspect:
Each component offers a properties section where you can customize its appearance, data settings, validation rules, API integrations (if applicable), and conditional logic to control how the form behaves based on user input.
This drag-and-drop form builder empowers you to create user-friendly and efficient forms tailored to your specific needs!
Uploading Files Made Easy!
This form builder has a fantastic Files component that lets you collect two important types of files from your users: images and PDFs.
Here's how it works:
Image Uploads:
- Users can upload images directly from their computer while filling out the form.
- They can also use their webcam to capture an image on the spot! (Great for quick ID verification or capturing product images)
- You can even set a specific width requirement for the image to ensure it fits perfectly in your form.
PDF Uploads:
- Users need to submit documents like resumes, contracts, or reports? No problem!
- The Files component allows users to upload PDF files directly within the form.
- This way, you can collect all the information you need in a single, streamlined experience, saving both you and your users time and effort.
The next Imagine Data Series as pre-built labels for your text fields.
Data Series allows you to leverage existing headers from your data. These headers could be things like "Customer Name," "Product ID," or "Date." Instead of manually typing these labels for each text field, you can simply drag and drop the Data Series component onto your workspace.
Benefits:
Saves Time: No need to type out repetitive labels. Drag and drop for quick setup.
Reduces Errors: Eliminates typos that can happen with manual entry.
Consistency: Ensures all your text fields have the same labels and formatting.
Here's an example:
Let's say you have a dataset with columns for "Customer Name," "Email," and "Phone Number."
Instead of creating three separate text fields and labeling them manually, you can:
Drag the Data Series component onto your workspace.
It will automatically display the available headers from your data (Customer Name, Email, Phone Number).
Simply drag and drop each header onto its corresponding text field.
Data Series makes creating text fields with consistent labels a breeze!
Extra Components
Powerful Building Blocks for Your Forms!
The Extras component is your toolbox for adding a variety of interactive elements to your forms, making data collection a breeze!
Here's a breakdown of the helpful tools at your disposal:
URL: Need to capture website addresses? This component provides a dedicated field for users to enter URLs directly in the form.
Tags: Want to categorize information with ease? The Tags component allows users to create and add relevant keywords to classify data within the form itself.
Address: Simplify address collection with this powerful component. It leverages APIs from Google Maps and Azure (or similar services) to streamline the process, ensuring accurate and complete information.
Day: Ensure precise date entry with the Day component. Users can easily select the day, month, and year directly within the form.
Time: Looking to capture specific times? The Time component provides a user-friendly time picker for accurate time selection.
Currency: Working with finances? The Currency component allows users to enter monetary values directly in the form. You can even define the currency type from your data section for added flexibility.
Survey: Gather in-depth feedback with the Survey component. This versatile tool lets you create tables within the form where users can answer questions and provide corresponding values.
Sequential Number: Maintain order and reference with the Sequential Number component. It automatically generates a unique number for each form submission, which can be helpful for tracking and automation.
With the Extras component, you can design forms that are not only user-friendly but also capture the exact information you need. It's a powerful toolset that streamlines data collection and empowers you to create effective forms!
Enhance Form Functionality with Formatting Components
Your forms can benefit from a variety of formatting components that improve user experience and organization.
Here's an overview of three key options:
Content: Utilize the Content component to provide users with essential, non-interactive information. This can include contextual explanations, headers, or even media like images. Think of it as a dedicated space for clear instructions or relevant background information displayed at the top of your form, and unlike other components, its value isn't submitted.
Columns: This component offers a powerful way to group other form elements, such as text fields, text areas, or checkboxes, into configurable columns. By utilizing Columns, you can efficiently present multiple related questions on a single line, saving valuable vertical space and potentially reducing the overall form length.
Panels: Leverage Panels to create visually distinct sections within your form. Each Panel allows you to group related fields together and assign a descriptive title for enhanced clarity. This organizational approach improves the user interface by making navigation and comprehension intuitive.
Data grid
Data Grids are like special sections within that form that help you organize information.
Here's how they work:
Grouping related things together: Data Grids allow you to group related fields under a single label. For instance, you can create a section for "Product Details" that includes fields like "Name", "Description", and "Price". This keeps things neat and organized.
Adding variations: Within a Data Grid, you can add multiple rows to enter information for different variations of the same product. So, if your product comes in different sizes, you can add a row for "Small", another for "Medium", and so on. Each row would have separate fields for the size-specific details.
Multiple grids for complex forms: Data Grids are flexible! You can add multiple grids to a single form. This is useful when you need to collect similar sets of information. Imagine adding another Data Grid for "Images" where you can upload pictures of your product from different angles.
In short, Data Grids provide a way to build well-organized forms that make it easier to enter grouped data efficiently.
Edit grid
Imagine Edit Grid as a powerful and flexible way to build forms with a familiar table layout. It lets you easily collect and display information in a structured way.
Here's what makes it great:
Tables made easy: Think of each row in the Edit Grid as a table row, and each cell can hold different types of form fields like text boxes, drop-down menus, or even date pickers. This makes it perfect for collecting things like product details, customer information, or even expense reports.
Add anything you need: The beauty of the Edit Grid is that you can add multiple components inside each cell. This gives you the freedom to capture various types of data within a single row.
Multiple grids, endless possibilities: Need to collect information in different sections of your form? No problem! You can add multiple Edit Grids within a single form. This is ideal for situations where you need to capture data in separate categories, like billing information and shipping details.
Think beyond tables: Edit Grids aren't limited to just replicating simple tables. You can use them to create more complex layouts like multiple field sets, which group related information together.
Flexibility is key: The Edit Grid also gives you control over how the data from each row is saved and displayed. This allows you to customize the final form experience for your users.
In short, Edit Grid provides a powerful and adaptable way to build forms that collect and present information in a clear and organized manner.