Introduction to Form Builder - The Fields and What They Do

Introduction to Form Builder - The Fields and What They Do

In this module, you will learn how to create and manage forms using a form builder tool. You’ll be well-equipped to create forms that are both functional and user-friendly, ensuring a smooth data collection process. We will dive into the various field types that are available, including text, dropdowns, checkboxes, and more, and discuss when to use each one.

Basic Fields

 The Text Field

This field in a form builder is one of the most commonly used field types. It allows users to input short, single-line responses, such as names, email addresses, or phone numbers. This field is versatile and ideal for capturing concise data.
Key Features:
  • Single Line Input: Perfect for brief responses.
  • Customizable: You can set placeholder text to guide users on what to enter, and define character limits to control the length of the input.
  • Validation: You can apply simple validations, such as ensuring the input is a valid email address or a phone number.
  • Accessibility: Text fields are easy for users to interact with, making them a popular choice for many types of forms.

Text fields are straightforward but highly effective for gathering essential, short-form information from users.

 The Number Field

In form builder this is designed to capture numeric values from users. It ensures that only numbers are entered, making it ideal for collecting data like age, quantities, prices, or any other type of numeric information.

Key Features:
  • Numeric Input Only: It restricts users to entering only numbers, preventing text or special characters.
  • Range Limits: You can set minimum and maximum values to ensure the input falls within a specified range (e.g., ages between 18 and 100).
  • Increment/Step Function: You can set the field to accept a specific step value, like only allowing increments of 5 for quantities.
  • Validation: Ensures that users enter valid numeric values, reducing the chances of errors.

The number field is essential for any form that requires precise numeric input and helps maintain data accuracy.

 The Dropdown Field

This field allows users to select a single option from a pre-defined list of choices. This field is ideal when you want to limit the user's selection to specific options, ensuring consistency and simplifying data entry.

Key Features:
  • Predefined Choices: You can create a list of options for users to choose from, such as a list of countries, product types, or yes/no responses.
  • Compact Design: The dropdown condenses the choices into a small, scrollable menu, saving space on the form.
  • Customizable Options: You can add, remove, or reorder the options to fit your needs.
  • Default Option: You can set a default choice to be pre-selected, guiding users toward a specific selection.

The dropdown field is especially useful for standardizing responses, making forms more organized and efficient for users to complete.

 The Toggle Field

The Toggle Field in the 3PM Form Builder is a simple, interactive option that allows users to switch between two choices, typically "Yes" or "No" or "On" and "Off". It’s often represented as a slider or switch, making it an intuitive way to gather binary responses.

Key Features:
  • Binary Choices: Ideal for yes/no, true/false, or on/off scenarios.
  • User-Friendly: The toggle switch is easy to interact with, providing a clear, visual way to make selections.
  • Customizable Labels: You can customize the labels for both states (e.g., “Active” and “Inactive” or “Enabled” and “Disabled”).
  • Compact Design: The toggle field takes up minimal space, making it perfect for forms with limited room.

The toggle field is great for collecting simple, binary data while keeping the form clean and easy to use.

 The Checkbox Field

The Checkbox Field
in the 3PM Form Builder allows users to select one or more options from a list of predefined choices. It’s commonly used when you want to give users the ability to choose multiple answers or indicate preferences.

Key Features:
  • Multiple Selections: Users can select more than one option, making it perfect for questions like “Select your interests” or “Choose all that apply.”
  • Customizable Options: You can create a list of checkable items, which can be easily adjusted based on your needs.
  • Labels: Each checkbox can have a unique label to clarify the options available.
  • Required/Optional: You can set whether users are required to select at least one option or if the field is optional.

The checkbox field is a versatile and user-friendly way to gather multiple responses in a single form, helping to streamline the data collection process.

 The Textarea Field

The Textarea Field in the 3PM Form Builder is designed to capture longer, multi-line text responses from users. This field is ideal for collecting more detailed information, such as comments, feedback, or descriptions, where a single line of input isn't enough.

Key Features:
  • Multi-line Input: Allows users to enter longer text, providing more space for responses.
  • Customizable Size: You can adjust the width and height of the text area to suit your form’s layout and expected input length.
  • Placeholder Text: You can set a placeholder to guide users on what kind of information to provide (e.g., "Enter your feedback here").
  • Character Limit: Optionally, you can set a maximum character limit to control the length of responses.

The textarea field is perfect for situations where detailed or explanatory answers are needed, giving users the flexibility to express themselves more fully.

 The Radio Button Field

The Radio Button Field
in the 3PM Form Builder allows users to select one option from a list of predefined choices. It’s ideal for questions where only one response is allowed, such as "Select your gender" or "Choose your preferred contact method."

Key Features:
  • Single Selection: Only one option can be selected at a time, making it perfect for mutually exclusive choices.
  • Customizable Options: You can easily define the list of choices that users can pick from.
  • Clear and Simple: The circular design makes it intuitive for users to choose their preferred option.
  • Labels: Each radio button can be clearly labeled to describe the options.

The radio button field ensures that users select one, and only one, response, making it a reliable choice for questions with fixed options.

 The Signature Pad Field

The Signature Pad Field in the 3PM Form Builder allows users to create a handwritten signature directly on the form using a mouse, touchscreen, or stylus. It’s ideal for situations where a personal, digital signature is required, such as contracts, consent forms, or agreements.

Key Features:
  • Handwritten Signature: Users can draw their signature, providing a more personal touch.
  • Responsive: Works across all devices, including desktops, tablets, and smartphones.
  • Customizable: You can choose whether the signature is required or optional before submission.
  • Clear & Accurate: Captures the signature as an image, ensuring it’s clear and authentic.

The Signature Pad Field is a practical solution for capturing legally binding signatures digitally, making it simple and convenient for users to sign forms online.

 The Sketch Pad Field

The Sketch Pad Field in the 3PM Form Builder allows users to draw or sketch freehand directly on the form. This field is ideal for collecting custom drawings, diagrams, or signatures, offering a creative and flexible way to capture information.

Key Features:
  • Freehand Drawing: Users can draw anything using a mouse, touchscreen, or stylus, making it ideal for sketches or notes.
  • Customizable Size: You can adjust the width and height of the drawing area to suit your form's needs.
  • Clear Representation: The drawing is captured in real-time as an image, making it easy to save and review.
  • Interactive: Ideal for gathering visual input such as designs, signatures, or sketches.

The Sketch Pad Field is perfect for forms that require users to submit visual data or personal illustrations, adding an interactive and versatile element to your forms.

 The Date - Time Field

The Date-Time Field in the 3PM Form Builder allows users to select both a date and time from a calendar interface, making it ideal for gathering specific scheduling or event-related information, such as appointments or deadlines.

Key Features:
  • Date Selection: Users can pick a date from a calendar dropdown, ensuring accurate input.
  • Time Selection: Users can select a specific time, with options for 12-hour or 24-hour formats, depending on your settings.
  • Customizable Formats: You can adjust the format for how the date and time are displayed or entered (e.g., MM/DD/YYYY or DD/MM/YYYY).
  • Validation: You can set rules to ensure the selected date and time are within valid ranges or a specific timeframe.

The Date-Time Field is essential for forms that require precise scheduling or time-based responses, offering a seamless way to capture both dates and times accurately.

 The Multi Select Field

The Multi-Select Field in the 3PM Form Builder allows users to select multiple options from a list of predefined choices, making it perfect for questions where more than one answer is applicable, such as selecting multiple interests, skills, or items from a list.

Key Features:
  • Multiple Selections: Users can choose more than one option, giving them flexibility in their responses.
  • Scrollable List: The options are presented in a dropdown or scrollable list, making it easy for users to navigate through the choices.
  • Customizable Options: You can define and organize the options based on your specific needs.
  • Required or Optional: You can set the field to require a certain number of selections or allow users to leave it blank.

The Multi-Select Field is ideal for capturing diverse responses and providing users with the ability to choose several relevant options from a list.

 The Address Field

The Address Field in the 3PM Form Builder is designed to capture full address details from users, including street address, city, state, zip code, and country. This field streamlines the process of collecting location-based information in a structured format.

Key Features:
  • Multiple Subfields: Divides the address into specific components (e.g., street, city, state, postal code, and country) for accurate data collection.
  • Customizable: You can configure which address components are required or optional based on your needs.
  • Auto-Formatting: Helps users input data in the correct format, ensuring consistency across all form submissions.
  • Validation: Ensures proper formatting for fields like zip codes or postal codes to improve data accuracy.

The Address Field is ideal for forms where location information is needed, ensuring users provide complete and structured address details with ease.

The Link Field in the 3PM Form Builder allows users to input and submit a URL (web address) directly on the form. This field is ideal for capturing website links, social media profiles, or any other type of online resource.

Key Features:
  • URL Input: Users can enter a valid web address, ensuring links are captured accurately.
  • Validation: It checks if the entered link is in the correct URL format (e.g., https://example.com) to prevent errors.
  • Customizable Label: You can customize the label to indicate the type of link you're requesting, such as "Enter your website URL" or "Provide a social media link."
  • Click-to-Open: The entered link can be clicked directly to open the website in a new tab or window.

The Link Field is a straightforward and effective way to collect web addresses or URLs, helping users provide easy access to external online resources.


Advanced Fields

 The Lookup Field

The Lookup Field in the 3PM Form Builder allows users to select data from an external source or pre-defined dataset, streamlining data entry by offering predefined choices based on a database or another form. This field is ideal when you want users to choose from a list of records or items, ensuring consistency and reducing errors.

Key Features:
  • Predefined Data: Users can select from a list of available options pulled from an external source, like a database, or another form field.
  • Dynamic Search: Often includes a search or filter function to help users quickly find and select the desired option.
  • Customizable: You can define which dataset or source the field pulls from, and what information is displayed in the lookup options.
  • Validation: Ensures the selected option is valid, preventing incorrect or incomplete data entries.

The Lookup Field is perfect for situations where you want to provide users with a quick, accurate way to select existing data without having to manually input it themselves.

 The HTML Label Field

The HTML Field in the 3PM Form Builder allows you to add custom HTML content to your form. This field is ideal for embedding images, videos, custom styling, or text elements that enhance the visual appeal and functionality of your form.

Key Features:
  • Custom Content: You can insert any HTML code, such as text, links, images, or multimedia, to provide extra context or instructions within the form.
  • Flexible Formatting: Customize the look and feel of your form with embedded styles, allowing for a more personalized user experience.
  • Embed Media: Easily include videos or other media to guide or inform users as they fill out the form.
  • Interactive Elements: You can embed forms, buttons, or other interactive components if needed.

The HTML Field is perfect for adding rich content or advanced elements to your form, making it more engaging and informative for users.

 The Image Field

The Image Field in the 3PM Form Builder allows you to display images within your form, providing a visual element to enhance user experience. This field is ideal for adding logos, instructional images, or other visual aids to guide users or make the form more engaging.

Key Features:
  • Image Display: Easily upload and display images, such as logos, banners, or any relevant visuals.
  • Customizable Size: You can adjust the size and alignment of the image to fit your form’s design.
  • Visual Enhancement: Great for adding context or making your form more visually appealing.
  • No User Input: Unlike other fields, the Image Field is purely for display and does not require user interaction.

The Image Field is perfect for visually enhancing your form and providing helpful visual cues or branding elements.

 The File Upload Field

The File Upload Field in the 3PM Form Builder allows users to attach and submit files as part of their form response. This field is ideal for collecting documents, images, videos, or any other file type required for your form.

Key Features:
  • Multiple File Types: You can specify which file formats are accepted, such as PDFs, images (JPEG, PNG), Word documents, etc.
  • Multiple Files: Users can upload more than one file at a time, depending on your settings.
  • File Size Limits: You can set restrictions on the maximum file size to ensure uploads are manageable.
  • Easy Submission: Users can easily drag and drop files or browse their device to select the files they wish to upload.

The File Upload Field is perfect for forms that require supporting documentation or media files, offering a simple and secure way for users to submit various types of files.

 The Formula Field

The Formula Field in the 3PM Form Builder allows you to perform calculations or display dynamic values based on other fields in the form. This field is useful for automatically calculating totals, averages, or any other values that depend on user input.

Key Features:
  • Dynamic Calculations: You can use mathematical operations (addition, subtraction, multiplication, division) to calculate values based on other form fields.
  • Conditional Logic: It can display different results based on conditions, allowing for customized outputs.
  • Real-Time Updates: The formula updates instantly as users fill out the form, providing immediate feedback or results.
  • No User Input: This field is for display purposes only, showing calculated results rather than requiring direct user input.

The Formula Field is perfect for scenarios like calculating totals, applying discounts, or automatically generating values based on user responses, making your form more interactive and efficient.

 The Statistics Field

The Statistics Field in the 3PM Form Builder is used to display real-time data or statistics based on the responses submitted through the form. It helps visualize aggregate data, such as averages, totals, or percentages, based on user input.

Key Features:
  • Real-Time Data: It dynamically updates and shows statistical information, such as total responses or average values, as the form is filled out.
  • Customizable Calculations: You can set up the field to calculate specific statistics like sum, average, or percentage, based on the data collected in other form fields.
  • Visual Presentation: Presents the calculated statistics in an easy-to-read format, making it ideal for showing trends or summary information.
  • No User Input: This field does not require direct user input but is used for displaying calculated data.

The Statistics Field is perfect for forms that need to display aggregated results or trends, providing both the form creator and respondents with insights based on collected data.

 The Code Field

The Code Field in the 3PM Form Builder allows you to add custom code snippets (such as JavaScript, CSS, or HTML) to your form. This field is ideal for advanced customizations or embedding functionality that goes beyond the standard form builder options.

Key Features:
  • Custom Code: You can insert JavaScript for additional interactivity or CSS for custom styling directly into the form.
  • Flexible Functionality: Ideal for implementing features like custom validations, animations, or other interactive elements that enhance the user experience.
  • Advanced Customization: The Code Field allows you to go beyond the built-in tools of the form builder, enabling you to tailor the form to your exact needs.

The Code Field is perfect for developers who want to add custom scripts or styles to their forms, giving them full control over the form’s behavior and appearance.


Layouts

 The Section Field

The Section Field in the 3PM Form Builder allows you to organize your form into distinct, visually separated sections. This field is useful for grouping related questions or fields together, making your form easier to navigate and more user-friendly.

Key Features:
  • Organized Layout: Helps divide the form into logical sections, improving its structure and flow.
  • Customizable Titles: You can add a title or description to each section, guiding users through different parts of the form.
  • Visual Breaks: Provides a clean, organized layout by breaking the form into manageable sections, especially in longer forms.
  • Conditional Display: Sections can be shown or hidden based on user input, allowing for dynamic form designs.

The Section Field is ideal for structuring complex forms, improving user experience by making it easier to follow and complete.

 The List Field

The List Field in the 3PM Form Builder allows you to create a dynamic list where users can add multiple entries or items. This field is useful for situations where users need to submit multiple values, such as entering a list of items, names, or tasks.

Key Features:
  • Multiple Entries: Users can add multiple items or entries to the list, and you can set a maximum number of items if needed.
  • Customizable: You can define the field label and set specific instructions for what users should add to the list.
  • Flexible Input: The list can be filled in with text, numbers, or other appropriate data types depending on your needs.
  • Easy to Use: Users can easily add, edit, or remove entries from the list, providing flexibility in the data collection process.

The List Field is perfect for gathering multiple responses in a single field, helping streamline data collection when users need to submit several related items or inputs.







    • Related Articles

    • Introduction to Form Builder - Navigation

      Getting Started with the 3PM Form Builder Accessing the Form Builder: Step-by-Step Access Instructions: Step 1: Log into the 3PM platform using your credentials (username/password). Step 2: From the navigation menu on the left side, click on "Forms". ...
    • Introduction to Form Builder - Start Building a Form

      In this article, we'll explore the various fields available in 3PM's form builder, examining their functionalities, customization options, and how they can streamline data collection for your specific needs. Creating a new form To get started ...
    • Creating a form with fields and viewing the responses

      In this module, you will learn how to create a form with fields, see how the mobile users will use the form and how to review the responses. Watch this video to see how it's done! Create the form 1. Navigate to Forms from the left navigation menu. 2. ...
    • Filling a form on the mobile app

      In this module, you will learn how to create a form with fields, see how the mobile users will use the form and how to review the responses. Watch this video to see how it's done! Accessing the form on a mobile device 1. Launch the 3PM app 2. Select ...
    • How to Integrate Xero with 3PM construction Portal

      Integrating Xero with 3PM Construction Introduction This article provides a step-by-step guide on how to integrate Xero with 3PM Construction. Follow these instructions to connect your Xero account and sync financial data seamlessly. Data Flow Here ...