Finally! Send a message with the Enter key
In this Bubble tutorial, you will learn how to submit input from a text using an enter key and for it to automatically run a workflow based off that key press.
Unlock the power of chat: Learn how to submit input with just an Enter key press in Bubble!
Streamline your Bubble app: Discover the secret to running workflows automatically from text input.
Elevate user experience: Master the art of integrating OpenAI responses with custom states in your Bubble chat app.
Submitting Input with the Enter Key in Bubble
If you're building any sort of chat in your Bubble app, whether that is a ChatGPT clone, adding in an AI chatbot or even chat between the users of your app, you're going to want to watch this video where I show you how you can submit input from a text using an enter key and for it to automatically run a workflow based off that key press.
Demonstrating the Enter Key Functionality
So I'm going to ask "What is the capital of France?" This is seriously my go-to question if you've watched more of these videos and now I'm going to hit enter and I get a reply back from OpenAI very quick and I'm using a custom state to display on my page.
Exploring OpenAI Integration
Now if you want to learn any more about how you can add OpenAI into your app then I encourage you to go and check out our other tutorials. But right now I'm just focused on the fact that it was hitting enter not clicking the button and hitting enter on a multi-line input that still ran the workflow.
Setting Up the Enter Key Functionality
So let me show you how I've got that working. First of all you're going to need to install this plugin called shift enter and this is basically the secret source. This is how it comes to working and having that effect on the front end.
Adding the Enter Event Element
Once you've installed that plugin you will then need to go ahead and add in the element into the page. So the enter event element and as is often the case with elements that apply changes to the front end of your Bubble app you have to add them to the page in order for the right scripts to load in. They don't actually need to take up space on the page so you can put the element somewhere where it's going to go unnoticed and you could make it really really small.
Configuring the Plugin
But let me show you how I've got this to work and also some things that I've learned that make this plugin work even better and reduce bugs. So first of all I need to supply in the plugin in here I need to supply an ID attribute for my input and my button. So my input ID attribute is inputted down here.
Setting Up ID Attributes
If you don't see ID attribute down the bottom of elements on your Bubble app go into settings scroll all the way down to the bottom of general and you can tick a box to make ID attribute appear and I've also got an ID attribute set on my button and I've then copied and pasted them identically into here.
Creating the Workflow
I then get on my workflows initially I thought I have to have a workflow for this new event when the enter event A is clicked but I found I was getting kind of repeat submissions so this is how I found that it works best. Because I've supplied it with the button ID I only need to create my workflow for my button so here's my request to OpenAI and here I am saving it to a custom state and that's how I'm printing it on the web page.
Avoiding Duplicate Submissions
Now yeah if you add in the the element this one here A event enter event event enter then you're going to end up with duplicate so I imagine that's going to be necessary if you don't then have a button but this just means you can run it all through this workflow and you would also important this point to note I'm not referring to the multi-line A I'm referring to the enter event A's value input this is because it clears it out automatically I don't have a what I'm looking for reset relevant inputs again when I was testing this I thought I needed that and it caused it to act in a really bizarre way so I don't need that but in order for this to not appear empty I have to use the enter event A's value input and so I'm guessing that because I've added this element to the page and so it's available for me in Workflows.
Final Demonstration
So once more I'll give you a demo let me refresh it and this time we can say how long is the coastline of the UK and I hit enter and we get it back now what if I wanted to put a line break in there actually I'm going to start the video there because I've I've put together my OpenAI integration really quickly here I've not made it JSON safe which means I won't be able to use punctuation I won't be able to use line breaks because I just wanted to really quickly before I hop on the Bubble coaching session with one of our members I wanted to get this video recorded where I demonstrate this really cool thing where you can submit a form using the enter key that even if you're using a multi-line input.
The best way to learn Bubble.io?
Start building with total confidence
No more delays. With 30+ hours of expert content, you’ll have the insights needed to build effectively.
Find every solution in one place
No more searching across platforms for tutorials. Our bundle has everything you need, with 500+ videos covering every feature and technique.
Dive deep into every detail
Get beyond the basics with comprehensive, in-depth courses & no code tutorials that empower you to create a feature-rich, professional app.

Frequently Asked Questions
Find answers to common questions about our courses, tutorials & content.
No. Our Beginner Essentials course and AI No-Code Coach are designed for total newcomers. You’ll learn Bubble.io step by step - no coding required.
Simply type your question in plain English, and our AI taps into the entire video library to recommend the exact lessons you need. It’s like having a personal instructor on demand.
As long as you’re subscribed! With our monthly subscription, you get unlimited access to all 500+ videos, our growing course library, and the AI No-Code Coach.
Your subscription includes:
- Bubble Beginner Essentials – Get up and running fast.
- Build a ChatGPT Clone – Integrate AI into your no-code apps.
- Build Your SaaS Website with AI – Learn to create a scalable startup site.
Plus, new tutorials every week!
The AI No-Code Coach is your first stop for instant answers. If you need deeper help, you can book 1:1 Bubble coaching for expert guidance.
Yes! If you don’t see real progress within 14 days, let us know, and we’ll issue a full refund—no questions asked.
Absolutely. Your subscription is month-to-month, and you can cancel anytime—no lock-ins, no hidden fees.
Absolutely. Your subscription is month-to-month, and you can cancel anytime—no lock-ins, no hidden fees.
If you’re serious about building a successful SaaS startup, check out Mastery—our intensive mentorship program. Mastery goes beyond Bubble.io development and includes:
- 1:1 mentorship to fast-track your progress
- Marketing strategies tailored for no-code founders
- Product management insights to scale your startup
- Personalized support from experienced founders