I recently created a Netlify application, with Gatsby JS and a Netlify form. I have the following as my form field:
<form
action="#"
method="post"
name="contact"
className="footer-form"
data-netlify="true">
<input
id="name"
type="text"
name="name"
placeholder="Name"
value={this.state.name}
className="footer-form__input"
onChange={e => this.setState({ name: e.target.value })}
/>
<input
id="email"
name="name"
type="email"
className="footer-form__input"
value={this.state.email}
onChange={e => this.setState({ email: e.target.value })}
placeholder="Email address"
/>
<textarea
id="message"
name="message"
className="footer-form__input footer-form__textarea"
value={this.state.message}
onChange={e => this.setState({ message: e.target.value })}
placeholder="Your message"
/>
<button type="submit" className="footer-form__button">
Submit
</button>
</form>
In development, the email field shows as planned. But in production, specifically on the netlify system, only the name and the message field shows.
Form submission works fine in production by the way, showing only the "name" and the "message" inside the Netlify dashboard.
Could there be a reason why this is happening?
The first 2 of your inputs have the same name:
<input
id="name"
type="text"
name="name"
...
/>
<input
id="email"
name="name"
type="email"
...
/>
Netlify may rely on the field name to differ between different inputs. Would you try fixing that and see if the problem still occurs?
Related
I'm making a form which accepts some details & can only be accessed when you are logged in.
Here is a video to the problem i have faced. Please help me where i am going wrong. The form works perfectly for mobile view but not for normal web view. I think so there is something wrong with the my state management.
https://drive.google.com/file/d/1YAEPXTe8dZdR0xcKFhSDPqDLIkLDVQTt/view?usp=share_link
<form className='login-form addAdmin'>
<h1>Add Health Partner</h1>
<input
type="text"
placeholder="Full Name"
onChange={e => setName(e.target.value)}
required
/>
<input
type="email"
placeholder="Email"
onChange={e => setEmail(e.target.value)}
required
/>
<input
type="number"
placeholder="Mobile number"
onChange={e => setNumber(e.target.value)}
required
/>
<input
type="password"
placeholder="Password"
onChange={e => setPassword(e.target.value)}
required
/>
<input
type="text"
placeholder="Address"
onChange={e => setAddress(e.target.value)}
required
/>
<input
type="text"
placeholder="Specialization"
onChange={e => setSpecialization(e.target.value)}
required
/>
<input
type="text"
placeholder="Experience"
onChange={e => setExperience(e.target.value)}
required
/>
<button type='submit' onClick={e=>handleSubmit(e)}>
Add
</button>
</form>
Using create react app with react hook form and reactstrap. It throws the above error. got few answers like it is because of the missing name attribute in the controller. I am not using a controller. It occurs only after taking a build.
Below you could find the full code.
const { register, handleSubmit, errors } = useForm({
mode: "onSubmit",
reValidateMode: "onBlur",
});
<Form className="Login" onSubmit={handleSubmit(submitHandler)}>
<h1 className="mb-4">Log in</h1>
<FormGroup className={errors.email ? "mb-2" : "mb-4"}>
<Label for="email" hidden>
Email
</Label>
<Input
type="text"
data-test="component-field"
name="email"
innerRef={register({ required: true })}
id="email"
placeholder="Email"
defaultValue={email}
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
{errors.email && (
<span className="text-danger mb-1 p-1">This field is required</span>
)}
</FormGroup>{" "}
<FormGroup className={errors.password ? "mb-2" : "mb-4"}>
<Label for="password" hidden>
Password
</Label>
<Input
type="password"
data-test="component-field"
name="password"
innerRef={register({ required: true })}
defaultValue={password}
id="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
ref={register({ required: true })}
/>
{errors.password && (
<span className="text-danger mb-1 p-1">This field is required</span>
)}
</FormGroup>{" "}
<Button size="sm" className="wb-primary-button font-weight-bold">
Login
`</Button>`
got an answer from GitHub discussion from its author. since I used reactstrap library, I should use innerRef instead of ref that throws an error. In second Input element removed ref then it worked fine.
I am having trouble submitting my Contact Page through using Netlify-Forms, I am getting a 404 error.
I have the following form :-
<form name="Portfolio_Contact"
method="POST"
data-netlify="true"
data-netlify-honeypot="bot-field"
action="/thank-you">
<div className="form-group">
<input
type="text"
name="name"
placeholder="name"
className="form-control"
/>
<input
type="email"
placeholder="email"
name="email"
className="form-control"
/>
<textarea
name="message"
rows="5"
placeholder="message"
className="form-control"
></textarea>
<div data-netlify-recaptcha="true"></div>
</div>
<button type="submit" className="submit-btn btn">
send me your message
</button>
</form>
And when I submit it, I am first getting a 404 error, and then getting my thank-you page as expected.
Am I doing something wrong? I can see my “Portfolio_Contact” in the Forms section.
Thanks for your help and time.
You have a reCAPTCHA set but your form is not expecting it since is not defined in your <form> tag. Just add:
<form name="Portfolio_Contact"
method="POST"
data-netlify="true"
data-netlify-honeypot="bot-field"
data-netlify-recaptcha="true"
action="/thank-you">
Spot the data-netlify-recaptcha="true". You can find more information in Netlify documentation for reCAPTCHA 2.
I am getting this in the network :- Referrer Policy: strict-origin-when-cross-origin
Besides of this configuration on the <form> tag, you need to set up your POST action configuration. Netlify is kind of weird in their responses, a 404 doesn't mean that your form doesn't exist, it means that the request failed. I usually apply the exact <form> configuration that I've posted but I add a custom submit handle function which sets the request configurations:
<form name="Portfolio_Contact"
method="POST"
data-netlify="true"
data-netlify-honeypot="bot-field"
data-netlify-recaptcha="true"
action="/thank-you">
<div className="form-group">
<input
type="text"
name="name"
placeholder="name"
className="form-control"
/>
<input
type="email"
placeholder="email"
name="email"
className="form-control"
/>
<textarea
name="message"
rows="5"
placeholder="message"
className="form-control"
></textarea>
<div data-netlify-recaptcha="true"></div>
</div>
<button type="submit" className="submit-btn btn" onClick={handleSubmit}>
send me your message
</button>
</form>
Your handleSubmit function:
const handleSubmit = event => {
event.preventDefault();
// do your verifications and checks
if(!verified) return false
const REQUEST_PARAMETERS = {
method: `POST`,
headers: { 'Content-Type': `application/x-www-form-urlencoded` },
body: encode({ ...data }), //your data here. Needs to have your form-name attribute set
};
fetch(`/`, REQUEST_PARAMETERS)
.then(() => {
console.log(`OK`);
})
.catch(error => alert(error));
};
Note: your request won't work in your local environment
This configuration is important because sets the headers of the request, what is failing in your sample.
You can check for a sample in this DEV article.
I am a beginner in React JS, I created a login form and after click on login button then username and password is showing in the URL. I don't want to show this in URL. How to solve this?
Here is my code:
<form className="loginform" onSubmit={this.ValidateUser}>
<input
className="form-control"
type="text"
placeholder="Email"
name="email"
autocomplete="off"
value={this.state.email}
onChange={(e) => this.changeEmailHandler(e.target.value)}
/>
<input
className="form-control"
type="password"
placeholder="Password"
name="password"
value={this.state.password}
onChange={(e) => this.changePasswordHandler(e.target.value)}
/>
<input
type="submit"
id="kt_login_signin_submit"
className="btn btn-brand"
value="Sign In"
/>
</form>
Adding e.preventDefault() in ValidateUser method should do the trick.
Edit-01:
already pointed out in the comments.
I'm converting a project to use Semantic-UI-React and a form is triggering on every change. The old form looked like this and worked as intended:
<div className="entryForm">
<form onSubmit={this.handleSubmit}>
<span className="formLabel">Location:</span>
<input type='text' name="location" placeholder="Location"
onChange={this.handleChange} autoComplete="off" /><br/>
Date Activity:
<input type='text' name="activity" placeholder="Activity"
onChange={this.handleChange} autoComplete="off"/><br/>
Cuisine:
<input type='text' name="cuisine" placeholder="Cuisine"
onChange={this.handleChange} autoComplete="off"/>
<button type="submit" value="submit" hidden="hidden"/>
</form></div>
The Semantic form looks like this and displays both SUBMIT and HELP on every change in the form:
<Form onSubmit={console.log("SUBMIT")}
onChange={console.log("HELP")}>
<Form.Field inline>
<label>Location:</label>
<Input name='location'
placeholder='Enter a neighborhood here'
onChange={this.handleChange}
autoComplete="off"/>
</Form.Field>
<Form.Field inline>
<label>Activity:</label>
<Input name='activity'
placeholder='Enter a a fun activity'
onChange={this.handleChange}
autoComplete="off"/>
</Form.Field>
<Form.Field inline>
<label>Cuisine:</label>
<Input name='cuisine'
placeholder='What do you want to eat'
onChange={this.handleChange}
autoComplete="off"/>
</Form.Field>
</Form>
What's going on?
onSubmit={(() => console.log("SUBMIT"))}
That fixed it as well as adding a submit button got it working