Multi-line user input - Allow an option for "Enter" to send

@georgecollier I have been looking for a solution like this for 3 months and your solution works really well. Thank you so much!

I’m still pretty new to Bubble and had to make a few researches or adjustments after seeing your message. I will detail them below for other beginner users:

  1. Before anything, you will need to assign the IDs that you will use in your Javascript code to your “Send button” and your “Multiline input”. This option is deactivated by default in Bubble. To activate it, go to your application, then Settings on the left bar, then right at the bottom “Expose the option to add an ID attribute to HTML elements”.

  2. Then, go to the properties panels of your “Send Button” and “Multiline Input” . Right at the bottom, you should be able to assign them an ID. Put anything you want but something that will be unique.

  1. Then add the plugin Toolbox to your application if you don’t have it yet. You can find it here

  2. Go to your application page where you want to implement this feature, and then go to Workflows and make sure you have a Workflow “When Page Is Loaded”.

Capture d’écran 2023-10-11 à 16.52.42

  1. Then, create a step and go to “Plugins” and select the one called “Run Javascript”.

  1. For me initially, the code provided by @georgecollier didn’t work. You will need to change the the typographic (or “curly”) quotes used in the code, which can cause issues in JavaScript. It’s important to use straight quotes, either single or double. If you struggle here, just copy and paste the code into ChatGPT and ask to correct it.

  2. Don’t forget to change the IDs in the JavaScript snippet to the ones you have assigned to your “Send Button” and “Multiline Input”, and paste the code into the “Script” field in the workflow step.

Here is the screenshot of my final code that works:

Capture d’écran 2023-10-11 à 17.09.33

Capture d’écran 2023-10-11 à 17.09.59

Hope it helped!

Cheers

5 Likes