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.
Prerequisites
- 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
Add Input Elements to Your Page
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.
Add a Submit Button and Create the Submission Workflow
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.
Add Input Validation Before Submission
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.
Reset the Form After Successful Submission
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.
Display Submitted Data in a Repeating Group
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 working example
1PAGE: submit-form23CUSTOM STATES:4- page: form_submitted (yes/no, default: no)56ELEMENTS:7- Group FormContainer (Column layout, max-width 600px)8 - Text "First Name *"9 - Input FirstName (text, placeholder: "Enter first name")10 - Text "Email *"11 - Input Email (email format, placeholder: "Enter email")12 - Text "Category"13 - Dropdown Category (choices: Option Set or static list)14 - Text "Description"15 - Multiline Description (placeholder: "Describe your request...")16 - Text "Date"17 - DatePicker EventDate (date only)18 - Text "Agree to terms *"19 - Checkbox AgreeTerms20 - Text ErrorMessage (red, hidden by default)21 Visible when: form_submitted is yes AND any required input is empty22 Content: "Please fill in all required fields"23 - Button "Submit"2425- Group SuccessMessage (green, hidden by default)26 - Text: "Form submitted successfully!"2728- RepeatingGroup Submissions29 - Type: Lead (or your data type)30 - Source: Search for Leads (sorted by Created Date desc)31 - Cell: first_name | email | category | date | status3233CONDITIONAL FORMATTING:34- Input FirstName: border red when form_submitted is yes AND value is empty35- Input Email: border red when form_submitted is yes AND value is empty3637WORKFLOWS:381. When Submit is clicked39 → Set state: form_submitted = yes40 → Only when validations pass (all required fields filled):41 Create a new Lead:42 first_name = Input FirstName's value43 email = Input Email's value44 category = Dropdown Category's value45 description = Multiline Description's value46 event_date = DatePicker EventDate's value47 created_by = Current User48 → Reset inputs49 → Set state: form_submitted = no50 → Show Group SuccessMessage51 → Pause (2 seconds)52 → Hide Group SuccessMessageCommon mistakes when building data input forms in Bubble
Why it's a problem: Not resetting inputs after form submission
How to avoid: Add the 'Reset inputs' action after the 'Create a new thing' action in your workflow.
Why it's a problem: Forgetting to add Privacy Rules on submitted data
How to avoid: Set Privacy Rules on the Data Type so only the creator and admins can view records.
Why it's a problem: Using an Input element for long text fields
How to avoid: 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.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building a contact form in Bubble.io with fields for first name, email, category (dropdown), description (multiline), and event date. How do I set up the form layout, validation, submit workflow, and success message? I need required field validation and input reset after submission.
Build a data input form with first name, email, category dropdown, description, and date picker. Add validation for required fields with red border highlighting. Create a submit workflow that saves to a Lead data type, resets inputs, and shows a success message.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation