Integrate Web3Forms in Angular
Tags: angular, web3forms, forms, templateforms
Published: 2023-05-07 13:24:04

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.

- 
![create web3forms access key](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dq84j8l8octzvhw5vry5.png)

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

- 
![web3forms access key received via email](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0x7g2q5wtqgfkxsgqwfe.png)

- now register your access key here 👉 [Web3Forms](https://web3forms.com/#start)

---

## 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 (_<u>**mail**</u>_)
```
ng generate service services/mail
```
- define a method called (_<u>**sendEmail()**</u>_) that will return a _Promise_ and accept a parameter (<u>**_formData_**</u>) that has type of (_<u>**FormData**</u>_).
- in the method we are going to return the _Promise_ of the built in function (_**<u>fetch()</u>**_), which is accepting 2 arguments:

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

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

- our _**<u>service mail</u>**_ method should look like:

![mail service method](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ajns456913avrtev237.png)

- that's it for the _**<u>mail service</u>**_.

---


- Now let's take a look at the HTML **_<u>form</u>_**:
_I splitted the Form HTML code into 2 images for better view_


![HTML template forms part 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0va8vv4s33sobrlys5zf.png)


![HTML template forms part 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hh90bsb0yruwxxgqds6.png)

- As you can see we are assigning the values of the inputs to an object in our component class (<u>_**<u>contactFormValues</u>**_</u>) with the help of **_<u>template forms</u>_**, and we have a button being used to submit the form as well as we have (<u>_**<u>ng-container</u>**_</u>) and (<u>_**<u>ng-template</u>**_)</u> 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:
![component class methods, properties](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pvkr15ih9l3gvgxsh352.png)

> - Class methods:

![component class methods to handle submit form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2fqu90azkxhecwgm4u8t.png)

## 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 **_<u>NgForm</u>_** 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 **_<u>access key</u>_** from email you received earlier and add it into the environment variables, in my case I called it (**_<u>form_access_key</u>_**) 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.

---

> _**<u>Here we go!</u>**_
 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](https://web3forms.com)
> **Docs** 👉 [Web3Forms docs link](https://docs.web3forms.com/)

---

> Follow me on social media:

1. 👉 [**_Instagram_**](https://instagram.com/coderNadir)

1. 👉 [**_Tiktok_**](https://tiktok.com/@coderNadir)

1. 👉 [**_Twitter_**](https://twitter.com/coderNadir)