In order for us to get detection with Netlify, we are suggesting putting an html file into the public folder which will allow Netlify to detect the form and create it online there. From there, we would still need to create our form within our actual route like routes/test.jsx
where we use our action to the HTML page but with the method POST
. This way we are still utilizing that page. We can also still incorporate things like honeypot detection.
- Create a static html file in your
public
folder. In this example we put it underpublic/some-form.html
. - Make sure the form has the
netlify
attribute, aname
, and anetlify-honeypot
with the appropriatebot-field
input. - Go into your
routes
folder and create the page with the form, in our case we did this underroutes/test.jsx
. We created our form component and made sure that it included an input with the nameform-name
and the value being the same as our static form'sname
is (e.g.some-name
). - Most importantly we want our
action
to point to the same route as our static page's form and itsmethod
beingpost
- We also need to make sure to add the input with the
bot-field
as well to make sure any users logged in could be caught through the detection.
<!-- Inside of public/some-form.html
<form netlify name="some-form" method="POST" hidden netlify-honeypot="bot-field">
<p style="clip:rect(0 0 0 0);clip-path: inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;">
<label>
Don’t fill this out if you’re human: <input name="bot-field" />
</label>
</p>
<textarea name="message" ></textarea>
<button type="submit">Submit</button>
</form>
// Inside `routes/test.jsx
// Custom component we wrote to abstract some logic and make it a tad more ergonomic
const NetlifyForm = ({ action, children, formName}) => {
return (
<form action={action} method="post">
<input type="hidden" name="form-name" value={formName} />
{/* Replace with hidden style class */}
<p style={{display: "none"}}>
<label>
Don’t fill this out if you’re human: <input name="bot-field" />
</label>
</p>
{children}
</form>
)
}
export default function TestPage() {
return (
<div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
<h1>Welcome to Remix</h1>
<NetlifyForm action="/some-form" formName="some-form">
<textarea name="message" />
<button type="submit">Submit</button>
</NetlifyForm>
</div>
);
}