# Hosting a custom mailbox to send Mail on cloudfare

This article discusses using HTML code to trigger a mailbox to send mail. To set up HTML code to start, go to our most recent tutorial.  
The benefit of adopting this approach is that the mail, from which you must send the letter, will be double-verified.

***Let’s start by performing the steps;***

**Step 1:** The first step is to add a contact form code to the HTML page or template where you wish to modify the trigger for sending email via mailbox. The contact form example code is provided below.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703051295271/e9c00237-3bb0-4397-a176-74296dd4de62.png)

Code

**Step 2:** Verify the HTML file’s functionality in the browser. To accomplish this, double-click the HTML file, and your usual browser will open.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703051296714/343c7e22-c5df-4839-a158-dd87d80dfa87.png)

HTML form

**Step 3:** To activate the mailbox, provide the necessary information in the required space.Step 4: Now you need to click on **send message** button to tell the mailbox to get activated and send mail.

As soon as you click the button your default mailbox is prompted like below.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703051298179/ec44d0b7-3127-4c45-ab05-9d6dd94520eb.png)

Form

**Step 4:** Now you need to click on **send message** button to tell the mailbox to get activated and send mail.

As soon as you click the button your default mailbox is prompted like below.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703051299822/8df312b7-f6e8-4952-9e7c-a0e07e0a5608.png)

MailBox

**Step 5:** Here you need to again select the email id from which you want to send your message. After selecting your mail id you will automatically get the exact details that you have typed in your contact form in the browser. At first, time if you will not get the exact message details try the same thing the second time you will get it. Below is a sample you will see.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703051301462/34ec0c83-55c4-4418-8699-4c48d752a959.png)

Select your Email ID

**Step 6:** Send the mail after validating the information. I am getting mail on my mobile device, thus the sample for the same is below. And the receiver can receive your mail.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703051302880/198caada-5d81-4f2a-8141-90fa978af5ed.png)

Received Mail

> At this point, your system and no other system can access your project because it is functioning locally. We must deploy our project to the Cloudflare hosting infrastructure in order to make it available to everyone. Hostinger, Heroku, and many other platforms can host our static or dynamic HTML and CSS website, however, as a demonstration of utilizing Cloudflare, we are deploying our project to cloudflare.

**Step 7:** Create a Cloudflare account if you don’t already have one. You must sign in to Cloudflare since I’m presuming you have an account there.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703051304241/507aa86d-0cb6-4808-bd78-ca6b6830f1f2.png)

Create Cloudflare account

**Step 8:** Enter your login information to access the dashboard.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703051305935/481c13ba-a003-4faa-ac6f-a1493cbdb43f.png)

Login Page

**Step 9:** If you have enabled two-factor authentication for your account, the window below will appear.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703051307332/77b3028b-f406-4286-af58-bd6cb6b25171.png)

Two-Factor Authentication

**Step 10:** After that, you may access the Cloudflare dashboard.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703051308839/a66227f7-d910-4b42-a518-dc3c7d0bfcfd.png)

Cloudflare Dashboard

**Step 11:** Go to the pages section on the left navigation panel now.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703051310426/09fc9e4f-9189-4c53-86e9-3f079b0d956b.png)

Pages Section

**Step 12:** From there, use the “**Create a Project”** option to start a new project. and link to the project repository on Github.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703051312144/367821f5-7f04-4bd2-a939-df5dbbfc07e9.png)

Create Project

**Step 13:** After that, you must provide Cloudflare permission to utilize your GitHub project. The sample screenshot that will be requested is shown below. The “**Install and Authorize**” button must be clicked.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703051313761/14475997-264a-42fd-afd9-e272011bc3f4.png)

Permit to install and authorize

**Step 14:** Then, you will see that your Github project is connected to Cloudflare.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703051315227/34749aa1-e4c3-41d9-93cb-697112988d5c.png)

Connected to cloudflare

**Step 15:** At this point, you must configure the build and deployment commands. In the build settings, you must choose “**None**” for the Framework preset and then click “**save and deploy.**” You will observe that your project’s deployment to Cloudflare ought to have started.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703051316990/d9938634-39e0-4b6a-bd03-66dc573deb9b.png)

Deployment Started

**Step 16:** At this point, you will see the project’s link at the top. You must click on the link to determine whether your project is accessible to everyone.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703051318441/82ec471e-e429-4e39-bf31-6dbdeb11effe.png)

As soon as you click the **send message** button below, a popup with a sample photo appears. You just need to click the “**send anyhow**” button once, so don’t worry.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1703051320022/fdc32cd8-cd49-4624-8828-255b2f8f0158.png)

Click on Send Anyway

You may now use the same procedures that you did while testing your project locally.

> I hope this article was informative and provided you with the details you required. If you have any questions while reading the blog, message me on [Instagram](https://www.instagram.com/acanubhav94/) or [LinkedIn](https://www.linkedin.com/in/anubhav-chaturvedi-a7465a72/).For any kind of work related to Web Development you can contact me at [helpmeanubhav@gmail.com](mailto:helpmeanubhav@gmail.com)

> Thank You…