Contact Form Example Using Angular 8/9 and Bootstrap

This tutorial help to add a contact us page with angular 4 application or angular 2, You can use it for feedback form, quote form, request form etc, All the form will have the same functionality. I am just creating an HTML form with some input fields and submitting data to angular 4 model.

We will gather all form information and send it to HTTP rest call to save data into the database, You can also send mail as well.We are using angular 4 to submit a form and send data to the controller.

Contact Form Angularjs Example

We will create an HTML form using Bootstrap, Adding a name, email, mobile, etc input fields. We are not creating a structure angular js application. You can read more information from Here.

Step 1: Added Form and HTTP module into app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
                FormsModule,
                HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

HTTP module uses to create HTTP requests and FORM module is used to create HTML elements and find model attributes.

Step 2: We will create an HTML form and add the below code into app.component.html file.

<div style="text-align: center;">
<h1 class="well">Submit Feedback</h1>
<div class="container">
<div class="col-md-5">
<div class="form-area"><form role="form"><br style="clear: both;">
<h3 style="margin-bottom: 25px; text-align: center;">Contact Form</h3>
<div class="form-group"><input id="name" class="form-control" name="name" required="" type="text" placeholder="Name"></div>
<div class="form-group"><input id="email" class="form-control" name="email" required="" type="email" placeholder="Email"></div>
<div class="form-group"><input id="mobile" class="form-control" name="mobile" required="" type="phone" placeholder="Mobile Number"></div>
<div class="form-group"><input id="subject" class="form-control" name="subject" required="" type="text" placeholder="Subject"></div>
<div class="form-group"><textarea id="message" class="form-control" maxlength="140" name="message" rows="7" placeholder="Message"></textarea></div>
<button id="submit" class="btn btn-primary pull-right" name="submit" type="button">Submit Form</button></form></div>
</div>
</div>
</div>

I have added save() method into button click, We will create a method to get data from HTML form and passed to HTTP service.

Step 3: We will create save() method into app.component.ts file.

import { Component } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {HttpErrorResponse} from '@angular/common/http';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Simple Example Contact-us page using Angular 4';
  public data:any=[]
 
  
  constructor(private http: HttpClient){
  }
 
  save(name, email, mobile, subject, message): void {
    this.data['name']= name;
                this.data['email']= email;
                this.data['mobile']= mobile;
                this.data['subject']= subject;
                this.data['message']= message;
    console.log(this.data);
                //add request to send email or into mysql
                this.http.put('http://localhost/api/v1/update/', this.data).subscribe(
        res => {
          console.log(res);
      },
      (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
          console.log("Client-side error occured.");
        } else {
          console.log("Server-side error occurred.");
        }
      });
   }
}

We have imported HTTPClient to access HTTP module features. We have also created a data variable and set all form posted data into this variable. We have created HTTP Post type requests to send data to server, to save data into database or for email service.

Conclusion:

We have created a simple HTML form, You can change this code to create a feedback form or request form as per your need, I am saving contact form information into the database. You can use Email service rest call to send emails.