Manual Guideline - Form Builder

1

Contents:

A. What is Form Builder
B. Using the Form Builder

  1. Access the Website
  2. Main Interface
  3. Questions or Question Groups
    3.1. Customize the Question
    3.2. Customize the Question’s Appearance
    3.3. Customize the Form’s Design
    3.4. Customize the Question’s Logics
  4. Preview the form
  5. Export the Form
  6. Demo
  7. The features need to be developed

A. What is Form Builder?

  • Form Builder is a powerful and user-friendly tool that allows you to create high-quality survey forms without the need for programming knowledge. With an optimized user interface and mouse-driven interaction, you can easily and flexibly drag and drop form components.

  • With Form Builder, you can create various types of questions, such as multiple-choice questions, open-ended questions, assessment questions, and more. The application provides you with a collection of beautiful and diverse interfaces, allowing you to customize the colors, sizes, and styles to your desire.

B. Using the Form Builder:

1. Access the Website:

2. Main Interface:

Upon accessing the website, you’ll be presented with a user-friendly interface divided into three primary sections: the left, center, and right sides. You can add more screen

  • Left: This area includes a collection of form element templates, including Single templates and Group templates.
    • Single template: It includes a question with an appearance.
    • Group template: It includes a group of questions with the appearances.
  • Center: This is where the selected questions are displayed.
  • Right: This is where you’ll construct and style your form.

3. Questions or Question Groups:

After selecting an element (a question), it will appear at the center of the interface. On the right side, this is where you can start customizing the questions and designing the form style. You can add a screen by clicking the button Add screen on the bottom right of the screen.

3.1. Customize the Question:

  • To customize your questions, click on a specific question at the center to access editing sections.
  • In the “Attribute” section, you can modify:
    • Question name: Give your question a distinct name.
    • Question label: Provide a brief description or label for the question.
    • Question hint: Add hints or instructions to guide form respondents.

3.2. Customize the Question’s Appearance:

Under the “Advanced” section, you can modify the visual aspects of the question:

  • Appearance: Choose the appearance style for the question from the available options.
  • Colspan: Select the number of columns the question occupies within the form layout (if applicable).
  • Align: Set the alignment of the question (left, right, center).

Note: It just allowed the user to perform on the Appearance in the Custom section.

3.3. Customize the Form’s Design:

The “Design” section allows you to personalize the overall look and feel of the entire form:

  • Primary color: Pick the main color theme for the form.
  • Accent color: Select a color that highlights key elements.
  • Background color: Define the background color of the form.
  • Question color: Choose the text color for the questions.
  • Answer color: Specify a color for the answers.
  • Background image: Add a background image, if desired.
  • Background brightness: Adjust the brightness of the background.
  • Font size: Set the size of the text.
  • Font family: Choose the font style.
  • Type shortcuts: Customize shortcuts for different question types.
  • Icon rating: Choose an icon for rating or ranking purposes.

3.4. Customize the Question’s Logics:

Updating…

4. Preview the form:

Before finalizing your form, it’s a good practice to preview it to ensure it appears as intended. Look for a “Preview Form” button on the website, usually located near the top right the form-building interface. Click on this button to see a preview of your form. This will allow you to view how your form will appear to users who fill it out.

5. Export the Form:

To export the form to xlsx file, look for the download button next to the Preview Form button. Click on this button to see the xlsx file, formSetting.csv, tfConfig.csv.

6. Demo:

Updating…

7. The features need to be developed

1 Like