Project Info (Reactive Forms Validation)

This is the most basic and default form having form sections. To add form section use `.form-section` class with any heading tags. This form has the buttons on the bottom left corner which is the default position.

#### Personal Info

First Name *
First Name is required
Last Name *
Last Name is required
E-mail *
Email is required
Email must be a valid email address
Contact Number *
phone is required

#### Requirements

Company *
Company is required
Interested in *
Interest is required
Budget *
Budget is required
Select File
File is required
About Project *
Project Description is required
User Profile (Template-Driven Forms Validation)

You can always change the border color of the form controls using `border-*` class. In this example we have user `border-primary` class for form controls. Form action buttons are on the bottom right position.

#### About User

First Name * First Name is required.
Last Name * Last Name is required.
Username * User Name is required.
Nick Name * Nick Name is required.

#### Contact Info & Bio

Email * Please enter a valid email!
Website url error
Contact Number contact Number required
Bio * Bio is required.

#### Issue Tracking

This form shows tooltips on hover to provide useful information while user is filling the form. Use data attributes like toggle `data-toggle`, trigger `data-trigger`, placement `data-placement`, title `data-title` to show tooltips on form controls.

Issue Title
Opened By
Date Opened
Date Fixed
Priority
Status
Comments

#### Timesheet

This form shows the use of icons with form controls. Define the position of the icon using `has-icon-left` or `has-icon-right` class. Use `icon-*` class to define the icon for the form control. See Icons sections for the list of icons you can use.

Employee Name
Project Name
Date
Rate Per Hour
$
.00
Start Time
End Time
Notes

#### Complaint Form

This is a variation to the default form control styling. In this example all the form controls has round styling. To apply round style add class `round` to any form control.

Company Name
Employee Name
Date of Complaint
Supervisor's Name
Complaint Details
Signature

#### Donation

This is another variation to the default form control styling. In this example all the form controls has square styling. To apply square style add class `square` to any form control.

Full Name
Email
Contact Number
Dontaion Type
Amount
$
.00
Comments

#### Event Registration

This example shows a way to center your form in the card. Here we have used `col-md-6 ml-auto` classes to center the form in a full width card. User can always change those classes according to width and offset requirements. This example also uses form action buttons in the center bottom position of the card.

Full Name
Title
Company
Email
Contact Number
Existing Customer
Yes
No

#### Event Registration

This example shows a ways to center your card with form. Here we have used `col-md-6 ml-auto` classes to center the card as its not full width. User can always change those classes according to width and offset requirements. This example also uses form action buttons in the center bottom position of the card.

Full Name
Title
Company
Email
Contact Number
Existing Customer
Yes
No