Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

In this Bubble tutorial video, you will learn how to improve the look of your forms in Bubble by having better radio boxes or better toggles. By using a custom state and icons, you can have a better design and add some customization to the look of forms that you build in your Bubble app.

To get started, you will need to have a list of items in your database. If you have an option set, like the one in the video with four colors, and you want the user to be able to choose one color and only one color, then this tutorial is perfect for you.

Font Awesome

First, you will add an icon and make it a bit bigger. You can add more icons using a plugin or check out other tutorials about Font Awesome to use the latest icons in Bubble.

Next, you will set up a workflow to change the look of the input when the icon is clicked. Custom states are a great way of temporarily holding data. Nothing is saved to the database, which means that if the page refreshes, then all the form data is lost. You can create a custom state on basically any element on the page, but it's easier to keep them all together.

You will also need to give some visual feedback when the icon is clicked. This can be done by creating a circular check that becomes visible when your custom state color is the cell's color.

Finally, you will need to account for the user experience you want to give with your form. You can add a second workflow to clear the custom state if the user clicks on an icon and changes their mind.

By following these steps, you can use custom states and icons to improve the look of and add some customization to the forms that you build in your Bubble app.

Latest videos