Help and support

Introduction to Form Design

From design provides a drag-and-drop interface for creating apps and forms to collect, import and extract data from documents.

Imagine streamlining processes and collecting valuable data at your educational institution without writing a single line of code. That's the magic of our drag-and-drop form design option!

Here's how it can benefit your school:

Effortless Form Creation:

Think of permission slips, registration forms, or course evaluations. Simply drag and drop elements like text boxes, dropdowns, and checkboxes to design a user-friendly form in minutes. No coding skills needed!
Example: Create a permission slip form for a field trip. Drag a text box for student name, grade level, and parent/guardian signature. Add a checkbox for dietary restrictions and a text box for any additional information.

Data Collection Made Easy:

Gather information directly from students, parents, and faculty through online forms. Eliminate paper-based processes and streamline data entry.
Example: Collect course evaluations. Drag elements to design a form with questions about course content, instructor effectiveness, and student engagement. Analyze the data to improve future courses!

Build Mini-Apps to Enhance School Operations:

Go beyond basic forms! Use the drag-and-drop interface to create small applications that analyze your collected data.
Example: Build an app that analyzes course evaluation data and displays trends in student feedback for faculty meetings. This helps instructors identify areas for improvement.

Starting the process of Form Design

To start, let’s delve into the process of form creation in detail. Begin by clicking the create design button in the forms tab and click on the create form design button you will be asked to create your for design in 5 steps.

Step 1:

Entering the Form Design Details

Form Design Name: Provide a unique name, up to 45 characters, with no spaces or special characters except underscore.
Also, users can not create a name starting with “auto_”
Description: Offer a detailed description of what the form design represents
How to Start Your Form : When creating a new form, you can choose between two options:
- Blank: Start with a completely new, empty form and build your design from scratch.
- Import: Copy the elements and structure from an existing form or previously created design, allowing you to reuse and customize it quickly.
Form Type:
- Input Form — Collects and captures data from users.
- Output: Display — Presents the collected data in a clear and structured format.
Multistep Form: Choose whether the form should be a standard single-page form or a multistep wizard-style form. A wizard-style form guides users through multiple steps, making it easier to complete longer or more complex forms.
Online/Offline Mode: Choose whether the form requires an active internet connection to be completed and submitted.
- Online Mode, users must be connected to the internet while filling out and submitting the form.
- Offline Mode, users can complete and submit the form without an internet connection. Their responses are stored locally and automatically synchronized once an internet connection is restored.
Now, click on save button to save the form design

Clicking on save, the user should see a modal with options to start form design now or to do it later.

Now, Editing a Form design

Now to edit Form design go to the Form Designs section under the design tab. Form design can be refined as understanding evolves.
Now, From the Design tab, Click on the edit button from the listing: Edit required fields, excluding the form design name itself.
Now, click on the save button to save changes.

Step 2:

Form design creation process with drag-and-drop functionality:

Building Your Forms Just Got Easier!

Let's walk you through the exciting world of form design! Imagine a toolbox filled with different building blocks, and that's what you get with our form builder.

On the Left Side is Your Toolbox:

This is where you'll find all the components you need to create your form. Simply drag and drop them onto the design area to build your perfect form.

On the right side is your dynamic data selection keys that can be dragged and dropped to your form.

Meet the Building Blocks:

We have a variety of components to choose from, each with its own purpose:

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.

Step 3: Set Up Form Submission Actions

This improved form system provides users with greater control over what happens after a form is submitted, streamlining workflows and enhancing user experience. Here are the key features:

1. Print PDF Settings:

Gain precise control over the generated PDF output:
Set the desired font size for easy reading.
Adjust the zoom level for optimal viewing on different devices.
Choose a suitable paper size (e.g., Letter, A4) depending on your needs.
Define margins (left, right, top, and bottom) for a well-organized layout.

2. Sequential Internal Numbering (Optional):

Add a unique sequential number to each form submission for easy identification and tracking. Simply enable the checkbox to activate this feature.

3. Email Design Selection:

Pre-designed email templates for a professional touch:

Select from a library of pre-designed email templates that complement your form's style.
This ensures consistent and polished communication when sending emails upon form submission.

4. PDF Download Options:

Convenience and control over accessing the submitted form in PDF format:

Choose to receive a copy of the completed form as a PDF attachment in the email notification (if email notification is enabled).
Alternatively, download the PDF manually directly after submitting the form, providing flexibility based on your preferences.

5. Workflow Management:

Streamline approval processes with built-in workflows:

Define custom workflows to automate routing submissions for approval based on specific criteria.
This helps ensure proper authorization for actions like requesting leave, where manager's approval might be required. You can configure workflows with multiple levels as needed.

6. Manual Email Notification :

Send tailored email notifications for specific situations:

Enter email addresses manually for situations where pre-defined recipients aren't suitable.
Combine this option with the email design selection to create customized notifications.

7. Track Location Data:

Capture valuable location information for analysis:

With this feature enabled, the form can capture address components (street address, city, state, ZIP code, etc.) as separate fields.
This allows you to analyze submission locations for insightful data and potential trends.

Appearance Section

The Actions section provides powerful tools to customize and manage your form design. Let's explore each option:

1. Copy Design:

Imagine you have a form design you love but need another one with a similar layout. This option lets you quickly replicate the design from any of your existing forms. Here's how it works:

Click "Copy Design" from the dropdown.
A list of your previously created forms will appear.
Choose the desired form to copy the design from.
The components and layout from the chosen form will be instantly applied to your current design, saving you time and effort.

2. Select Theme:

Want to give your form a unique visual style? The "Select Theme" option allows you to effortlessly apply pre-designed themes offered by Artificio. Here's what you can do:

Click "Select Theme."
A selection of stylish themes will be displayed.
Browse through the available themes and choose the one that best suits your form's purpose and brand identity.
The chosen theme will be instantly applied, transforming the look and feel of your form.

3. Set Form Width:

Ensuring your form displays perfectly across different devices is crucial. The "Set Form Width" option lets you control the width of your form for optimal presentation. Here's how to use it:

Click "Set Form Width."
You'll be able to enter a specific width value (e.g., pixels, percentages) or choose from pre-defined width options.
The form will adjust its width based on your selection, ensuring it looks great on desktops, tablets, and smartphones.

Step 4: Preview:

Before publishing your form, it's always a good idea to see how it looks and functions. Clicking "Preview" offers a real-time preview of your form design. This allows you to:

See how the form elements are arranged.
Test how users will interact with the form.
Make any necessary adjustments before finalizing your design.

These action options empower you to easily manage your form design, saving you time and effort while creating professional and user-friendly forms.

Step 5: Publish

User can now create a public link or password protected to be shared with people.

Artificio's Style Editor: Styling Your Forms

The Style Editor in Artificio is a powerful feature that allows you to customize the appearance of your forms beyond the standard themes, making them more stunning and professional. You can use custom CSS to apply beautiful and unique styles to perfectly match your brand or design requirements.

Accessing the Style Editor

You can access the Style Editor directly from your form design interface:

Locate the Actions dropdown button next to your form.
Click the Actions dropdown button.
From the menu that appears, select the option Edit Styles and Preview.

Key Functions and Benefits

The Style Editor provides two main, integrated functions:

Custom CSS Integration:
- This is the core of the editor. It provides a dedicated area where you can write and paste your own Custom Cascading Style Sheets (CSS) code.
- By using custom CSS, you have complete control over elements like colors, fonts, spacing, borders, backgrounds, and more, allowing for highly personalized form designs.
Live Preview:
- The Live Preview feature is essential for efficient design. As you write or modify your CSS code, the form's appearance updates on the go.
- This immediate feedback loop lets you see the effects of your changes instantly, allowing you to test, refine, and finalize your design without needing to save, exit, and reload the form repeatedly and clicking on preview user can preview the design.

Conclusion

Effortless Form Creation for Educational Institutions

This drag-and-drop form builder empowers educational institutions to streamline data collection and create user-friendly forms without writing a single line of code. From permission slips to course evaluations, educators can design forms in minutes, saving valuable time and resources.

Here's a quick recap of the benefits:

Effortless Form Creation: Drag and drop pre-built components to design forms for various needs.

Enhanced Data Collection: Collect data directly from students, parents, and faculty through online forms, eliminating paper-based processes.

Data Analysis and Improvement: Build mini apps to analyze data and identify areas for improvement in courses and school operations.

Mobile-Friendly Forms: Ensure forms are accessible and user-friendly on all devices.

With this powerful tool, educational institutions can transform data collection from a tedious task to an asset for improving communication, efficiency, and overall student experience.