Lesson info

Forms are great for lead generation, gathering feedback, and other valuable business uses. Form elements can also be styled and positioned in unique ways. Here we’ll cover four aspects of form styling:

  1. Styling form typography
  2. Styling form states
  3. Styling the focus state of form fields
  4. Using columns to quickly lay out form elements

Assets

Want to follow along with this lesson? Fortunately, we created a zip file which contains all the assets used in the project, and we've included that link 

right here
.

Transcript

We're going to cover styling for three different aspects of forms: typography, field focus, and columns.

If we're using Field Labels, we can add a class to each label which will let us go in and make styling changes. Of course, those styling changes will apply to each field label that has that class applied. Now Field Labels can be helpful — and you may want these in your design — but you might also prefer a more minimal approach. So we're selecting these field labels and pressing delete.

Let's also go ahead and create a class for our text fields so we can make uniform style changes to those. And we can apply that class to each text field in our form.

For instance, we can change the color of the text when someone starts typing into any of these text fields. We're going to preview this so we can type in some sample text. And after we do that, when we leave preview, that placeholder text is still there. All we have to do is change our font color and we can see it update right on the Canvas.

We can also select our form element directly and go over to the Element Settings Panel to access our Success and Error states. Of course we can style any of the elements in here as well.

That's typography.

Field Focus, of course, refers to when a field...is focused. If we go to preview our page and click inside of a text field? That field is now focused. Depending on how you've styled your project, you might like it as-is. Or maybe you're looking to do something different. If that's the case, we can override that style.

We can access the Focus by selecting the text field and clicking on States. And right at the bottom? We have "Focused." And from here we can style the state. We can do outlines or box shadows. We can use an outer glow here and adjust some of the properties to make it more obvious to the user that this particular field is focused. And once that's done, we can head on over to preview this page, and click through the different text fields to see how it'll look once it's published.

That's...Field Focus.

Finally, we have Columns. And there are many ways to visually structure a form, but columns can be extremely helpful.

In fact, we can grab the Columns element and drag it right into the form. We'll set our row to have four columns, and once that's done, we can simply place each of the form elements into the columns. We just drag and drop. And the fields automatically take up the full width of whatever they're inside, so we don't have to manually size these.

And the button, if we'd like, we can set to 100% width, so it'll match those other elements. And that's it for the columns here...

But maybe things are a little tight in Tablet view. We can access our row if we just click our label here and go up to select the Row, and then under our Element Settings Panel, we can adjust the other views below. In this case, two across...or full width. If we go back over to our default view, we show all four, then the columns adjust as we go down through the other views.

So, we can adjust typography on elements inside our form, we can access the Focused view — that state — to adjust the way that focus appears on input fields, and of course we can use columns to horizontally organize the fields in our form.

And those are some of the basics of styling forms.