Let's use the knowledge about input elements that we acquired in the previous lesson and create some full-fledged forms.

Every group of input fields should reside in a <form> element. TW Elements provides no default styling for the <form> element, but there are some powerful browser features that are provided by default.

Login form

Using email and password inputs, and adding a checkbox, button and 2 links, we can create an attractive Login Form:

Forgot password?

Not a member? Register

Register form

With a little modification of the Login Form, we can create a Register Form:

Contact form

Using a textarea input we can create a Contact Form:

Note: If you want to learn more about forms, form layouts and other available options read form documentation page.

Step 1 - create an empty Contact Section

Let's prepare a place for the form in our project.

In the index.html file, under the section with pricing cards, add a new section with a grid for 2 columns inside.

Step 2 - add Contact Form

In the first column, add the contact form we presented in this lesson in the example above.

Remember that we also need to initialize the Input component in the index.js file:

And that's all for this lesson. In the next lesson, we'll finish our Contact section, so when you're ready, click "next".

John Doe

About author

Michal Szymanski

Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.