Cloudflare Pages + mailchannels = website submission form

Cloudflare free plan.
Could someone guide me (I’m a newbie at this) to get Cloudflare Pages to work with MailChannels to receive emails using my web form?

I was instructed to install this on the mailchannels support:

npm install Cloudflare/pages-plugin-mailchannels

But I don’t know where or how to add it.

Thank you very much…

There’s a guide available here for that pages plugin - https://developers.cloudflare.com/pages/platform/functions/plugins/mailchannels/

Yes, I have read the post but it doesn’t say where I should enter the code. Where in? in workers… where? somewhere in my html site?.
Honestly, I have no idea…

Hi @hernan1,

You can do this on the command line and it will install the package in your packages.json file of your worker. This would probably need to be done on your local machine and then uploaded via wrangler publish command. You may find it difficult to do this if you are editing your worker in the Cloudflare worker online editor.

My workflow for starting a new worker project is to run the following commands:

  1. mkdir myworker && cd myworker
  2. wrangler init
  3. wrangler dev
  4. wrangler publish

You can find more info of wrangler and how to use it in the developers documentation under Workers → wrangler (sorry I can’t include the link in my post as it won’t let me).

Hope this helps.

I just realised you are wanting this in your pages project.

To run this command you will need to be working NPM to install the javascript Mailchannels plugin package. Once you have installed the package you can use that in your pages project to send transactional emails.

If you already have a Javascript application you can just run the command on the terminal and it will be available for your code.

npm install @cloudflare/pages-plugin-mailchannels

If your project is vanilla html or something similar you can bring in javascript packages, however, you will need to setup NPM first in your project. To do this run the init command following the prompts and then you can install the above package like this:

npm init
npm install @cloudflare/pages-plugin-mailchannels

npm init will ask you a bunch of questions like project name, etc and will create a package.json file for you. Once you have the package.json file any packages you install will be stored in the packages.json file for safe keeping and future management and upgrades, etc.

Essentially, whether you are building a pages app or a worker the process for installing and managing packages is the same.

Good luck!