Form Design Tutorial with Tailwind CSS (with examples)

see this unattractive form i'm gonna be honest with you during my career i have made forms that look like this or even worse but after learning a few basic design tricks i managed to turn my forms from looking like they've made 30 years ago to looking like this and these design tricks are not difficult to learn even if you have no previous design experience so follow me as you will learn to never make a bad looking form ever again clone the repository in the pinned comment if you wanna code along with me after you've done it please install the packages and start the development server here you can see our final result but we're gonna start working on the inputsbase.html open it in your favorite ide i'm using vs code to get started uncomment this line to add tailwind to your project the first obvious difference to me is that our form takes a lot less space than the finished result when i start working on new design like this i wanna think where i want the form to sit on the page it feels really awkward to have the form in the upper left corner so instead let's center it i begin by adding a little bit of padding to the sides and a lot more marching to the top and bottom this gives the form a lot more room to breathe add a reasonable max width for the form and set the margin on the x-axis to auto which will center the form on the page all of the text in the form is very cramped up together which makes it very difficult to read let's add some space between the elements all of the input boxes are almost invisible this is because their background color is the same as the bodies adding a very light gray background for the body helps them pop out more at least we can see our input boxes now but they look very underwhelming this is where we can make the biggest difference in our design start by adding a border and changing the color to a medium gray to change the position of the inputs to be below the label let's change the display to block the inputs are currently a lot smaller than i would like to so let's fix it by adding padding on the y and x axis make the inputs full width to give the user more room to type and change the borders to rounded to make them look more clickable they are starting to look a lot better but now we need to fix the black outline when the input is focused with the outliner removed it's very difficult to tell which input is currently focused to fix this let's instead change the color of the border let's give them a nice medium teal color you don't have to use teal as the color in fact you can use any color you want i would encourage you to use your brand colors for example discord uses their purple interlogin form now that the inputs are looking good let's focus on the text all the text elements in this form look the exact same there's no hierarchy and they're competing for attention there's three ways you can emphasize text size weight and color we want the heading to be the most important element so let's increase its size and make it semi-bold for this help text right here we can make it a little bit smaller so it doesn't compete with the label let's talk about color for a second the subtitle and the help text are the same color as the other text elements to de-emphasize them let's give them a little bit lighter gray color now there is this awkward gap between the heading and the subtitle to fix this let's wrap them inside a div now we have all of the elements correctly grouped together the heading and the subtitle label and input label input and help text all of the input boxes are the same width which is a little bit deceiving for example no one is going to write a very large number in the budget to fix this let's change the width of each of the inputs to match the expected text that the user is going to write for the budget we can set the width to a quarter of its current width for the first and last name we can set the width to half of its current width the current address can stay as the full width as addresses are usually very long now that the first and last name are half width we can actually set them right next to each other instead of being on top of each other to do this we can wrap them inside a flexbox and let's add a little bit of space between them so they are not right next to each other the added benefit of having the first and last name right next to each other is that it's helpful to have similar elements grouped together when increasing the budget we can see that it's in increments of 0.01 dollars to let users know this we can add a placeholder text and while we are at it let's change the placeholder text to be a lighter gray but this begs the question in which currency is the budget in the narrow way to show this to the user would be to add a help text under the input or next to the label but we can do something better we can add the currency inside the input let's add a div and set the currency to usd currently the currency is on top of the input but to give the illusion that it's inside it we need to do some more designing let's start by wrapping them inside a flexbox for the currency i'm gonna change this way to flex and center the items and add a little bit of padding to the sides this design is a little bit small so let's zoom in a little bit so we can get a better view to make the currency look like it's part of the input i'm going to set its background color to be the same color as the inputs border i'm going to set the text color to white and i want to round the corners only on the left side for the input it's still it on all sides to make it look like it's part of the currency i'm gonna make it round it only on the right side now the input and the currency look like they're the same element but we can do better than just showing text we can use an icon instead for icons i like to use font awesome so go to the repository and select svg solid and then search for dollar select the dollar sign svg and switch to the source and just copy it then paste it over the usd text unfortunately we don't see anything this is because it has no size yet so let's try different sizes and see what works the best 6 is a lot bigger than i would want to 4 is still a bit better so let's go down to 3. let's fill it with the current text color the form looks amazing so far but we can work on the text a little bit more currently it's using the system default fonts which in my case is ubuntu but this changes depending on what operating system and browser you use my preferred way to add custom font story site is by using google fonts and i'm going to show you one of my all-time favorite fonts it's called inter it looks amazing on all screen sizes and it really has this kind of look that fits into modern dashboard type sites so let's choose the two styles we're gonna use regular and semi-bold copy the link and paste it into the head of your html nothing changes because we still need to extend our tailwind config to add this new font go to tailwind config and uncomment these lines this is going to extend the sensory font family with the font we just added let's refresh the page and see how much better it looks like to add final touches let's mix the text anti-aliased and the color very dark gray instead of black these changes are very subtle in this video i only covered input boxes but there's so much more to good forms in the following videos i'm gonna cover buttons drop downs check boxes and so much more so please consider subscribing so you stay notified when i upload more videos thank you

Channel: Austin Shelby

Views: 11,705

Keywords: tailwind css, html, css, form, design, web development, web design, tailwind tutorial

Id: SOA5O6GNO5U

Length: 11min 54sec (714 seconds)

Published: Mon Nov 09 2020