Form returns 404 plus my CSS styles change after submit

Hi guys,

I have read the “Common Issue” topics and searched in other ones but still can’t fix my problems.

I can’t manage to make forms working in my website.
I keep getting status 404 PLUS after I click the submit button the page reload and the form loses all its CSS styles…

I am using Gatsby, I also read their documentation hot to implement forms but still everything I have done doesn’t seem to work.

Here is my code:

import React from "react"
import styled from "styled-components"
import { respondTo } from "../mixins/respondTo"

import Layout from "../components/layout"
import Main from "../components/main"
import SEO from "../components/seo"

const GetInTouch = ({ ...props }) => {
  return (
    <Wrap>
      <Layout path={props.path}>
        <SEO title="Page two" />
        <Main className="getInTouch-main">
          <form method="POST" name="contact" data-netlify="true">
            <h1>Your Email</h1>
            <input type="email" name="email" />
            <h1>Message</h1>
            <textarea type="message" name="message" className="message" />
            <button type="submit">Send</button>
          </form>
        </Main>
      </Layout>
    </Wrap>
  )
}

const Wrap = styled.div`
  height: 100%;

  form {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;

    ${respondTo.mobileS`
      width: 100%
      `}
    ${respondTo.tablet`
      width: 80%;
      `}
    ${respondTo.laptop`
      width: 40%;
      `}
    ${respondTo.laptopL`
      width: 40%;
      `}

  h1 {
    color: var(--light-bright-green);
    text-shadow: 0.2rem 0.2rem 0.1rem var(--pink);
    font-size: 2rem;
  }

  input {
    border-radius: 5rem;
    border: none;
    width: 100%;
    height: 2rem;
    padding: 2rem;
    margin-bottom: 3rem;
    font-size: 1.5rem;
  }

  .message {

      border: none;
      border-radius: 2rem;
      padding: 2rem;
      margin-bottom: 3rem;
      font-size: 1.5rem;
      resize: none;
      width: 100%;
      height:50%;

  }

    button {
      font-size: 1.5rem;
      border-radius: 50px;
      border: none;
      padding: .5rem;
      background: var(--gunmetal);
      color: var(--light-bright-green);
      width: 7rem;
      cursor: pointer;
      box-shadow: 0.2rem 0.2rem 0.1rem var(--pink);

      &:hover {
        transform: translate3D(0.2rem, 0.2rem, 0.2rem);
        /* transform: translateY(3px); */
      }
    }
  }
`

export default GetInTouch

If any of you amazing people could help me would be amazing.

Thank you very much.

I sounds as if the CSS file is not properly linked in, but without a URL or other information, it’s difficult to go any farther than that.

Have you tried downloading your deploy to see if the files are where your code expects them to be?

hi, can you post the html version of your form you are including in your site? the problem might lie there instead of in your react code :thinking:

Thank for your reply guys.

So I made some modification in order to make to form work and not get back status 404.
It seems I needed to add this line in the form tag in order to make it work:

<input type="hidden" name="form-name" value="contact" />

Now when I submit the form It reloads and goes to the index page and all the CSS looks good, so I guess that was the issue?

1 Like

seems like it! glad it’s working now. :slight_smile: