How to build a contact form in Bubble

A basic contact form in Bubble is built by placing input fields on a page (like Name, Email, Message), then creating a workflow on the Submit button that either saves the data to the database, sends an email, or both. The key is: inputs collect data, workflows process it, and the database or email actions store or send it.

Core Steps to Build a Contact Form

In Bubble, a contact form is simply a group of Input elements plus a Button with a workflow. Inputs don’t store anything by themselves — they only hold temporary values until you use them in a workflow. The workflow handles saving the message to your database and/or sending an email.

• Add three elements on your page: Input Name, Input Email, and a Multiline Input for Message.
• Place a Button labeled Submit.
• Create a database type called Contact Message with fields: Name (text), Email (text), Message (text).
• Click the Submit button and create a When Button is clicked workflow.
• Add action: Data → Create a new thing and choose Contact Message. Map each field to the corresponding input's value.
• If you want an email: add action Email → Send email and use the same input values.
• Optionally: add action Element Actions → Reset relevant inputs to clear form after submission.

Example of a Send Email Action

This is how the email body can look inside the Send email action (Bubble uses plain text or dynamic data, not code):

Name: [Input Name's value]
Email: [Input Email's value]
Message:
[MultilineInput Message's value]

Important Notes

• Privacy: If you store messages, set Privacy Rules so only admin roles can see Contact Message entries.
• Validation: Use Conditions on the Submit button (e.g., disable when Input Email isn’t valid).
• Feedback: Show a success message using a popup or a custom state.