Netlify Form

[sardarms]

Hi, I wanted to share a solution for getting Netlify forms to work with AstroWind. My goal was to fix the "empty submission" problem without editing the theme's core Contact.astro widget, so my changes won't get overwritten by future theme updates.

The Problem:
When using the default Contact.astro widget, Netlify submissions work, but the notification email is empty.

The Solution:
Instead of modifying the theme files, I created a new, separate widget just for my Netlify form. This new component is self-contained and renders all its fields directly, which Netlify can parse.

Here are the two steps to do it:

---

Step 1: Create a new custom widget file

I created a new file at src/components/widgets/NetlifyForm.astro. This component is a copy of the original Contact.astro widget, but I've modified it to render the form fields directly instead of using <FormContainer />.

src/components/widgets/NetlifyForm.astro (Full Code)

---
// This is a new custom widget, e.g., src/components/widgets/NetlifyForm.astro
// It's based on the theme's 'Contact.astro' but renders fields directly.

import Headline from '~/components/ui/Headline.astro';
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
import type { Contact as Props } from '~/types'; // We can reuse the existing type

const {
  title = await Astro.slots.render('title'),
  subtitle = await Astro.slots.render('subtitle'),
  tagline = await Astro.slots.render('tagline'),
  inputs,
  textarea,
  disclaimer,
  button,
  description,

  id,
  isDark = false,
  classes = {},
  bg = await Astro.slots.render('bg'),
} = Astro.props;
---

<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
  <Headline title={title} subtitle={subtitle} tagline={tagline} />

  {
    inputs && (
      <div class="flex flex-col max-w-xl mx-auto rounded-lg backdrop-blur border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900 shadow p-4 sm:p-6 lg:p-8 w-full">
        
        <form
          name="custom-contact-form"  method="POST"
          action="/success"   data-netlify="true"
          netlify-honeypot="bot-field"
          class="w-full"
        >
          <input type="hidden" name="form-name" value="custom-contact-form" />
          <div style="display:none;">
            <label>Don’t fill this out if you’re human: <input name="bot-field" /></label>
          </div>

          {inputs.map((input) => (
            <div class="mb-6">
              <label class="block font-medium text-sm" for={input.name}>
                {input.label}
              </label>
              <input
                type={input.type}
                name={input.name}
                id={input.name}
                placeholder={input.placeholder || ''}
                autocomplete="on"
                class="block bg-white border border-gray-200 dark:bg-slate-900 dark:border-gray-700 px-4 py-3 rounded-lg text-md w-full"
              />
            </div>
          ))}

          {textarea && (
            <div>
              <label class="block font-medium text-sm" for={textarea.name}>
                {textarea.label}
              </label>
              <textarea
                name={textarea.name}
                id={textarea.name}
                rows="4"
                class="block bg-white border border-gray-200 dark:bg-slate-900 dark:border-gray-700 px-4 py-3 rounded-lg text-md w-full"
              ></textarea>
            </div>
          )}

          <div class="grid mt-10">
            <button class="btn-primary" type="submit">
              {button?.text || 'Contact us'}
            </button>
          </div>
          
          {description && <p class="mt-4 text-sm">{description}</p>}
          {disclaimer && <p class="mt-4 text-sm">{disclaimer}</p>}

        </form>
      </div>
    )
  }
</WidgetWrapper>

---

Step 2: Use your new widget on a page (e.g., src/pages/contact.astro)

Now, instead of calling <ContactUs />, you just call your new <NetlifyForm /> component. Make sure to pass the name property to the textarea object.

---
import Layout from '~/layouts/PageLayout.astro';
// 1. Import your new custom widget
import NetlifyForm from '~/components/widgets/NetlifyForm.astro';

const metadata = {
  title: 'Contact',
};
---

<Layout metadata={metadata}>
  
  <NetlifyForm
    id="form"
    title="Get in Touch"
    subtitle="You can use the form below to contact us directly."
    inputs={[
      {
        type: 'text',
        name: 'name',
        label: 'Name',
      },
      {
        type: 'email',
        name: 'email',
        label: 'Email',
      },
      {
        type: 'tel',
        name: 'phone',
        label: 'Phone Number',
      },
    ]}
    textarea={{
      label: 'Message',
      name: 'message'  // <-- This 'name' property is crucial!
    }}
  />

</Layout>

---

By doing it this way, you get a working Netlify form, and you never have to worry about your changes being deleted when you update the AstroWind theme.

Hope this helps!