Building a form in Bubble - Beginner’s guide

Introduction to Creating a Form in Bubble

Welcome to my beginner's guide for how to create a form in Bubble. I'm going to be covering the function of the form and also showing you how to add in some nice design elements. I'll be starting with this blank canvas and going through the whole process but before I do that did you know that PlanetNoCode.com is home to even more videos than you can find on our YouTube channel. If you're learning Bubble and you want to accelerate that process head to PlanetNoCode.com to access all of our videos that we've ever recorded and also if you want one to help with your Bubble development you can reach out to me directly and we can have a one-to-one session over zoom.

Setting Up the Form Layout

Let's start with this blank canvas here and I've got the layout set to align to parent that's because it's going to look good for this demo but you're probably working with a page that's got a layer of either rows and columns but this is just going to help to nicely center everything so I'm going to add in a group and this will be what I put my form into and so I'm going to put it into the center it's going to be a column because it's going to be form elements one after another in a column and let's set a background color and let's get border radius going okay and we'll add in some padding 24 tends to look quite good like I say I'm doing minimalist UI design but I want it to look good and professional.

Adding Form Elements

So let's add in a text element and just make that slightly bigger using one of the presets of the styles and what shall we do with this let's have let's imagine we're making a database of all the movies that we've enjoyed watching so I'll say add movie it's my form title make the min height that then add a bit of margin on the bottom let's say 20 okay now I'm going to add in another text label so from an accessibility point of view and you can do your own research on this and it's not it looks some people consider that it looks good but really the ideal thing is not to rely on just the placeholder and input to tell the user what they're writing in it simply because as soon as they click in it they're gonna lose that prompt of what they're meant to be entering in so it is always better to put labels on your your form field.

Creating Input Fields

So let's do that I'm gonna make this a hundred percent min height and let's say this will be movie title in fact I don't need six movie I could just say title then let's add in an input now the height of text inputs tend to look good between like 52 54 are quite conventional one so let's go 52 and make this good okay and then I'm gonna group these together this is so that I can really quickly lay out content you're gonna see that in a mo so this is going to be a column and then that's going to have a gap between it of say four see that go and just put between title and the input and then if I show my element tree what's going on here here's one of my input fields I'm gonna further put this into a column and this is going to contain all of my fields so column container just to clear up what I've got so this contains one field this is going to contain all of them.

Duplicating and Arranging Fields

And so now I can copy this and paste it in and then I can apply a gap here of let's say 20 and it's beginning to lay it all out really nicely and the advantage of using a gap over using a bottom margin is it's going to be more consistent it knows to apply the gap in between items that's the nature of a gap so it means I don't have to add a margin to the bottom of every single field apart from the bottom one because otherwise that's gonna look weird it's gonna add 20 pixels to the bottom I'm also gonna add in my button and make this 100% width the reason I'm making everything 100% width is so that if I make the at the moment I've got fixed width on the element if I make this responsive I want everything else inside also to be responsive so I want to limit the amount that I use fixed widths because that's just going to make making it responsive later on a whole lot harder.

Adding More Form Fields

So I'll say this add to database and let's call this the description and I want the description to be a multi-line input so I can drag in the multi-line input here or a neat trick here is I can just replace the element type and say multi-line input and now it's a multi-line input and you'll notice that the padding around it is a bit different that's just to do with the default style but I'm gonna leave that as it is I'm also gonna do here is add in a placeholder so you'll say enter title and the advantage of doing this is that the the internal label this is how you will refer to this input throughout your Bubble app gets updated too now you can overwrite this but if you overwrite it and then change the placeholder it's not going to automatically update because it knows that you've forced the value into it and so I'll say here this is copy the movie description here.

Adding an Image Upload Field

Now what else do we want for a movie I think we would want to upload an image so I'm copying and pasting because then I don't need to lay this all out again and can I replace this element type with the photo or I think it's called photo uploader so there are some that you can't just swap like for like it's called picture uploader I think then I can do that yeah okay and so in here I can just say click or drag to upload an image cool this one poster image okay.

Adding a Toggle Field

And then what if I want to have another field and this time is to check whether I've watched it or not maybe it's on my waitlist instead so I clicked in the wrong bit there we go so I'm gonna say watched and this time replace it not replace it delete it because I want to use an ionic toggle if you don't see ionic toggle it's a plugin to install it's called ionic elements we detail that in another video so I'm gonna add that in and then I actually want this to be side by side so I'm gonna change this to a row it's not gone into a row because this elements width is a hundred percent so I will say fit and their minimum is like 80% great and then just adjusting this let's have eight instead okay now my default state is going to be unchecked and now you can do everything with an ionic toggle that you can do with a checkbox it just looks a lot better.

Setting Up the Database Workflow

So how do we add this into the database well let's add in a workflow so I'm going to say add a workflow and we're going to create a thing and I've already got a movie data type from a previous demo let's just see what I've got here so I've got the title well I think was an AI demo so I'm going to use the title field that I've already got I'm gonna add in a new description field of type text so this is where it's helpful that I've added in my own custom placeholders because I can just search for title and my input is named and easy to find if I call it description yeah okay and now need a poster field of type image and I'll link this to the picture uploader and then I need a yes/no field so I'll just say watched question mark yes/no and then I'm gonna link in my ionic toggle now so the ionic toggle doesn't have a placeholder so it is still just ionic toggle a and I say is checked.

Testing the Form

And then let us preview that so let's say I'll pick a film I can spell let's say Barbie and we'll just say great great film from 2023 I don't have a Barbie image so I'm not gonna fill it in I'm just gonna say watched ads database okay and that should have done it let's go and check so I'll go into data app data movies and I've got other movies in here because I've reused this data type but you can see that Barbie has been added in with these fields filled in.

Enhancing User Experience with Notifications

I'm gonna add in an extra bonus into this video which is that when the user click submit or ads database it wasn't a great user experience so I'm going to use a the toast plugin to show a notification we've got other videos covering this in more detail but let's add in those additional steps so I'm going to reset the inputs and then I'm going to add in a toast notification and say success and then I'm going to refer to what I've created so I can say the result of step one which is me creating it it's title so that would be Barbie in the previous case has been added to your database and we'll make that green because it's a success and we'll show it in the top center so yeah I'll just do Barbie again film of 2023 and I've not watched it so we get a lovely toast notification up top and we clear out the form with that reset inputs action so it's ready for someone to submit a second film right away.