Website: www.tecniastructure.com
I have created a netlify form, and there don’t appear to be any problems in the build log, however when I submit the form, it does not create a submission to netlify.
I have pasted the full code of this form below:
import React, {useState} from 'react';
import Style from './style';
import SubmitButton from '../../submitButton';
import { Alert,Form } from 'react-bootstrap';
import useForm from "./useForm";
import validate from './LoginFormValidationRules';
import {navigate} from 'gatsby';
const CatalogDownloadForm = ({btn}) => {
const {
values,
errors,
handleChange,
handleSubmit,
} = useForm(send, validate);
const[showSuccess,setShowSuccess]=useState(false)
const[showDanger,setShowDanger]=useState(false)
// const [formData,setFormData] = useState({})
function encode(data) {
return Object.keys(data)
.map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
.join("&")
}
function send() {
console.log('No errors, submit callback called!');
console.log(values);
fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: encode({ "form-name": "catalog", ...values })
})
.then(() => {
setShowSuccess(true)
// alert("Success!")
// navigate('/');
}
)
.catch(error => setShowDanger(true));
}
// const {imageUrl,imageAlt} = data
return (
<div>
<Alert show={showSuccess} variant="success">Thank you for your enquiry, we will reach out within 24 hours.</Alert>
<Alert show={showDanger} variant="danger">There was an error in sending your message. Please try again.</Alert>
<Style >
<div className="form-contact">
<Form name="catalog" method="post" data-netlify="true" data-netlify-honeypot="bot-field" noValidate onSubmit={handleSubmit} className="contact-us">
<input type="hidden" name="form-name" value="catalog" />
<Form.Group controlId="formBasicName">
<Form.Label>Name *</Form.Label>
<Form.Control type="text" placeholder="Enter Your Name" name="name" className={`input ${errors.name && 'is-danger'}`} onChange={handleChange} value={values.name || ''} required />
{errors.name && (
<p className="help is-danger">{errors.name}</p>
)}
</Form.Group>
{/* <Form.Control.Feedback type="invalid">
Please enter your Name.
</Form.Control.Feedback> */}
<Form.Group controlId="formBasicEmail">
<Form.Label>E-Mail *</Form.Label>
<Form.Control type="email" placeholder="Enter Your Mail" name="email" className={`input ${errors.email && 'is-danger'}`} value={values.email || ''} onChange={handleChange} required />
{errors.email && (
<p className="help is-danger">{errors.email}</p>
)}
{/* <Form.Control.Feedback type="invalid">
Please provide a valid Email.
</Form.Control.Feedback> */}
</Form.Group>
<Form.Group controlId="formBasicJob">
<Form.Label>Job Title *</Form.Label>
<Form.Control type="text" placeholder="Enter Your Job Title" name="job" className={`input ${errors.job && 'is-danger'}`} onChange={handleChange} value={values.job || ''} required />
{errors.job && (
<p className="help is-danger">{errors.job}</p>
)}
</Form.Group>
<Form.Group controlId="formBasicCompany">
<Form.Label>Company *</Form.Label>
<Form.Control type="text" placeholder="Enter Your Company Name" name="company" className={`input ${errors.company && 'is-danger'}`} onChange={handleChange} value={values.company || ''} required />
{errors.company && (
<p className="help is-danger">{errors.company}</p>
)}
</Form.Group>
{/* <Form.Group controlId="formBasicProduct">
<Form.Label>Product</Form.Label>
<Form.Control as="select" name="product" multiple className={`input ${errors.product && 'is-danger'}`} onChange={handleChange} value={values.product || ''} required>
<option>mehri1</option>
<option>mehri2</option>
<option>mehri3</option>
<option>mehri4</option>
<option>mehri5</option>
</Form.Control>
</Form.Group> */}
<div className="btn" >
<SubmitButton data={btn}></SubmitButton>
</div>
</Form>
</div>
</Style>
</div>
)
};
export default CatalogDownloadForm;