Hi there,
I’m using Gatsby.js + React Bootstra to build a contact form with Netlify Form.
The submission works, but the result presented on Netlify Form seems weird, all the keys are the same and which is the text of my first label.
What I expect is
Name: Test name
Email: Test email
Company:
Phone:
Message: Test message
I’ve added name attribute in each tag (transformed from Bootstrap Form.Control) and checked correct key-value pairs with form submission (I use axios to submit a form).
form-name=contact&name=Test%20name&email=Test%20email&message=Test%20message
I also tried changing the text of my first label, and turned out all keys were changed to the same text.
Here’s my code
import React, { useState } from 'react';
import axios from 'axios';
import Form from 'react-bootstrap/Form';
import Col from 'react-bootstrap/Col';
const encode = (data) =>
Object.keys(data)
.map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`)
.join('&');
const ContactForm = () => {
const [formValues, setFormValues] = useState({});
const onSubmit = async (e) => {
e.preventDefault();
try {
await axios.post('/', encode({ 'form-name': 'contact', ...formValues }), {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
});
console.log('Submit successful');
} catch (err) {
console.log(err);
}
};
return (
<Form onSubmit={onSubmit} name="contact" data-netlify="true">
<Form.Row>
<Form.Group as={Col} md="6" controlId="validationCustom01">
<Form.Label>Name</Form.Label>
<Form.Control
name="name"
required
type="text"
placeholder="Your name"
onChange={(e) => {
setFormValues({ ...formValues, name: e.target.value });
}}
/>
</Form.Group>
<Form.Group as={Col} md="6" controlId="validationCustom01">
<Form.Label>Email</Form.Label>
<Form.Control
name="email"
required
type="text"
placeholder="myname@example.com"
onChange={(e) => {
setFormValues({ ...formValues, email: e.target.value });
}}
/>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col} md="6" controlId="validationCustom01">
<Form.Label>Company</Form.Label>
<Form.Control
name="company"
type="text"
onChange={(e) => {
setFormValues({ ...formValues, company: e.target.value });
}}
/>
</Form.Group>
<Form.Group as={Col} md="6" controlId="validationCustom01">
<Form.Label>Phone</Form.Label>
<Form.Control
name="phone"
type="text"
onChange={(e) => {
setFormValues({ ...formValues, phone: e.target.value });
}}
/>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col} controlId="validationCustom01">
<Form.Label>*Message</Form.Label>
<Form.Control
name="message"
required
type="text"
placeholder="Hi, there's something..."
onChange={(e) => {
setFormValues({ ...formValues, message: e.target.value });
}}
/>
</Form.Group>
</Form.Row>
<button
style={{
padding: '8px 40px',
background: '#333',
border: 'none',
color: '#f7f7f7',
fontWeight: 'bold',
letterSpacing: '.8px',
borderRadius: '3px',
}}
type="submit"
>
Submit
</button>
</Form>
);
};
export default ContactForm;
Any recommendations or comments would be helpful. Thanks!