Cloudflare DevelopersCD
Cloudflare Developers•2y ago
Tyler Hillery

Trouble getting Static Form Pages Plugin working with KV on Astro Site

WebDev noob here and struggling to integrate the Static Form Pages Plugin with KV on my Astro site. I followed the instructions here and updated my astro.config.mjs to use directory mode and src/env.d.ts to include define Cloudflare runtime and KV type. Also updated KV namespace bindings on Cloudflare Pages > Settings > Fuctions. Also added a wrangler.toml with the kv_namespaces.

Could someone just provide some psuedo code on how you would update this respondeWith function that serializes the formData and saves it to a KV namespace?
import staticFormsPlugin from "@cloudflare/pages-plugin-static-forms";

export const onRequest: PagesFunction = staticFormsPlugin({
  respondWith: ({ formData, name }) => {
    const email = formData.get('email')
    return new Response(`Hello, ${email}! Thank you for submitting the ${name} form.`)
  }
});

For content here is the error I get from the real time function logs
  "exceptions": [
    {
      "name": "ReferenceError",
      "message": "formSubmissions is not defined",
      "timestamp": 1709656550205
    }
  ],

here is what I tried
import staticFormsPlugin from "@cloudflare/pages-plugin-static-forms";


export const onRequest: PagesFunction = staticFormsPlugin({
  respondWith: async ({ formData, name }) => {
    const email = formData.get('email');

    // Serialize the formData if you have multiple fields or need to store it as a JSON object
    const dataToStore = JSON.stringify({ email: email });

    // Create a unique identifier for this submission
    const submissionId = new Date().toISOString();

    // Save the serialized data to your KV namespace
    await formSubmissions.put(`submission-${submissionId}`, dataToStore);

    // Return a response to the user
    return new Response(`Hello, ${email}! Thank you for submitting the ${name} form. Your submission has been saved.`);
  }
});
Was this page helpful?