Netlify Form Submission Not Working

Support
,
6

Ah, simple enough. I will give this a try and get back. Thanks!

EDIT: Ok just tried this but I am now getting a 405 Method Not Allowed

Here is my code

'use client';

import Image from 'next/image';
import Link from 'next/link';
import React, { useState } from 'react';

import { MobilePhone } from '../components/icons';
import { FormParagraph, LinkedIn, MapPin } from './components';

export default function Contact() {
  const [status, setStatus] = useState<string>('');
  const [error, setError] = useState<string>('');

  // @ts-ignore
  const handleFormSubmit = async (event) => {
    event.preventDefault();
    try {
      setStatus('pending');
      setError('');

      const myForm = event.target;
      const formData = new FormData(myForm);

      const res = await fetch('/__contact-form.html', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        // @ts-ignore
        body: new URLSearchParams(formData).toString(),
      });

      if (res.status === 200) {
        setStatus('ok');
      } else {
        setStatus('error');
        setError(`${res.status} ${res.statusText}`);
      }
    } catch (e) {
      setStatus('error');
      setError(`${e}`);
    }
  };

  return (
    <section className=' w-full p-4 md:m-auto md:w-3/4'>
      <div className='grid grid-cols-1 md:grid-cols-2'>
        <div id='col-1' className='prose p-0 md:border-r md:border-r-neutral-300 md:p-4'>
          <h1>Get in touch</h1>
          <h3>We&apos;d love to hear from you!</h3>
          <form name='contact-form' className='grid grid-cols-1 justify-start p-4' onSubmit={handleFormSubmit}>
            <FormParagraph>
              <label htmlFor='name' className='mr-2'>
                Name:
              </label>
              <input id='name' type='text' name='name' className='w-full' />
              <input type='hidden' name='bot-field' />
              <input type='hidden' name='form-name' value='contact-form' />
            </FormParagraph>
            <FormParagraph>
              <label htmlFor='phone' className='mr-2'>
                Phone:
              </label>
              <input id='phone' type='text' name='phone' className='w-full' />
            </FormParagraph>
            <FormParagraph>
              <label htmlFor='email' className='mr-2'>
                Email:
              </label>
              <input id='email' type='email' name='email' className='w-full' />
            </FormParagraph>
            <FormParagraph>
              <label htmlFor='resume'>Resume:</label>
              <input type='file' id='resume' name='fileUpload' accept='.pdf, .doc, .docx'></input>
            </FormParagraph>
            <FormParagraph>
              <label htmlFor='message' className='mr-2'>
                Message:
              </label>
              <textarea id='message' name='message' />
            </FormParagraph>
            <p>
              <button type='submit' className='w-20'>
                Send
              </button>
            </p>

            {status === 'ok' && <div className='text-green-700'>Submitted!</div>}
            {status === 'error' && <div className='text-red-700'>{error}</div>}
          </form>
        </div>
        <div id='col-2' className='prose border-t border-r-neutral-300 pt-4 md:border-none md:py-4 md:pl-8 md:pr-4'>
          <Image src='/images/clt-contact.jpg' alt='Charlotte skyline' width={300} height={168} />
          <h3>Shark Staffing</h3>
          <ul>
            <li className='grid grid-cols-[26px_1fr]'>
              <div className='my-auto'>
                <MapPin />
              </div>
              <div className='my-auto p-2'>Charlotte, NC</div>
            </li>
            <li className='grid grid-cols-[26px_1fr]'>
              <div className='my-auto'>
                <MobilePhone />
              </div>
              <div className='my-auto p-2'>
                <Link href='tel:252-531-3209'>252-531-3209</Link> / bcox@shark-staffing.com
              </div>
            </li>
          </ul>
          <h3>Social</h3>
          <ul className='list-none'>
            <li>
              <Link href='https://www.linkedin.com/company/shark-staffing/?viewAsMember=true' target='_blank'>
                <LinkedIn />
              </Link>
            </li>
          </ul>
          <div className='not-prose absolute right-0 z-[-10] hidden opacity-95 md:block'>
            <Image
              src='/images/shark-fin-white.webp'
              alt='Wave crashing on the shore'
              className='relative'
              width={350}
              height={350}
            />
          </div>
        </div>
      </div>
    </section>
  );
}

Here is my dummy contact form again:

<html>
  <head></head>
  <body>
    <form
      name='contact-form'
      method='POST'
      data-netlify='true'
      data-netlify-honeypot='bot-field'
      hidden>
        <input type='hidden' name='bot-field' />
        <input type='hidden' name='form-name' value='contact-form' />
        <input id='name' type='text' name='name' />
        <input id='phone' type='text' name='phone' />
        <input id='email' type='email' name='email' />
        <input type='file' id='resume' name='fileUpload' accept='.pdf, .doc, .docx'> />
        <textarea id='message' name='message'></textarea>
    </form>
  </body>
</html>