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.