Forms

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.

While creating Contrast Design Bootstrap, 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.

Default Form Login

html

<CDBCard>
    <CDBCardBody class="mx-4">
        <div class="text-center mt-4 mb-2">
            <p class="h4"> Sign in </p>
        </div>
        <CDBInput [material]=true hint="E-mail" type="email"></CDBInput>
        <CDBInput [material]=true hint="Password" type="password"></CDBInput>
        <div class="d-flex flex-wrap justify-content-center align-items-center">
            <CDBInput type="checkbox"></CDBInput>
            <p class="m-0">Remember me</p>
            <CDBLink to="/">Forgot Password ?</CDBLink>
        </div>
        <CDBBtn color="dark" class="btn-block my-3 mx-0">
            Sign in
        </CDBBtn>
        <p class="text-center">Not a member? <CDBLink class="d-inline p-0" to="/">Register</CDBLink>
        </p>
        <p class="text-center"> or sign in with</p>
        <div class="row my-3 d-flex justify-content-center">
            <CDBBtn color="white" style="box-shadow: none">
                <CDBIcon [fab]=true icon="facebook-f"></CDBIcon>
            </CDBBtn>
            <CDBBtn color="white" class="m-0" style="box-shadow: none">
                <CDBIcon [fab]=true icon="twitter"></CDBIcon>
            </CDBBtn>
            <CDBBtn color="white" style="box-shadow: none">
                <CDBIcon [fab]=true icon="google-plus-g"></CDBIcon>
            </CDBBtn>
        </div>
    </CDBCardBody>
</CDBCard>

typescript

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-forms',
  templateUrl: './forms.component.html',
  styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
  option = [
    {
      text: 'Select Option',
      icon: 'stack-overflow',
    },
    {
      text: 'Another Option',
      icon: 'reddit',
    },
    {
      text: 'Option 3',
      icon: 'instagram',
    },
    {
      text: 'Option 4',
    },
    {
      text: 'Last Option',
    },
  ];
  constructor() {}
  ngOnInit(): void {}
}

Contrast Form Login

html

<CDBCard>
    <div style="background: black" class="text-center text-white">
        <p class="h5 mt-2 py-4 font-weight-bold">Sign in</p>
    </div>
    <CDBCardBody class="mx-4">
        <CDBInput label="Email" type="email"></CDBInput>
        <CDBInput label="Password" type="password"></CDBInput>
        <div class="mt-5 d-flex flex-wrap justify-content-center align-items-center">
            <CDBCheckbox class="mr-2"></CDBCheckbox>
            <p class="m-0">Remember me</p>
            <CDBLink to="/">Forgot Password ?</CDBLink>
        </div>
        <CDBBtn color="dark" [outline]=true class="btn-block my-3 mx-0">
            Sign in
        </CDBBtn>
        <p class="text-center">Not a member? <CDBLink class="d-inline p-0" to="/">Register</CDBLink>
        </p>
        <p class="text-center"> or sign in with</p>
        <div class="row my-3 d-flex justify-content-center">
            <CDBBtn color="white" class="m-0" [outline]=true>
                <CDBIcon [fab]=true icon="facebook-f"></CDBIcon>
            </CDBBtn>
            <CDBBtn color="white" class="m-0" [outline]=true>
                <CDBIcon [fab]=true icon="twitter"></CDBIcon>
            </CDBBtn>
            <CDBBtn color="white" class="m-0" [outline]=true>
                <CDBIcon [fab]=true icon="linkedin-in"></CDBIcon>
            </CDBBtn>
            <CDBBtn color="white" class="m-0" [outline]=true>
                <CDBIcon [fab]=true icon="github"></CDBIcon>
            </CDBBtn>
        </div>
    </CDBCardBody>
</CDBCard>

typescript

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-forms',
  templateUrl: './forms.component.html',
  styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
  option = [
    {
      text: 'Select Option',
      icon: 'stack-overflow',
    },
    {
      text: 'Another Option',
      icon: 'reddit',
    },
    {
      text: 'Option 3',
      icon: 'instagram',
    },
    {
      text: 'Option 4',
    },
    {
      text: 'Last Option',
    },
  ];
  constructor() {}
  ngOnInit(): void {}
}

Default Form Register

html

<CDBCard>
    <CDBCardBody class="mx-4">
        <div class="text-center mt-4 mb-2">
            <p class="h4"> Sign up </p>
        </div>
        <div class="form-row mb-n4">
            <div class="col">
                <CDBInput [material]=true hint="First name" type="text"></CDBInput>
            </div>
            <div class="col">
                <CDBInput [material]=true hint="Last name" type="text"></CDBInput>
            </div>
        </div>
        <CDBInput [material]=true hint="E-mail" type="email"></CDBInput>
        <p class="text-muted text-center small mt-n4">At least 8 characters and 1 digit</p>
        <CDBInput [material]=true hint="Password" type="password"></CDBInput>
        <CDBInput [material]=true hint="Phone number" type="text"></CDBInput>
        <p class="text-muted text-center small mt-n4">Optional - for two step authentication</p>
        <div class="d-flex justify-content-center align-items-center mt-4">
            <CDBInput type="checkbox"></CDBInput>
            <p class="m-0">Subscribe to our newsletter</p>
        </div>
        <CDBBtn color="dark" class="btn-block my-3 mx-0">
            Sign up
        </CDBBtn>
        <p class="text-center"> or sign up with</p>
        <div class="row mb-3 d-flex justify-content-center">
            <CDBBtn color="white" class="m-0" style="box-shadow: none">
                <CDBIcon [fab]=true icon="facebook-f"></CDBIcon>
            </CDBBtn>
            <CDBBtn color="white" class="m-0" style="box-shadow: none">
                <CDBIcon [fab]=true icon="twitter"></CDBIcon>
            </CDBBtn>
            <CDBBtn color="white" class="m-0" style="box-shadow: none">
                <CDBIcon [fab]=true icon="google-plus-g"></CDBIcon>
            </CDBBtn>
        </div>
        <p class="text-center m-0">Already have an account? <CDBLink class="d-inline p-0" to="/">Sign In
            </CDBLink>
        </p>
        <hr />
        <p class="text-center">By clicking <em>Sign up</em> you agree to our <CDBLink class="d-inline p-0"
                to="/">terms of service</CDBLink>
        </p>
    </CDBCardBody>
</CDBCard>

typescript

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-forms',
  templateUrl: './forms.component.html',
  styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
  option = [
    {
      text: 'Select Option',
      icon: 'stack-overflow',
    },
    {
      text: 'Another Option',
      icon: 'reddit',
    },
    {
      text: 'Option 3',
      icon: 'instagram',
    },
    {
      text: 'Option 4',
    },
    {
      text: 'Last Option',
    },
  ];
  constructor() {}
  ngOnInit(): void {}
}

Contrast Form Register

html

<CDBCard>
    <div class="text-center text-white" style="background: black">
        <p class="h5 mt-2 py-4 font-weight-bold"> Sign up </p>
    </div>
    <CDBCardBody class="mx-4">
        <div class="form-row mb-n4">
            <div class="col">
                <CDBInput label="First name" type="text"></CDBInput>
            </div>
            <div class="col">
                <CDBInput label="Last name" type="text"></CDBInput>
            </div>
        </div>
        <CDBInput label="E-mail" type="email"></CDBInput>
        <p class="text-muted text-center small mt-n4">At least 8 characters and 1 digit</p>
        <CDBInput label="Password" type="password"></CDBInput>
        <CDBInput label="Phone number" type="text"></CDBInput>
        <p class="text-muted text-center small mt-n4">Optional - for two step authentication</p>
        <div class="d-flex justify-content-center align-items-center mt-4">
            <CDBCheckbox class="mr-2"></CDBCheckbox>
            <p class="m-0">Subscribe to our newsletter</p>
        </div>
        <CDBBtn color="dark" [outline]=true class="btn-block my-3 mx-0">
            Sign up
        </CDBBtn>
        <p class="text-center"> or sign up with</p>
        <div class="row mb-3 d-flex justify-content-center">
            <CDBBtn color="white" class="m-0" [outline]=true>
                <CDBIcon [fab]=true icon="facebook-f"></CDBIcon>
            </CDBBtn>
            <CDBBtn color="white" class="m-0" [outline]=true>
                <CDBIcon [fab]=true icon="twitter"></CDBIcon>
            </CDBBtn>
            <CDBBtn color="white" class="m-0" [outline]=true>
                <CDBIcon [fab]=true icon="linkedin-in"></CDBIcon>
            </CDBBtn>
            <CDBBtn color="white" class="m-0" [outline]=true>
                <CDBIcon [fab]=true icon="github"></CDBIcon>
            </CDBBtn>
        </div>
        <p class="text-center m-0">Already have an account? <CDBLink class="d-inline p-0" to="/">Sign In
            </CDBLink>
        </p>
        <hr />
        <p class="text-center">By clicking <em>Sign up</em> you agree to our <CDBLink class="d-inline p-0"
                to="/">terms of service</CDBLink>
        </p>
    </CDBCardBody>
</CDBCard>

typescript

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-forms',
  templateUrl: './forms.component.html',
  styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
  option = [
    {
      text: 'Select Option',
      icon: 'stack-overflow',
    },
    {
      text: 'Another Option',
      icon: 'reddit',
    },
    {
      text: 'Option 3',
      icon: 'instagram',
    },
    {
      text: 'Option 4',
    },
    {
      text: 'Last Option',
    },
  ];
  constructor() {}
  ngOnInit(): void {}
}

Default Form Subscription

html

<CDBCard>
    <CDBCardBody class="mx-4">
        <div class="text-center mt-4 mb-2">
            <p class="h4">Subscribe</p>
        </div>
        <p class="text-center mt-4 font-weight-light">Join our mailing list. We write rarely, but only the
            best content.</p>
        <CDBLink class="text-center p-0 font-weight-light" to="/">See the last newsletter</CDBLink>
        <CDBInput [material]=true hint="Name" type="text"></CDBInput>
        <CDBInput [material]=true hint="E-mail" type="email"></CDBInput>
        <CDBBtn color="dark" class="btn-block my-3 mx-0">
            Subscribe
        </CDBBtn>
    </CDBCardBody>
</CDBCard>

typescript

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-forms',
  templateUrl: './forms.component.html',
  styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
  option = [
    {
      text: 'Select Option',
      icon: 'stack-overflow',
    },
    {
      text: 'Another Option',
      icon: 'reddit',
    },
    {
      text: 'Option 3',
      icon: 'instagram',
    },
    {
      text: 'Option 4',
    },
    {
      text: 'Last Option',
    },
  ];
  constructor() {}
  ngOnInit(): void {}
}

Contrast Form Submission

html

<CDBCard>
    <div class="text-center text-white" style="background: black">
        <p class="h5 mt-2 py-4 font-weight-bold">Subscribe</p>
    </div>
    <CDBCardBody class="mx-4">
        <p class="text-center mt-2">Join our mailing list. We write rarely, but only the best content.</p>
        <CDBLink class="text-center p-0" to="/">See the last newsletter</CDBLink>
        <CDBInput label="Name" type="text"></CDBInput>
        <CDBInput label="E-mail" type="email"></CDBInput>
        <CDBBtn color="dark" [outline]=true class="btn-block my-3 mx-0">
            Subscribe
        </CDBBtn>
    </CDBCardBody>
</CDBCard>

typescript

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-forms',
  templateUrl: './forms.component.html',
  styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
  option = [
    {
      text: 'Select Option',
      icon: 'stack-overflow',
    },
    {
      text: 'Another Option',
      icon: 'reddit',
    },
    {
      text: 'Option 3',
      icon: 'instagram',
    },
    {
      text: 'Option 4',
    },
    {
      text: 'Last Option',
    },
  ];
  constructor() {}
  ngOnInit(): void {}
}

Default Form Contact

html

<CDBCard>
    <CDBCardBody class="mx-4">
        <div class="text-center mt-4 mb-2">
            <p class="h4"> Contact us </p>
        </div>
        <CDBInput [material]=true hint="Name" type="text"></CDBInput>
        <CDBInput [material]=true hint="E-mail" type="email"></CDBInput>
        <p class="text-center m-0">Subject</p>
        <CDBSelect [options]="option" selected="Feedback"></CDBSelect>
        <CDBInput hint="Message" type="textarea"></CDBInput>
        <div class="d-flex justify-content-center align-items-center mt-4">
            <CDBInput [material]=true type="checkbox"></CDBInput>
            <p class="m-0">Send me a copy of this message</p>
        </div>
        <CDBBtn color="dark" class="btn-block my-3 mx-0">
            Send
        </CDBBtn>
    </CDBCardBody>
</CDBCard>

typescript

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-forms',
  templateUrl: './forms.component.html',
  styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
  option = [
    {
      text: 'Select Option',
      icon: 'stack-overflow',
    },
    {
      text: 'Another Option',
      icon: 'reddit',
    },
    {
      text: 'Option 3',
      icon: 'instagram',
    },
    {
      text: 'Option 4',
    },
    {
      text: 'Last Option',
    },
  ];
  constructor() {}
  ngOnInit(): void {}
}

Contrast Form Contact

html

<CDBCard>
    <div style="background: black" class="text-center text-white">
        <p class="h5 mt-2 py-4 font-weight-bold">Contact Us</p>
    </div>
    <CDBCardBody class="mx-4">
        <CDBInput label="Name" type="text"></CDBInput>
        <CDBInput label="E-mail" type="email"></CDBInput>
        <p class="text-center m-0 text-muted">Subject</p>
        <CDBSelect2 color="white" [options]="option" selected="Feedback"></CDBSelect2>
        <CDBInput label="Message" type="textarea"></CDBInput>
        <div class="d-flex justify-content-center align-items-center mt-4">
            <CDBInput type="checkbox"></CDBInput>
            <p class="m-0">Send me a copy of this message</p>
        </div>
        <CDBBtn color="dark" [outline]=true class="btn-block my-3 mx-0">
            Send
        </CDBBtn>
    </CDBCardBody>
</CDBCard>

typescript

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-forms',
  templateUrl: './forms.component.html',
  styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
  option = [
    {
      text: 'Select Option',
      icon: 'stack-overflow',
    },
    {
      text: 'Another Option',
      icon: 'reddit',
    },
    {
      text: 'Option 3',
      icon: 'instagram',
    },
    {
      text: 'Option 4',
    },
    {
      text: 'Last Option',
    },
  ];
  constructor() {}
  ngOnInit(): void {}
}

Login Form with Icons

html

<CDBCard>
    <CDBCardBody class="mx-4">
        <div class="text-center mt-4 mb-2">
            <p class="h4 font-weight-bold"> Sign in </p>
        </div>
        <CDBInput label="E-mail" type="email" icon="envelope"></CDBInput>
        <CDBInput label="Password" type="password" icon="lock"></CDBInput>
        <CDBBtn color="success" class="btn-block mt-5 mx-auto">
            Login
        </CDBBtn>
    </CDBCardBody>
</CDBCard>

typescript

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-forms',
  templateUrl: './forms.component.html',
  styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
  option = [
    {
      text: 'Select Option',
      icon: 'stack-overflow',
    },
    {
      text: 'Another Option',
      icon: 'reddit',
    },
    {
      text: 'Option 3',
      icon: 'instagram',
    },
    {
      text: 'Option 4',
    },
    {
      text: 'Last Option',
    },
  ];
  constructor() {}
  ngOnInit(): void {}
}

Login Form with Outside Label

html

<CDBCard>
    <CDBCardBody class="mx-4">
        <div class="text-center mt-4 mb-4">
            <p class="h4"> Sign in </p>
        </div>
        <label htmlFor="defaultLoginEmail" class="text-muted m-0">
            Your email
        </label>
        <CDBInput id="defaultLoginEmail" class="mt-n3" type="email"></CDBInput>
        <label htmlFor="defaultLoginPassword" class="text-muted m-0">
            Your password
        </label>
        <CDBInput id="defaultLoginPassword" class="mt-n3" type="password"></CDBInput>
        <CDBBtn color="primary" class="btn-block mt-5 mx-auto">
            Login
        </CDBBtn>
    </CDBCardBody>
</CDBCard>

typescript

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-forms',
  templateUrl: './forms.component.html',
  styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
  option = [
    {
      text: 'Select Option',
      icon: 'stack-overflow',
    },
    {
      text: 'Another Option',
      icon: 'reddit',
    },
    {
      text: 'Option 3',
      icon: 'instagram',
    },
    {
      text: 'Option 4',
    },
    {
      text: 'Last Option',
    },
  ];
  constructor() {}
  ngOnInit(): void {}
}

Sign Up Form with Icon

html

<CDBCard>
    <CDBCardBody class="mx-4">
        <div class="text-center mt-4 mb-2">
            <p class="h4 font-weight-bold"> Sign up </p>
        </div>
        <CDBInput label="Your name" type="text" icon="user" iconClass="text-muted"></CDBInput>
        <CDBInput label="Your email" type="email" icon="envelope" iconClass="text-muted"></CDBInput>
        <CDBInput label="Confirm your email" type="email" icon="exclamation-triangle" iconClass="text-muted">
        </CDBInput>
        <CDBInput label="Your Password" type="password" icon="lock" iconClass="text-muted"></CDBInput>
        <CDBBtn color="primary" class="btn-block mt-5 mx-auto">
            Register
        </CDBBtn>
    </CDBCardBody>
</CDBCard>

typescript

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-forms',
  templateUrl: './forms.component.html',
  styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
  option = [
    {
      text: 'Select Option',
      icon: 'stack-overflow',
    },
    {
      text: 'Another Option',
      icon: 'reddit',
    },
    {
      text: 'Option 3',
      icon: 'instagram',
    },
    {
      text: 'Option 4',
    },
    {
      text: 'Last Option',
    },
  ];
  constructor() {}
  ngOnInit(): void {}
}

Sign Up Form Outside Label

html

<CDBCard>
    <CDBCardBody class="mx-4">
        <div class="text-center mt-4 mb-2">
            <p class="h4"> Sign up </p>
        </div>
        <label htmlFor="defaultRegisterName" class="text-muted m-0">
            Your name
        </label>
        <CDBInput id="defaultRegisterName" class="mt-n3" type="text"></CDBInput>
        <label htmlFor="defaultRegisterEmail" class="text-muted m-0">
            Your email
        </label>
        <CDBInput id="defaultRegisterEmail" class="mt-n3" type="email"></CDBInput>
        <label htmlFor="defaultRegisterEmailConfirm" class="text-muted m-0">
            Confirm your email
        </label>
        <CDBInput id="defaultRegisterEmailConfirm" class="mt-n3" type="email"></CDBInput>
        <label htmlFor="defaultRegisterPassword" class="text-muted m-0">
            Your password
        </label>
        <CDBInput id="defaultRegisterPassword" class="mt-n3" type="password"></CDBInput>
        <CDBBtn color="danger" class="btn-block mt-5 mx-auto">
            Register
        </CDBBtn>
    </CDBCardBody>
</CDBCard>

typescript

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-forms',
  templateUrl: './forms.component.html',
  styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
  option = [
    {
      text: 'Select Option',
      icon: 'stack-overflow',
    },
    {
      text: 'Another Option',
      icon: 'reddit',
    },
    {
      text: 'Option 3',
      icon: 'instagram',
    },
    {
      text: 'Option 4',
    },
    {
      text: 'Last Option',
    },
  ];
  constructor() {}
  ngOnInit(): void {}
}

Subscription Form with Icon

html

<CDBCard>
    <CDBCardBody class="mx-4">
        <div class="text-center mt-4 mb-2">
            <p class="h4 font-weight-bold"> Subscribe </p>
        </div>
        <CDBInput label="Your name" type="text" icon="user" iconClass="text-muted"></CDBInput>
        <CDBInput label="Your email" type="email" icon="envelope" iconClass="text-muted"></CDBInput>
        <CDBBtn [outline]=true color="primary" class="btn-block mt-5 mx-auto">
            Send
            <CDBIcon [far]=true icon="paper-plane"></CDBIcon>
        </CDBBtn>
    </CDBCardBody>
</CDBCard>

typescript

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-forms',
  templateUrl: './forms.component.html',
  styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
  option = [
    {
      text: 'Select Option',
      icon: 'stack-overflow',
    },
    {
      text: 'Another Option',
      icon: 'reddit',
    },
    {
      text: 'Option 3',
      icon: 'instagram',
    },
    {
      text: 'Option 4',
    },
    {
      text: 'Last Option',
    },
  ];
  constructor() {}
  ngOnInit(): void {}
}

Subscription Form with Outside Label

html

<CDBCard>
    <CDBCardBody class="mx-4">
        <div class="text-center mt-4 mb-2">
            <p class="h4"> Subscribe </p>
        </div>
        <label htmlFor="defaultSubscribeName" class="text-muted m-0">
            Your name
        </label>
        <CDBInput id="defaultSubscribeName" class="mt-n3" type="text"></CDBInput>
        <label htmlFor="defaultSubscribeEmail" class="text-muted m-0">
            Your email
        </label>
        <CDBInput id="defaultSubscribeEmail" class="mt-n3" type="email"></CDBInput>
        <CDBBtn [outline]=true color="danger" class="btn-block mt-5 mx-auto">
            Send
            <CDBIcon [far]=true icon="paper-plane"></CDBIcon>
        </CDBBtn>
    </CDBCardBody>
</CDBCard>

typescript

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-forms',
  templateUrl: './forms.component.html',
  styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
  option = [
    {
      text: 'Select Option',
      icon: 'stack-overflow',
    },
    {
      text: 'Another Option',
      icon: 'reddit',
    },
    {
      text: 'Option 3',
      icon: 'instagram',
    },
    {
      text: 'Option 4',
    },
    {
      text: 'Last Option',
    },
  ];
  constructor() {}
  ngOnInit(): void {}
}

Contact Form with Icon

html

<CDBCard>
    <CDBCardBody class="mx-4">
        <div class="text-center mt-4 mb-2">
            <p class="h4 font-weight-bold"> Write to Us </p>
        </div>
        <CDBInput label="Your name" type="text" icon="user" iconClass="text-muted"></CDBInput>
        <CDBInput label="Your email" type="email" icon="envelope" iconClass="text-muted"></CDBInput>
        <CDBInput label="Subject" type="text" icon="tags" iconClass="text-muted"></CDBInput>
        <CDBInput label="Your message" type="textarea" icon="pencil-alt" iconClass="text-muted"></CDBInput>
        <CDBBtn [outline]=true color="secondary" class="btn-block mt-5 mx-auto">
            Send
            <CDBIcon [far]=true icon="paper-plane"></CDBIcon>
        </CDBBtn>
    </CDBCardBody>
</CDBCard>

typescript

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-forms',
  templateUrl: './forms.component.html',
  styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
  option = [
    {
      text: 'Select Option',
      icon: 'stack-overflow',
    },
    {
      text: 'Another Option',
      icon: 'reddit',
    },
    {
      text: 'Option 3',
      icon: 'instagram',
    },
    {
      text: 'Option 4',
    },
    {
      text: 'Last Option',
    },
  ];
  constructor() {}
  ngOnInit(): void {}
}

Contact Form with Icon

html

<CDBCard>
    <CDBCardBody class="mx-4">
        <div class="text-center mt-4 mb-4">
            <p class="h4"> Write to Us </p>
        </div>
        <label htmlFor="defaultContactName" class="text-muted m-0">
            Your name
        </label>
        <CDBInput id="defaultContactName" class="mt-n3" type="text"></CDBInput>
        <label htmlFor="defaultContactEmail" class="text-muted m-0">
            Your email
        </label>
        <CDBInput id="defaultContactEmail" class="mt-n3" type="email"></CDBInput>
        <label htmlFor="defaultContactSubject" class="text-muted m-0">
            Subject
        </label>
        <CDBInput id="defaultContactSubject" class="mt-n3" type="text"></CDBInput>
        <label htmlFor="defaultContactMessage" class="text-muted m-0">
            Your message
        </label>
        <CDBInput id="defaultContactMessage" class="mt-n3" type="textarea"></CDBInput>
        <CDBBtn [outline]=true color="secondary" class="btn-block mt-5 mx-auto">
            Send
            <CDBIcon [far]=true icon="paper-plane"></CDBIcon>
        </CDBBtn>
    </CDBCardBody>
</CDBCard>

typescript

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-forms',
  templateUrl: './forms.component.html',
  styleUrls: ['./forms.component.scss'],
})
export class FormsComponent implements OnInit {
  option = [
    {
      text: 'Select Option',
      icon: 'stack-overflow',
    },
    {
      text: 'Another Option',
      icon: 'reddit',
    },
    {
      text: 'Option 3',
      icon: 'instagram',
    },
    {
      text: 'Option 4',
    },
    {
      text: 'Last Option',
    },
  ];
  constructor() {}
  ngOnInit(): void {}
}

Form Login

html

<CDBCard>
    <CDBCardBody class="mx-4">
        <div class="text-center mt-4 mb-2">
            <p class="h4 font-weight-bold"> Sign in </p>
        </div>
        <CDBInput label="E-mail" type="email"></CDBInput>
        <CDBInput label="Password" type="password"></CDBInput>
        <p class="mt-n3 text-right">
            <CDBLink class="p-0" to="/">Forgot Password ?</CDBLink>
        </p>
        <CDBBtn color="dark" class="btn-block my-4 mx-0">
            Sign in
        </CDBBtn>
        <p class="text-center"> or sign in with</p>
        <div class="row my-3 d-flex justify-content-center">
            <CDBBtn color="white" class="m-0">
                <CDBIcon [fab]=true icon="facebook-f"></CDBIcon>
            </CDBBtn>
            <CDBBtn color="white" class="m-0">
                <CDBIcon [fab]=true icon="twitter"></CDBIcon>
            </CDBBtn>
            <CDBBtn color="white" class="m-0">
                <CDBIcon [fab]=true icon="google-plus-g"></CDBIcon>
            </CDBBtn>
        </div>
        <hr />
        <p class="text-center">Not a member? <CDBLink class="d-inline p-0" to="/">Sign up</CDBLink>
        </p>
    </CDBCardBody>
</CDBCard>