Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Angular JS

Prerequisites

Angular basics:

  • Services

  • TemplateForms

Let's move to the code part:

  • Let's assume that you already initialized your app and you have your component that has the form.

  1. Create a service (mail)

ng generate service services/mail

  • define a method called (sendEmail()) that will return a Promise and accept a parameter (formData) that has type of (FormData).

  • in the method we are going to return the Promise of the built in function (fetch()), which is accepting 2 arguments:

  1. API endpoint: https://api.web3forms.com/submit.

  2. Object with 2 properties: { method: 'POST', body: formData }

  • our service mail method should look like:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class MailService {
  constructor() {}

  sendEmail(formData: FormData): Promise<Response> {
    return fetch('https://api.web3forms.com/submit', {
      method: 'POST',
      body: formData,
    });
  }
}

  • that's it for the mail service.

  • Now let's take a look at the HTML form:

We are you using TailwindCSS for styling

  • As you can see we are assigning the values of the inputs to an object in our component class (contactFormValues) with the help of template forms, and we have a button being used to submit the form as well as we have (ng-container) and (ng-template) inside the button tag to display whether the text (send) or show a spinning animated (icon) that indicates the form is being submitted.

  • Let's take a look at the component class properties and methods:

  • Class properties:

  • Class methods:

Class properties explanation:

  • showAlert: boolean = false; To display alert message (success or fail).

  • alertMessage: string = ''; To hold the alert message.

  • onSubmit: boolean = false; To set and track submit state.

  • iconLoad = faArrowRotateForward; To define and rename the icon from (fontAwesome library).

  • contactFormValues contactFormValues = { name: '', email: '', body: '', };

To hold the inputs' values with the help of the template forms of Angular.

Class methods explanation:

  • hideAlert() To hide the alert message after 5 seconds.

  • submitEmail(contactForm) An async function that accepts an instance of the NgForm to handle the submit form and in this method let's explain 3 parts of it:

  1. Create a formData instance and append values (contactFormValues) because it is the way that Web3Forms accepts the form.

  • formData.append('name', this.contactFormValues.name); add input value (name) from template to formData, follow the same steps to add the other inputs' values (email, body).

  • grab your access key from email you received earlier and add it into the environment variables, in our case we called it (form_access_key) see example below:

  • formData.append('access_key', environment.form_access_key);

  • formData.append('subject', 'Email Support From Your Site'); to set subject text.

  • formData.append('from_name', 'Contact Notification'); to set a name for the form.

You can read more about customizations here: Web3Forms Customization

  1. try | catch blocks, in the try block we are calling the mailService.sendEmail() method to submit the form and in case the form was successfully submitted we show a success message and reset the values to null by the help of the instance NgForm that has reset() method, in our case it is contactForm.reset(), and in case there is an error we added a guard clause and inside its block we throw an error to force the code to jump to the catch block and show an error message.

  2. and at the end of the method we reset onSubmit property to false, showAlert to true and call the hideAlert() method.

Congratulations! You are all set up and ready to go.

This article is written by CoderNadir

PreviousSvelteNextAlpine.js

Last updated