A contact form in Bubble consists of Input elements for name, email, and message, connected to a workflow that validates the inputs, stores the submission in a database, and sends an email notification to your team. This tutorial covers building the form layout, adding validation rules, creating the submission workflow with email integration, and displaying a success confirmation to the user.
Overview: Contact Forms in Bubble
This tutorial walks you through creating a professional contact form that collects user information, validates it, saves it to your database, and notifies your team by email. This is one of the most essential features for any business app.
Prerequisites
- A Bubble app on any plan
- Basic understanding of Bubble's Design and Workflow tabs
- An email service configured (Bubble's built-in or SendGrid/Mailgun)
- A page where you want to place the contact form
Step-by-step guide
Create the form layout
Create the form layout
In the Design tab, add a Group set to Column layout for your form container. Inside it, add: a Text element as the form title 'Contact Us', an Input element for name (type: text, placeholder 'Your Name'), an Input element for email (type: email, placeholder 'Your Email'), a Multiline Input element for the message (placeholder 'Your Message', set height to 150px), and a Button labeled 'Send Message'. Style the container with padding, a subtle border, and max-width of 500px centered on the page.
Expected result: A clean contact form with name, email, message fields, and a submit button.
Add input validation
Add input validation
Set the email Input's content format to 'Email' — Bubble will automatically validate email format. For the name field, add a conditional on the Submit button: This button is not clickable when Input Name's value is empty or Input Email's value is empty or Multiline Input Message's value is empty. Add visual validation feedback: on each Input, add a conditional 'When this input is not valid → border color is red'. Add a Text element below each input for error messages, visible only when the input has been modified and is empty.
Expected result: The form validates inputs before submission, showing red borders on invalid fields and disabling the submit button.
Create the submission Data Type and workflow
Create the submission Data Type and workflow
Go to the Data tab and create a 'ContactSubmission' Data Type with fields: name (text), email (text), message (text), submitted_at (date), and is_read (yes/no, default no). In the Workflow tab, create: When Button Send Message is clicked. Add actions: Create a new ContactSubmission with the input values. Then Send Email (to your team email) with subject 'New Contact Form Submission from [name]' and body including the name, email, and message. Reset the form inputs. Show a success message.
Expected result: Submitting the form saves the data, sends an email, and resets the form.
Display success and error feedback
Display success and error feedback
Add a success Group below the form that is not visible on page load. After the Create a new thing action in your workflow, add Show element → success Group. The success Group contains a green checkmark icon and text like 'Thank you! We received your message and will reply within 24 hours.' For error handling, add an 'An unhandled error occurs' workflow event that shows an error message Group with text like 'Something went wrong. Please try again.' Also add a 'Send another message' link in the success state that hides the success Group and shows the form again.
Expected result: Users see a success confirmation after submitting and can send another message if needed.
Build an admin view for submissions
Build an admin view for submissions
Create an admin page with a Repeating Group showing all ContactSubmissions sorted by submitted_at descending. Display columns for name, email, message preview, date, and read status. Add conditional formatting: unread submissions appear bold. When an admin clicks a submission, show the full message in a popup and mark it as read (Make changes to ContactSubmission → is_read = yes). Add a count of unread submissions at the top of the page.
Expected result: An admin dashboard displays all contact form submissions with read/unread status tracking.
Complete working example
1CONTACT FORM SUMMARY2=====================================34FORM ELEMENTS:5 Group (Column, max-width 500px, centered)6 Text: 'Contact Us' (heading)7 Input: Name (text, required)8 Input: Email (email format, required)9 Multiline Input: Message (required)10 Button: Send Message11 Group: Success message (hidden)12 Group: Error message (hidden)1314VALIDATION:15 Email Input: content format = Email16 Button not clickable when:17 Name is empty OR Email is empty18 OR Message is empty19 Red borders on invalid/empty inputs2021DATA MODEL:22 ContactSubmission:23 name (text)24 email (text)25 message (text)26 submitted_at (date)27 is_read (yes/no, default no)2829SUBMIT WORKFLOW:30 When Send Message clicked:31 1. Create new ContactSubmission32 2. Send Email to admin33 Subject: New Contact from [name]34 Body: name, email, message35 3. Reset relevant inputs36 4. Show success Group37 5. Hide form Group3839ADMIN VIEW:40 RG: ContactSubmissions (desc by date)41 Columns: name, email, preview, date, status42 Click → Popup with full message43 → Mark as read44 Unread count badge at topCommon mistakes when adding a Contact Form in Bubble
Why it's a problem: Not validating email format before submission
How to avoid: Set the email Input's content format to Email so Bubble validates the format automatically
Why it's a problem: Only sending an email without saving to database
How to avoid: Always save submissions to a Data Type as the primary record, with email notification as a secondary action
Why it's a problem: Not providing feedback after form submission
How to avoid: Show a clear success message after submission and hide or reset the form
Best practices
- Always save form submissions to the database, not just email
- Validate all required fields before enabling the submit button
- Show clear success/error feedback after submission
- Include a spam prevention measure like a honeypot field or CAPTCHA
- Add a character limit on the message field to prevent abuse
- Track read/unread status for admin follow-up management
- Send a confirmation email to the submitter acknowledging receipt
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need to add a contact form to my Bubble.io app that saves submissions, sends me an email notification, and shows a success message. How do I set up the form with validation?
Help me build a contact form with name, email, and message fields. I want validation, email notification to my team, database storage, and a thank-you message after submission.
Frequently asked questions
Can I add a contact form without a paid plan?
Yes. Contact forms work on all Bubble plans including Free. Bubble's built-in email sending works on free, though third-party email services may require paid plans.
How do I prevent spam submissions?
Add a honeypot field (a hidden input that bots fill but humans do not) or install a CAPTCHA plugin. Rate-limit submissions by checking if the same email submitted in the last hour.
Can I customize the notification email design?
Yes. Use HTML in the email body for formatting, or set up a proper HTML template using the email template approach described in our email template tutorial.
How do I send a confirmation email to the submitter?
Add a second Send Email action in your workflow with the To field set to the email Input's value and a body confirming receipt of their message.
Can I add file attachments to the contact form?
Yes. Add a File Upload element and include the uploaded file URL in your ContactSubmission Data Type and notification email.
Can RapidDev help build contact forms with advanced features?
Yes. RapidDev can build contact forms with file uploads, auto-routing to departments, CRM integration, and automated follow-up sequences for your Bubble application.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation