I have a React Form on Site ID: 7f6feee1-3018-4936-b9e8-5649a172832a
The form is submitted and received on Netlify side
But I get only the first value fullName
Any idea whats wrong?
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { toast } from "sonner";
const ModelForm = ({ isOpen, onClose }) => {
const { t, i18n } = useTranslation();
const [isLoading, setIsLoading] = useState(false);
const [formData, setFormData] = useState({
fullName: '',
contact: '',
experience: '',
portfolioLink: '',
});
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData({
...formData,
[name]: value,
});
};
const encode = (data) => {
return Object.keys(data)
.map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
.join("&");
};
const handleSubmit = async (e) => {
e.preventDefault();
const languageCode = i18n.language;
// Create a URLSearchParams object to handle form data
const formFields = {
"form-name": "contact",
fullName: formData.fullName,
contact: formData.contact,
experience: formData.experience,
portfolioLink: formData.portfolioLink,
};
try {
setIsLoading(true);
console.table(formFields)
console.log(formFields.toString())
await fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: encode(formFields),
});
toast.success(t('modelForm.successMessage'));
onClose();
} catch (error) {
console.error('Error:', error);
toast.error(t('modelForm.errorMessage'));
} finally {
setIsLoading(false);
}
};
/*
try {
// Submit the form data to the server
setIsLoading(true)
const response = await fetch('/', {
method: 'POST',
body: data,
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
// Handle success
toast.success(t('modelForm.successMessage'));
onClose();
} catch (error) {
console.error('Error:', error);
toast.error(t('modelForm.errorMessage'));
} finally {
setIsLoading(false);
}
*/
return (
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="sm:max-w-[500px]">
<DialogHeader>
<DialogTitle className="text-2xl font-bold">{t('modelForm.title')}</DialogTitle>
<DialogDescription>
{t('modelForm.description')}
</DialogDescription>
</DialogHeader>
<form
name="contact"
method="POST"
data-netlify="true"
netlify-honeypot="bot-field"
className="space-y-6"
onSubmit={handleSubmit}
>
{/* Hidden field for Netlify form handling */}
<input type="hidden" name="form-name" value="contact" />
{/* Honeypot field for spam protection */}
<div className="hidden">
<label>
Don't fill this out if you're human:
<input name="bot-field" />
</label>
</div>
{/* Full Name field */}
<div>
<Label htmlFor="fullName">{t('modelForm.fullNameLabel')}</Label>
<Input
id="fullName"
name="fullName"
value={formData.fullName}
onChange={handleInputChange}
required
/>
</div>
{/* Contact field */}
<div>
<Label htmlFor="contact">{t('modelForm.contactLabel')}</Label>
<Input
id="contact"
name="contact"
value={formData.contact}
onChange={handleInputChange}
required
/>
</div>
{/* Experience field */}
<div>
<Label htmlFor="experience">{t('modelForm.experienceLabel')}</Label>
<Input
id="experience"
name="experience"
value={formData.experience}
onChange={handleInputChange}
required
/>
</div>
{/* Portfolio Link field */}
<div>
<Label htmlFor="portfolioLink">{t('modelForm.portfolioLinkLabel')}</Label>
<Input
id="portfolioLink"
name="portfolioLink"
value={formData.portfolioLink}
onChange={handleInputChange}
/>
</div>
{/* Submit button */}
<Button type="submit" className="w-full" disabled={isLoading}>
{isLoading ? t('modelForm.sendingButton') : t('modelForm.submitButton')}
</Button>
</form>
</DialogContent>
</Dialog>
);
};
export default ModelForm;
