- Read Tutorial
- Watch Guide Video
In this guide, we're going to talk about how we can finish styling our Create a Proposal form. I am liking what I've seen so far.
However we still of a little bit of work we have to do because this only looks ok. Bootstrap provides much better form elements and what we have right here. We're still using the HTML5 defaults so to use these let's just create another attribute right underneath type and we're going to do this for all of them and I'm going to say class and we'll say form dash control class="form-control". Now if I hit save and come back now look at this. Doesn't this look a million times better? It's even get some nice highlighting when you click on it.
I'm definitely a fan of this compared with these other elements right underneath it. Let's take this class of form control and we'll apply this to every one of the items.
Now our form looks much better and this is much more professional and that's what someone's going to be typically expecting to see. So I like this.
I also like the fact that you notice how our labels are connected to whatever's being typed in so the labels connected to the input. If you click on the label it'll automatically activate that form element. Now we're not quite done, we could be done. However I think that we still have a little bit of room for improvement. And one of those things is with our hourly rate. The text box, this is a financial item so I think it makes sense to add a little dollar sign at the beginning. So if we add a little dollar sign then that would make it clear that they're expecting a financial item. And this also helps because if we just had an hourly rate you might have a user who types in something like a dollar sign or they try to type in a dollar sign. But that's not going to work because it's the wrong data type. So here we now change it to just one or something like that then our validation goes away. Now that is not too difficult to do in Bootstrap, the way that you're going to do it is by coming over to our hourly rate item and we're going to nest all of this code so our label and our input we're going to nest it inside of another div.
So this div is going to be what's called an input group our input group is going to store all this. Let's say class="Input-group" and this is provided by bootstrap. What we're going to have is right below the input group and above the input, we're going to put a span in here of a dollar and the span needs a class and it's going to be a class of input group add-on just like this <span class="input-group-addon">$</span>.
If I hit save watch what happens, now we have this nice little dollar sign here.
It makes more sense to come in and just enter 150 you know something like that.
I like the way that all of this is shaping up. And we have everything from being able to show the portfolio URL so they can just enter their URL all the way down to having a prepend here for the hourly rate. So we designate that as a dollar symbol. Now if I drag this all the way this side so you can see what it'll look like on a desktop screen.
I'm definitely a fan of how this is coming along. So so far I don't really have any more changes on this side. We're going to eventually have some when we go and create or generate proposal button but we're going to do that later on when we have connected to the Rails API. So if we come and click on proposals the next two items on our task lists are to style the proposal list and then also our proposal show page so we'll tackle those in the next few videos.