Integrate Web3Forms in Angular

Hi and welcome to my blog post where we are going to talk how to integrate Web3Forms in your Angular application.

Why Web3Forms?

I'm going to use Web3Forms for the needlessness of a back-end server, so no need to set-up a back-end API to send our emails.

prerequisites

• Web3Forms access key.

• Angular basics (Services, TemplateForms).

Let's create our access key:

• first we have to submit the email that we are going to receive emails on.

• 

• once we submit it and finish the steps, we are going to receive the access key in our email that we registered with.

• 

• now register your access key here 👉 Web3Forms

Let's move to the code part:

• I'm going to 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:

• that's it for the mail service.

• Now let's take a look at the HTML form: I splitted the Form HTML code into 2 images for better view

• 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 I want to explain 3 parts from the method:

1. creating a formData instance and add values 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 step to add other inputs' values.
   • grab your access key from email you received earlier and add it into the environment variables, in my case I 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.

2. 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.

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

Here we go!
now we set everything up you can go and give it a try.
that's it for today's post, thanks for reading and I hope you find it helpful!
let me know your thoughts & opinions in the comments section!

website 👉 Web3Forms home page
Docs 👉 Web3Forms docs link

Follow me on social media:

1. 👉 Instagram

2. 👉 Tiktok

3. 👉 Twitter