Gatsby Form not working: form lives on a portal

[Madgeniusblink]

Hi, I am having issues getting this gatsby form to work.

The Form lives on a gatsby portal (another div) and it seems that netlify can not find it? the form doesnt not work at all. The worst part is that i am not getting any issues telling me the issues.

this is the website: https://eloquent-elion-ad9315.netlify.com/

my form code is this:

import React from "react"
import { SubmitButtom } from "../Button"
import { Form } from "./Form.styled"

const ContactForm = () => {
  return (
    <Form name="contact" method="post" data-netlify-honeypot="bot-field" data-netlify="true" >
        <input type="hidden" name="bot-field" />
        <input type="hidden" name="form-name" value="contact" />
        <label>
            <p>Name</p>
            <input type="text" name="name" placeholder='First and Last name' required/>
        </label>
        <label>
            <p>Business Name</p>
            <input type="text" placeholder='Business name or website link' required/>
        </label>
        <label>
            <p>Phone Number</p>
            <input type="text" name="number" placeholder='(305)-000-0000' />
        </label>
        <label>
            <p>Email</p>
            <input type="email" name="email" placeholder='Email address' required/>
        </label>
        <label>
            <p>Message</p>
            <textarea rows="4" cols="50" name="message" placeholder="In a few words tell me what you are looking for..." required/>
        </label>
        <SubmitButtom type="submit" >Submit</SubmitButtom>
    </Form>
  )
}

export default ContactForm

as you see nothing special… I believe its because the form is being called on click from a portal. any idea how to get netlify bot to read it?

[perry]

hi there, did you review this post already?

[Common Issue] Form problems, form debugging, 404 when submitting

Why use Forms? Please give these debugging tips a try before posting a new post! Forms are one of the most useful parts of modern websites because they allow us to capture input from our users. There are many ways to use forms: contact forms, sign-up forms. Because forms can take many … uh… forms, implementing one can become tricky. Here are some tried and true approaches to debugging common form errors and things to consider. Comments are welcome! Form-handling works automatically for HTML f…

[Madgeniusblink]

Hi @perry, I have not. Its the first time seeing that topic.
I will get back you if I do not find a solution.

Thank you!

[perry]

of course. if you search for “common issue forms” you will see a few other guides we have written.

If nothing helps, let us know and we’ll take another look.

[Madgeniusblink]

Hey @perry,

I have tried almost everything I event notice some issues with my form like a

tag shouldnt be in there instead i added a span, I also included htmlFor on label since i am using react.

but nothing.
here is the netlify link to the website: https://eloquent-elion-ad9315.netlify.com/ incase you might want to take a look at the html.

[luke]

@Madgeniusblink, I think found the root cause. There is no HTML version of the form in the deployed files.

It appears the HTML form is created at browse time by the site javascript. However, for Netlify to create the backend to accept form submissions a pure HTML version of the form must exist in the deployed HTML files. There is more information about this in our documentation here, quoted below:

Work with JavaScript-rendered forms

Our bots find your forms by parsing the HTML of your site when the build completes. This means that if you’re using JavaScript to render a form client-side, our bots won’t find it in the pre-built files. You can work around this by creating a hidden HTML form with the data-netlify="true" attribute and input fields with name attributes to match the inputs of your JavaScript-rendered form. You need to apply the same work around if you want to use our reCAPTCHA 2 integration, and create a div element in the hidden HTML with the data-netlify-recaptcha="true" attribute.

You can also find related tutorials on our blog:

• How to Integrate Netlify’s Form Handling in a React App
• How to Integrate Netlify forms in a Vue App

While the two articles are fairly framework-specific, the code demonstrates how to prerender forms when working with them in a web application.

To summarize, please make certain that an HTML version of the form is present in the deployed files as this is required for the post processing at Netlify to create the endpoint for accepting the form submissions.

If there are other questions about this, please let us know.

[Madgeniusblink]

Wow @luke,

Thank you! i will take a look at tutorials and give them a try and get back to you!

Thank you in advance!

[Madgeniusblink]

Hey luke, I am having issues submitting the form via Javascript.

take a look at what I have… I am following the same example thats on the netlify reactjs blog post…
any idea what would be going wrong? the error I get is a POST 404:

VM19:1 POST https://elegant-tereshkova-58e1d1.netlify.com/ 404

import React, { useState } from 'react';

import Container from ‘…/Container’;
import Box from ‘…/…/elements/Box’;

const encode = (data) => {
const formData = new FormData()
for (const key of Object.keys(data)) {
formData.append(key, data[key])
}
return formData
}

const Form = props => {
const [form, setForm] = useState({
name: ‘’,
email: ‘’,
subject: ‘’,
message: ‘’
})
const handleSubmit = e => {
e.preventDefault();
fetch(’/’, {
method: ‘POST’,
headers: { “Content-Type”: “application/x-www-form-urlencoded” },
body: encode({
‘form-name’: ‘contact’,
name: form.name,
email: form.email,
subject: form.subject,
message: form.message,
}),
})
.then(() => {
setForm({
name: ‘’,
email: ‘’,
subject: ‘’,
message: ‘’
})
alert(‘Success!’)
})
.catch(error => alert(error))
}

const handleChange = event => {
    const { value, name } = event.target
    setForm({...form, [name]: value})
}

return (
    <Container noGutter>
        <Box>
            <form onSubmit={handleSubmit} name="contact" method="post" data-netlify-recaptcha="true" data-netlify="true" data-netlify-honeypot="bot-field" >
                <fieldset>
                    <legend>{props.title}</legend>
                    <p>{props.text}</p>

                    <input type="hidden" name="form-name" value="contact" />
                    <div hidden>
                    <label>
                        Don’t fill this out:{' '}
                        <input name="bot-field" onChange={handleChange} />
                    </label>
                    </div>
        
                    <label htmlFor="name">Name</label><br />
                    <input id="name" type="text" name="name" value={form.name} onChange={handleChange} required/>

                    <label htmlFor="email">Email</label><br />
                    <input type="email" name="email" value={form.email} onChange={handleChange} required/>

                    <label htmlFor="subject">Subject</label><br />
                    <input id="subject" type="text" name="subject" value={form.subject} onChange={handleChange} required/>

                    <label htmlFor="message">Message</label><br />
                    <input id="message" type="textarea" name="message" value={form.message} onChange={handleChange} required/>

                </fieldset>
                <input type="submit" value="submit" />
            </form>
        </Box>
    </Container>
)

}
export default Form

[fool]

a 404 would mean that either:

1. you are posting to a PATH that doesn’t match the action= defined in your html form, or,
2. we didn’t process your form and you’d need to start by solving those, following the workflow here:

[Common Issue] Form problems, form debugging, 404 when submitting

Why use Forms? Please give these debugging tips a try before posting a new post! Forms are one of the most useful parts of modern websites because they allow us to capture input from our visitors. There are many ways to use forms: contact forms, sign-up forms. Because forms can take many … uh… forms, implementing one can become tricky. Here are some tried and true approaches to debugging common form errors and things to consider. Comments are welcome! Form-handling works automatically for HTML…

That’s where you must start; we can’t start there for you, since we can’t become familiar with your source code. Once you have the form recognized (you’ll see it in the dashboard) and accepting submissions (you’re posting to the right path with the right form-name attribute), then we’ll be happy to help with debugging after that!