Cloudflare Developers•7mo ago

mailchannels and static forms

I am using mailchannels plugin as detailed in this documentation https://developers.cloudflare.com/pages/functions/plugins/mailchannels/ Right now, it works but all the information from my contact form is in the body of the email and the subject of the email is set to default as "New contact form submission" (see pic) since I am using the attribute data-static-form-name="contact" per documentation I want to set the reply to email set to the senders email address. Was reading through mailchannels api from here and it seems like there is a reply to in the personalizations https://api.mailchannels.net/tx/v1/documentation I saw this static forms pages plugin, which uses the same attribute as mailchannels https://developers.cloudflare.com/pages/functions/plugins/static-forms/ Would that be the route to take if I want to capture the information in my contact form and set it to information in my _middleware.ts from the mailchannels plug in? Thank you!

Cloudflare Docs

MailChannels · Cloudflare Pages docs

The MailChannels Pages Plugin intercepts all form submissions made which have the data-static-form-name attribute set. Then, it emails these form …

Cloudflare Docs

Static Forms · Cloudflare Pages docs

The Static Forms Pages Plugin intercepts all form submissions made which have the data-static-form-name attribute set. This allows you to take action …

3 Replies

Mccopy•7mo ago

hello, I m web dev. how can I help you?

lckillah•7mo ago

Hello. Quick question actually. As you can see in the picture I sent, the body of the email includes all the information from my form. I just need the message from my form to be in the body of my email, not the name, email, category. I have the name and category set to my subject field and the email to my reply to. How can I edit my typescript to include just the message, not all of the fields? I looked into the mailchannels API and I see "content" so I tried to put the message in there but didn't work. Here's a screenshot of my current _middleware.ts

lckillah•7mo ago

Would probably be easier to see if I just paste the code here

import mailChannelsPlugin from "@cloudflare/pages-plugin-mailchannels";
import staticFormsPlugin from "@cloudflare/pages-plugin-static-forms";

export const onRequest: PagesFunction = async (context) => {
  // First, handle the form submission with the static forms plugin
  const formResponse = await staticFormsPlugin({
    respondWith: async ({ formData, name }) => {
      // Extract the email, name, message, and category from the form submission
      const email = formData.get('email');
      const senderName = formData.get('name');
      const message = formData.get('message');
      const category = formData.get('category');

      // Send an email to the workers with the form data
      const mailResponse = await mailChannelsPlugin({
        personalizations: [
          {
            to: [
              {
                name: "Abigail Claucherty",
                email: "[email protected]",
              },
            ],
            reply_to: {
              email: email, // Use the sender's email for reply_to
            },
            subject: `Message from ${senderName}: Looking for a ${category}`,
            dkim_domain: "bbybloom.co",
            dkim_selector: "mailchannels",
            dkim_private_key: context.env.DKIM_PRIVATE_KEY,
          },
        ],
        from: {
          name: "Bby Bloom",
          email: "[email protected]",
        },
        // Customize this response as needed
        respondWith: () => new Response(null, {
          status: 302,
          headers: { Location: "#thankyou" },
        }),
      })(context);

      // Return the mail response or handle as needed
      return mailResponse;
    }
  })(context);

  return formResponse;
};

import mailChannelsPlugin from "@cloudflare/pages-plugin-mailchannels";
import staticFormsPlugin from "@cloudflare/pages-plugin-static-forms";

export const onRequest: PagesFunction = async (context) => {
  // First, handle the form submission with the static forms plugin
  const formResponse = await staticFormsPlugin({
    respondWith: async ({ formData, name }) => {
      // Extract the email, name, message, and category from the form submission
      const email = formData.get('email');
      const senderName = formData.get('name');
      const message = formData.get('message');
      const category = formData.get('category');

      // Send an email to the workers with the form data
      const mailResponse = await mailChannelsPlugin({
        personalizations: [
          {
            to: [
              {
                name: "Abigail Claucherty",
                email: "[email protected]",
              },
            ],
            reply_to: {
              email: email, // Use the sender's email for reply_to
            },
            subject: `Message from ${senderName}: Looking for a ${category}`,
            dkim_domain: "bbybloom.co",
            dkim_selector: "mailchannels",
            dkim_private_key: context.env.DKIM_PRIVATE_KEY,
          },
        ],
        from: {
          name: "Bby Bloom",
          email: "[email protected]",
        },
        // Customize this response as needed
        respondWith: () => new Response(null, {
          status: 302,
          headers: { Location: "#thankyou" },
        }),
      })(context);

      // Return the mail response or handle as needed
      return mailResponse;
    }
  })(context);

  return formResponse;
};

Gaming

Programming

mailchannels and static forms