# How to build data input forms in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Bubble's visual editor lets you build data input forms by dragging Input, Dropdown, and Checkbox elements onto the page and connecting them to your Data Types through a workflow. When the user clicks Submit, the 'Create a new thing' action saves all input values to the database. You can add validation, reset inputs after submission, and show success or error messages.

## Build Data Input Forms in Bubble

This tutorial teaches you how to build forms in Bubble that collect data and save it to your database. You will learn how to lay out input elements, connect them to your Data Types, validate entries, and handle the submission workflow. Forms are the foundation of nearly every Bubble app.

## Before you start

- A Bubble account with an active app
- At least one Data Type created in the Data tab (e.g., Contact, Task, Lead)
- Basic familiarity with the Design tab and Workflow tab

## Step-by-step guide

### 1. Add Input Elements to Your Page

In the Design tab, create a Group container with Column layout to hold your form. Inside it, add the elements you need: Input elements for text and numbers (set the Content format to Text, Number, Email, etc.), a Dropdown for selection fields, a Multiline Input for longer text, a Date/Time Picker for dates, and a Checkbox for yes/no fields. Add a label Text element above each input. Name each element descriptively — for example, 'Input First Name', 'Input Email', 'Dropdown Category'.

> Pro tip: Use placeholder text in inputs to guide users (e.g., 'Enter your email address'). Set Content format to 'Email' for email inputs — Bubble will automatically validate the format.

**Expected result:** A form layout with labeled input elements for each field in your Data Type.

### 2. Add a Submit Button and Create the Submission Workflow

Add a Button element labeled 'Submit' at the bottom of the form. Go to the Workflow tab and create: 'When Button Submit is clicked'. Add the action 'Data (Things) → Create a new thing'. Set the Type to your Data Type. Map each field: first_name = Input First Name's value, email = Input Email's value, category = Dropdown Category's value, description = Multiline Description's value, date = DatePicker's value. Each field maps to the corresponding input element.

**Expected result:** Clicking Submit creates a new record in your database with all form values.

### 3. Add Input Validation Before Submission

Add validation conditions to the Submit button workflow. Click on the workflow event and add 'Only when' conditions — for example: Input First Name's value is not empty AND Input Email's value is not empty AND Input Email's value contains '@'. For visual feedback, add conditional formatting on each input: When 'This Input's value is empty AND Submit button has been clicked', change the border color to red. Add a Text element that says 'Please fill in all required fields' with conditional visibility: visible when any required input is empty after clicking Submit.

> Pro tip: Use a Custom State 'form_submitted' (yes/no) on the page. Set it to 'yes' when Submit is clicked. Use this state in validation conditionals instead of tracking the button click directly.

**Expected result:** Required fields show red borders and an error message appears if the form is submitted with missing data.

### 4. Reset the Form After Successful Submission

After the 'Create a new thing' action in your Submit workflow, add the action 'Element Actions → Reset inputs'. This clears all input elements on the page back to their default/empty state. Then add a 'Show' action on a success message Group (e.g., a green banner saying 'Form submitted successfully!'). Optionally, add a 'Hide' action on the success message with a 2-second pause before it, so the message auto-dismisses.

**Expected result:** After successful submission, all inputs clear and a success message appears briefly.

### 5. Display Submitted Data in a Repeating Group

Below or on a separate page, add a Repeating Group to show submitted entries. Set the Type of content to your Data Type and the Data source to 'Do a Search for [YourType]' sorted by Created Date descending. In each cell, add Text elements mapped to the current cell's fields. This lets users (or admins) see all form submissions in a table-like view. Add Privacy Rules to control who can see which submissions.

**Expected result:** A list of all submitted form entries displayed in a Repeating Group.

## Complete code example

File: `Workflow summary`

```text
PAGE: submit-form

CUSTOM STATES:
- page: form_submitted (yes/no, default: no)

ELEMENTS:
- Group FormContainer (Column layout, max-width 600px)
  - Text "First Name *"
  - Input FirstName (text, placeholder: "Enter first name")
  - Text "Email *"
  - Input Email (email format, placeholder: "Enter email")
  - Text "Category"
  - Dropdown Category (choices: Option Set or static list)
  - Text "Description"
  - Multiline Description (placeholder: "Describe your request...")
  - Text "Date"
  - DatePicker EventDate (date only)
  - Text "Agree to terms *"
  - Checkbox AgreeTerms
  - Text ErrorMessage (red, hidden by default)
    Visible when: form_submitted is yes AND any required input is empty
    Content: "Please fill in all required fields"
  - Button "Submit"

- Group SuccessMessage (green, hidden by default)
  - Text: "Form submitted successfully!"

- RepeatingGroup Submissions
  - Type: Lead (or your data type)
  - Source: Search for Leads (sorted by Created Date desc)
  - Cell: first_name | email | category | date | status

CONDITIONAL FORMATTING:
- Input FirstName: border red when form_submitted is yes AND value is empty
- Input Email: border red when form_submitted is yes AND value is empty

WORKFLOWS:
1. When Submit is clicked
   → Set state: form_submitted = yes
   → Only when validations pass (all required fields filled):
     Create a new Lead:
       first_name = Input FirstName's value
       email = Input Email's value
       category = Dropdown Category's value
       description = Multiline Description's value
       event_date = DatePicker EventDate's value
       created_by = Current User
     → Reset inputs
     → Set state: form_submitted = no
     → Show Group SuccessMessage
     → Pause (2 seconds)
     → Hide Group SuccessMessage
```

## Common mistakes

- **Not resetting inputs after form submission** — Users may accidentally submit the same data twice, and the form looks broken if values remain after a successful submit. Fix: Add the 'Reset inputs' action after the 'Create a new thing' action in your workflow.
- **Forgetting to add Privacy Rules on submitted data** — Without privacy rules, any user could search for and see other users' form submissions. Fix: Set Privacy Rules on the Data Type so only the creator and admins can view records.
- **Using an Input element for long text fields** — The single-line Input element truncates long text and does not allow line breaks. Fix: Use the Multiline Input element for any field that might contain more than one sentence.

## Best practices

- Use descriptive element names (Input FirstName, not Input A) for maintainability.
- Set Content format on inputs (Email, Number, Integer) to get built-in validation.
- Add placeholder text to every input as guidance for users.
- Mark required fields with an asterisk (*) in the label.
- Show validation errors inline next to the relevant field, not just at the top of the form.
- Reset the form and show a success message after submission.
- Limit the form width to 500-600px for readability on desktop screens.
- Add Privacy Rules immediately after creating the Data Type.

## Frequently asked questions

### Can I pre-fill form fields with existing data for editing?

Yes. Set the Input's 'Initial content' to the existing record's field value (e.g., Parent group's Lead's first_name). Use a 'Make changes to a thing' action instead of 'Create a new thing' for the update workflow.

### How do I create a form that uploads files?

Add a File Uploader element to your form. In the submission workflow, set the file field to 'File Uploader's value'. The file is uploaded when selected, and the URL is stored in the database.

### Can I send an email notification when a form is submitted?

Yes. After the 'Create a new thing' action, add a 'Send email' action. Set the recipient, subject, and body using values from the form inputs or the newly created record.

### How do I prevent duplicate form submissions?

Disable the Submit button in the workflow (set Not Clickable) after the first click, and re-enable it after the creation action completes. Also check for existing records with the same unique fields before creating.

### Can I build forms dynamically from a Data Type?

Bubble does not generate forms from Data Types automatically. Each input must be manually placed. For complex, dynamic form builders, professional developers like RapidDev can build custom solutions.

### How do I make a form accessible on mobile?

Use the responsive engine with Column layout and percentage-based widths. Set minimum widths on inputs and test at mobile breakpoints. Stack labels above inputs (not beside) for mobile.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/build-forms-for-data-input-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/build-forms-for-data-input-in-bubble