2. Webform Creation

User Manual: Creating Web Forms in a Low Code Platform

Introduction

This user manual provides step-by-step instructions on how to create web forms using a low-code platform. The guide covers how to design web forms that accept input, perform input validation, submit data, and either visualize the results or trigger a workflow.

Table of Contents

  1. Getting Started with the Web Form Designer
  2. Creating a New Web Form
  3. Adding Input Fields
  4. Validating Input Data
  5. Submitting Data
  6. Visualizing Results
  7. Triggering Workflows
  8. Testing and Publishing the Web Form
  9. Best Practices
  10. Conclusion

1. Getting Started with the Web Form Designer

The Web Form Designer in a low-code platform allows you to build interactive web forms with minimal coding. This section will walk you through the basics of navigating the platform.

Accessing the Web Form Designer

  1. Log in to the Low Code Platform:
  2. Use your credentials to log in to the platform.
  3. Navigate to the Web Form Designer:
  4. From the main dashboard, select "Forms" or "Web Forms" to access the designer interface.

Understanding the Interface

  • Toolbox: Contains various input elements like text fields, dropdowns, buttons, and more.
  • Canvas: The area where you design your form by dragging and dropping elements.
  • Properties Panel: Used to configure settings for selected elements.
  • Data Sources: Manage connections to databases or APIs for data binding.

2. Creating a New Web Form

Step 1: Start a New Form

  1. Create New Form:
  2. Click on the "New Form" button to start designing a new web form.
  3. Set Up Form Details:
  4. Name your form and optionally provide a description.
  5. Select the layout (e.g., single-column, multi-column) and theme.

Step 2: Configure Form Settings

  1. General Settings:
  2. Define form properties such as width, height, and alignment.
  3. Data Binding:
  4. Connect the form to a data source if required (e.g., database, external API).

3. Adding Input Fields

Step 1: Drag and Drop Input Elements

  1. Select Input Fields:

  2. From the toolbox, drag and drop various input fields onto the canvas (e.g., text boxes, dropdowns, checkboxes).

  3. Position and Align Elements:

  4. Arrange the input fields on the canvas according to your form design. Use alignment tools for precise placement.

Step 2: Configure Input Fields

  1. Labeling Fields:
  2. Provide descriptive labels for each input field to guide users.
  3. Placeholder Text:
  4. Add placeholder text to help users understand the expected input format.
  5. Default Values:
  6. Optionally, set default values for fields where applicable.

4. Validating Input Data

Step 1: Apply Basic Validation

  1. Set Required Fields:

  2. In the properties panel, mark essential fields as "Required" to ensure they are not left blank.

  3. Data Type Validation:

  4. Specify the expected data type for each input (e.g., number, email, date) to prevent incorrect entries.

Step 2: Implement Advanced Validation

  1. Regex Validation:

  2. Use regular expressions to enforce complex input patterns (e.g., phone numbers, email formats).

  3. Conditional Validation:

  4. Set up validation rules that depend on other field values (e.g., show a state field only if the country is USA).

  5. Custom Validation Logic:

  6. Write custom validation scripts if the platform supports scripting (e.g., JavaScript) for more complex validation rules.

Step 3: Customize Validation Messages

  1. Error Messages:

  2. Write clear and user-friendly error messages for each validation rule.

  3. Inline Validation:

  4. Configure the form to provide real-time feedback as users fill out each field.

5. Submitting Data

Step 1: Configure the Submit Button

  1. Add Submit Button:

  2. Drag and drop a "Submit" button to the bottom of the form.

  3. Configure Submit Action:

  4. In the properties panel, set the action for the submit button (e.g., send data to a server, save to a database).

  5. Redirect or Show Message:

  6. Choose whether to redirect users to another page after submission or display a confirmation message.

Step 2: Handle Data Submission

  1. Connect to Data Source:

  2. Map the form fields to the corresponding fields in your data source (e.g., database, API).

  3. Submission Workflow:

  4. Optionally, trigger a workflow on form submission (e.g., send an email, start a process).

6. Visualizing Results

Step 1: Add a Visualization Component

  1. Select Visualization Tool:

  2. Choose a visualization component from the toolbox (e.g., charts, graphs, tables).

  3. Bind Data to Visualization:

  4. Connect the visualization component to the data source to display submitted data dynamically.

Step 2: Configure Visualization Settings

  1. Customize Appearance:

  2. Adjust the visual settings such as colors, labels, and layout to match your form design.

  3. Filter and Sort Data:

  4. Set up filtering and sorting options for the data displayed in the visualization.

7. Triggering Workflows

Step 1: Define Workflow Triggers

  1. Select Workflow Trigger:

  2. In the form properties, choose a trigger action that will start a workflow (e.g., form submission, specific field value).

  3. Configure Workflow Action:

  4. Define the steps the workflow should take (e.g., send an approval request, create a task).

Step 2: Map Form Data to Workflow

  1. Data Mapping:

  2. Ensure that form data is correctly mapped to workflow variables or actions.

  3. Set Workflow Conditions:

  4. Optionally, create conditional logic within the workflow based on form inputs.

8. Testing and Publishing the Web Form

Step 1: Test the Form

  1. Preview Mode:

  2. Use the preview mode to test the form as a user would see it.

  3. Validation Testing:

  4. Enter valid and invalid data to ensure that all validation rules work correctly.

  5. Submission Testing:

  6. Test the data submission process to verify that data is stored correctly and any triggered workflows execute as expected.

Step 2: Publish the Form

  1. Set Publishing Options:

  2. Choose where and how the form will be published (e.g., embedded in a webpage, shared via a link).

  3. Deploy the Form:

  4. Publish the form and make it live for users.

9. Best Practices

  • User-Friendly Design: Keep the form layout simple and intuitive to enhance user experience.
  • Mobile Responsiveness: Ensure the form is responsive and works well on different screen sizes.
  • Security Measures: Implement security best practices, such as data encryption and CAPTCHA, to protect user data.
  • Regular Testing: Continuously test the form to catch any bugs or issues, especially after updates.

10. Conclusion

Creating a web form using a low-code platform is a straightforward process that empowers you to build functional, interactive forms with minimal coding. By following the steps outlined in this manual, you can design forms that not only capture and validate user input but also integrate with workflows and visualize data effectively. Summary for webform creation The platform simplifies the process of creating webforms through a user-friendly interface that supports drag-and-drop functionality. Key capabilities include: - Form Layout Designer: Arrange form elements (e.g., text boxes, dropdowns, radio buttons) using drag-and-drop. - Pre-built Templates: Access a library of pre-designed form templates for common use cases. - Custom Styling: Apply CSS and themes to tailor the appearance of forms. - Dynamic Fields: Create fields that change based on user input or other conditions. - Validation Rules: Set up validation rules to ensure correct data entry (e.g., mandatory fields, data format checks). - Multi-step Forms: Break down forms into multiple steps for better user experience. - Reusability: Save and reuse forms across different applications or modules.