Form Builder

Learn how to create and manage forms using the Wayvo Form Builder.

Form Builder

The Wayvo Form Builder allows you to create and manage forms easily using a drag-and-drop interface. Forms are essential for collecting user input and interacting with your application’s data.

Creating a New Form

1. Access the Form Builder

   • Navigate to the "Forms" section from the main menu.

2. Start a New Form

   • Click on "Create New Form" to start building your form from scratch or choose a template from the library.

Adding Form Components

1. Open the Component Library

   • The component library will display various form elements such as text fields, checkboxes, radio buttons, dropdowns, and more.

2. Drag and Drop Components

   • Drag the desired form elements from the component library onto the form canvas.
   • Arrange the components to create a logical and user-friendly layout.

Configuring Form Components

1. Select a Component

   • Click on a form component to open the properties panel.

2. Set Properties

   • Configure properties such as label, placeholder text, default values, validation rules, and more.
   • Use the properties panel to customize each component to meet your requirements.

3. Data Binding

   • Bind form components to data sources to automatically populate fields or submit data to your backend.
   • Use the data binding options in the properties panel to set up these connections.

Adding Validation

1. Select the Component

   • Click on the form component that requires validation.

2. Set Validation Rules

   • In the properties panel, navigate to the validation section.
   • Define validation rules such as required fields, input formats, minimum and maximum values, and custom validation messages.

Organizing the Form

1. Group Components

   • Group related components together using section dividers or grouping functionality to keep the form organized.

2. Add Instructions or Descriptions

   • Provide instructions or descriptions for each section or individual fields to guide users through the form.

Previewing and Testing the Form

1. Preview Mode

   • Switch to preview mode to see how the form looks and behaves.
   • Test the form to ensure all components are functioning correctly and validation rules are applied.

2. User Testing

   • Have end-users test the form to gather feedback and identify any issues.
   • Make adjustments based on the feedback to improve the form’s usability.

Submitting the Form

1. Form Submission

   • Configure the form’s submission settings to specify where the data should be sent.
   • Choose from options such as API endpoints, email notifications, or saving data to a database.

2. Confirmation and Notifications

   • Set up confirmation messages or notifications to inform users that their submission was successful.
   • Customize these messages in the form’s settings.

Best Practices for Building Forms

1. Keep It Simple

   • Only include necessary fields to avoid overwhelming users.
   • Use clear and concise labels and instructions.

2. Ensure Accessibility

   • Ensure the form is accessible to all users by following accessibility best practices.
   • Use appropriate ARIA labels and roles.

3. Validate Inputs

   • Always validate user inputs to prevent incorrect or malicious data from being submitted.
   • Provide clear validation messages to guide users in correcting their inputs.

Next Steps

With your forms created, you can integrate them into your applications and start collecting data. Explore our guides on Data Management and Workflow Automation to enhance your application's functionality.

For more advanced customization options, check out our Advanced Features section.