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 - MailChannels · Cloudflare Pages docs

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!

Having a similar experience - I’m just doing a simple html website and I want a contact form. What is the proper way to include npm install Cloudflare/pages-plugin-mailchannels?

Right now I’m putting it in my “build command” and it works, but I get the following errors:

15:39:52.588 Executing user command: npm install @cloudflare/pages-plugin-mailchannels
15:39:53.606 npm WARN saveError ENOENT: no such file or directory, open ‘/opt/buildhome/repo/package.json’
15:39:53.611 npm notice created a lockfile as package-lock.json. You should commit this file.
15:39:53.612 npm WARN enoent ENOENT: no such file or directory, open ‘/opt/buildhome/repo/package.json’
15:39:53.613 npm WARN repo No description
15:39:53.613 npm WARN repo No repository field.
15:39:53.613 npm WARN repo No README data
15:39:53.613 npm WARN repo No license field.

Is there a “right” way to do this?

Yes, do it as described in the previous post–run it locally in your project. Use npm init and npm install and the instructions are saved in a package.json file, which Pages will pick up. It will then install by itself. Your build command can be whatever you need it to be; no need to put the install command in there.

So I need to install NPM locally, do the install, then upload package.json to the root of my pages project?

Do I need anything in my build command then if everything else is just html?

When you run npm init it will create the package.json, which npm install will update. It looked in your previous post like you are using git deployment, so just commit that file (and the accompanying package-lock.json) and Pages will see and use it.

Thanks! That seemed to have cleared up the errors I was getting on build.

I’m having an issue now where I get a generic “Could not send your email. Please try again.” response. Is there some way to troubleshoot this? I don’t see logs anywhere with Pages.

Run-time error logs are as-yet unavailable with Pages. You should probably make a new thread for Mailchannels help; I haven’t used it.

I figured out my problem - IT 10 T error. When defining the DKIM private key environment variable you have to set it for both production and preview.

Thank you for your help re: npm install. It wasn’t clear to me to install npm on the local machine. Having done that and committing the files my builds compile without error!

1 Like