Angular Bootstrap forms

Angular Forms - Bootstrap 4 & Material Design

Angular Bootstrap forms are input-based components which are designed to collect users data. Used as login, subscribe or contact form, all can be easily customized.

Angular Bootstrap forms in Material Design are simple and eye-pleasant. While creating MDB, we were aware of their importance in almost every project, so we have put a lot of effort to get them right.

Such constructions like predefined Form logins, Form registers, Form subscriptions or Form contacts and other layout forms varying in their design are all at your disposal. Each of them offers a different type of functionality.

You can use default bootstrap style or material design version.

In case you want to create your custom form, have a look at specific pages of our documentation from the list below:


Login / Sign in form

Default form login

Sign in

Not a member? Register

or sign in with:

Sign in

Remember me

Not a member? Register

or sign in with:

Material form login MDB Pro component

Sign in

Not a member? Register

or sign in with:

Sign in
Remember me

Not a member? Register

or sign in with:


Register / Sign up form

Default form register

Sign up

At least 8 characters and 1 digit Optional - for two step authentication

or sign up with:


By clicking Sign up you agree to our terms of service and terms of service.

Sign up

At least 8 characters and 1 digit Optional - for two step authentication
Subscribe to our newsletter

or sign up with:


By clicking Sign up you agree to our terms of service and terms of service.

Material form register MDB Pro component

Sign up
At least 8 characters and 1 digit
Optional - for two step authentication

or sign up with:


By clicking Sign up you agree to our terms of service and terms of service.

Sign up
At least 8 characters and 1 digit
Optional - for two step authentication
Subscribe to our newsletter

or sign up with:


By clicking Sign up you agree to our terms of service and terms of service.


Subscription form

Default form subscription

Subscribe

Join our mailing list. We write rarely, but only the best content.

See the last newsletter

Subscribe

Join our mailing list. We write rarely, but only the best content.

See the last newsletter

Material form subscription MDB Pro component

Subscribe

Join our mailing list. We write rarely, but only the best content.

See the last newsletter

Subscribe

Join our mailing list. We write rarely, but only the best content.

See the last newsletter


Form contact

See also:

1. Tutorial - Creating a fully functional contact form

2. Contact Sections

Default form contact

Contact us

Contact us

Material form contact MDB Pro component

Contact us
Subject
Contact us
Subject
Send me a copy of this message
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'contact-form', templateUrl: './contact-form.component.html', styleUrls: ['./contact-form.component.scss'], }) export class ContactFormComponent implements OnInit { optionsSelect: Array; ngOnInit() { this.optionsSelect = [ { value: 'Feedback', label: 'Feedback' }, { value: 'Report a bug', label: 'Report a bug' }, { value: 'Feature request', label: 'Feature request' }, { value: 'Other stuff', label: 'Other stuff' }, ]; } }