Dashboard

Form Builder Elements

FluidForms offers a wide variety of field elements to build powerful and versatile forms. This guide details each element and its common configuration options.

Basic Elements

Single Line Text

  • Description: Used for short text inputs like names, titles, subjects, etc.

  • Configuration: Label, Placeholder Text, Required Field (Yes/No), Maximum character limit (if applicable).

  • Placeholder for Single Line Text example image

Paragraph Text

  • Description: For longer text inputs like comments, messages, or detailed descriptions.

  • Configuration: Label, Placeholder Text, Required Field (Yes/No), Maximum character or word limit (if applicable).

  • Placeholder for Paragraph Text example image

Email

  • Description: Specifically designed for collecting email addresses. Often includes built-in validation to check for a valid email format.

  • Configuration: Label, Placeholder Text, Required Field (Yes/No).

  • Placeholder for Email example image

Multiple Choice (Radio Buttons)

  • Description: Allows users to select only one option from a predefined list. Each option is typically presented with a radio button.

  • Configuration: Label, Options (add, remove, edit, and reorder choices), Required Field (Yes/No), Layout (e.g., vertical, horizontal, inline - if available).

  • Placeholder for Multiple Choice example image

Checkboxes

  • Description: Allows users to select one or more options from a predefined list. Each option is presented with a checkbox.

  • Configuration: Label, Options (add, remove, edit, and reorder choices), Required Field (Yes/No), Minimum/Maximum number of selections allowed (if applicable).

  • Placeholder for Checkboxes example image

Dropdown

  • Description: Presents a list of options in a compact dropdown menu. Users can select one option from this list.

  • Configuration: Label, Options (add, remove, edit, and reorder choices), Required Field (Yes/No), Default selected option (if applicable).

  • Placeholder for Dropdown example image

Advanced & Specialized Elements

Number

  • Description: For collecting numeric input, such as age, quantity, or scores.

  • Configuration: Label, Placeholder Text, Required Field (Yes/No), Minimum and/or Maximum value, Allow decimal places (Yes/No), Step increment (if applicable).

  • Placeholder for Number example image

Date

  • Description: Allows users to pick a specific date from a calendar-style picker.

  • Configuration: Label, Required Field (Yes/No), Date format (e.g., MM/DD/YYYY, DD/MM/YYYY), Default date (e.g., today's date), Date range restrictions (min/max selectable dates).

  • Placeholder for Date example image

Time

  • Description: Allows users to select a specific time, often using a time picker interface.

  • Configuration: Label, Required Field (Yes/No), Time format (e.g., 12-hour with AM/PM, 24-hour), Minute step (e.g., 15-minute intervals).

  • Placeholder for Time example image

File Upload

  • Description: Allows users to upload files (e.g., documents, images, videos) through the form. (Note: This may be a Pro/Premium feature as suggested by troubleshooting.md and features.tsx.)

  • Configuration: Label, Required Field (Yes/No), Allowed file types (e.g., .jpg, .png, .pdf, .docx), Maximum file size limit (e.g., 5MB, 10MB), Maximum number of files allowed per field.

  • Placeholder for File Upload example image

Rating

  • Description: Allows users to provide a rating, typically using a series of icons like stars or hearts.

  • Configuration: Label, Required Field (Yes/No), Number of icons (e.g., 5 stars, 10 stars), Icon type (e.g., star, heart, thumbs up - if customizable), Custom labels for rating values (e.g., "Poor" to "Excellent").

  • Placeholder for Rating example image

Payment Field

  • Description: Used to collect payments or donations directly within the form. Requires integration with a payment gateway (e.g., Stripe, PayPal). (Note: This is often a Pro/Premium feature.)

  • Configuration: Label, Item Name/Description, Amount (can be fixed, user-defined, or selected from options), Currency, Link to payment gateway setup and management.

  • Placeholder for Payment Field example image

Section Break / Header

  • Description: A non-input element used to visually organize the form into logical sections. It can include a title and descriptive text to guide the user.

  • Configuration: Main Heading Text, Sub-heading or Descriptive Text, Visual styling options (if available).

  • Placeholder for Section Break example image

Hidden Field

  • Description: A field that is not visible to the end-user filling out the form. It's used to store and submit data that you don't want the user to see or edit, such as tracking codes, pre-filled information from URL parameters, or user IDs.

  • Configuration: Field Name/ID (for internal reference), Default Value (can be static text or dynamically populated via URL parameters or other logic).

  • Placeholder for Hidden Field example image

This list covers many common form elements available in FluidForms. The specific options and availability might vary, so always refer to the form builder interface for the most up-to-date elements and their configurations.

PreviousEmbedding Your FormsNextConfiguring Your Form Settings

Was this helpful?