1

I am using Angular 4 with firebase as my backend. I want to know how can I send the details of this form directly to the email of owner of the school. Suppose that I want to send it a specific email that is registered in the firebase. I am fairly new to working with Firebase.

<md-card>

  <h1 class=" mat-elevation-z12" style="text-align:center; background-color:crimson ;color:white; padding:10px;">Get in Touch With Us</h1>
  <md-tab-group md-stretch-tabs>
    <md-tab label="Phone">
      <div class="text-center" style="color:crimson">
        <h3 style="color:black">Give us a call</h3>
        <p class="phone mat-body-2" >
          <md-icon>phone</md-icon>
          <strong> +91 7017514186</strong>
        </p>
        <p class="phone mat-body-2">
          <md-icon>phone</md-icon>
          <strong> +91 7417690098</strong>
        </p>
        <p class="phone mat-body-2">
          <md-icon>phone</md-icon>
          <strong> +91 8077530850</strong>
        </p>
        <p style="color: black">
          <md-card-footer>Open Monday to Saturday, 7am - 2pm</md-card-footer>
        </p>
      </div>
    </md-tab>
  <md-tab-group>

  </md-tab-group>
    <md-tab label="Email" class="email-tab">

      <div class="text-center">
        <h3>Send us a message!</h3>
      </div>

      <form #contactForm="ngForm" (ngSubmit)="onContactFormSubmit(contactForm.value)">

        <md-select name="subject" id="subject-select" placeholder="Subject" ngModel>
          <md-option *ngFor="let reason of contactReasons" [value]="reason.value">
            {{ reason.viewValue }}
          </md-option>
        </md-select>

        <md-input-container>
          <input mdInput placeholder="Email" name="email" type="email" ngModel>
        </md-input-container>
        <md-input-container>
          <input mdInput placeholder="Phone" name="phone" type="phone" ngModel>
        </md-input-container>

        <md-input-container>
          <textarea
            mdInput
            name="message"
            placeholder="Write your message"
            ngModel>
          </textarea>
        </md-input-container>

        <div class="submit-area">
          <md-checkbox name="optIn" ngModel>
              Sign me up for the mailing list!
          </md-checkbox>
          <div class="submit-button-area">

            <button
              md-raised-button
              type="submit"
              name="submit"
              [disabled]="!contactForm.value.message">
                Submit
            </button>

            <button
              md-raised-button
              type="button"
              (click)="onContactFormClear()">
                Clear
            </button>

          </div>
        </div>

        <md-progress-bar mode="indeterminate" *ngIf="contactForm.submitting"></md-progress-bar>

      </form>      
    </md-tab>
  </md-tab-group>

</md-card>

export class ContactComponent implements OnInit {

contactReasons: Array<any> = [
    { value: 'admission', viewValue: 'Admission' },
    { value: 'complaint', viewValue: 'Complaint' },
    { value: 'general-question', viewValue: 'General Question' },

  ];
  constructor() { }

  ngOnInit() {
  }

  onContactFormSubmit(formData) {

    console.log();

  }

  onContactFormClear() {
  }

I am getting the right log value on the console, the value of the form in json format.

Frank van Puffelen
  • 418,229
  • 62
  • 649
  • 645
Saif Khan
  • 81
  • 1
  • 6
  • (Firebase isn't a mail gateway; it supports email for specific tasks like password resets or etc, but for anything customized you need to use a different service.) – Daniel Beck Aug 09 '17 at 12:23

0 Answers0