diff options
| -rw-r--r-- | components/flexibleForm.js | 27 |
1 files changed, 22 insertions, 5 deletions
diff --git a/components/flexibleForm.js b/components/flexibleForm.js index f31dabe..22a907f 100644 --- a/components/flexibleForm.js +++ b/components/flexibleForm.js @@ -8,14 +8,31 @@ const FlexibleForm = ({ imgPos, data, route}) => { const handleSubmit = async (event) => { event.preventDefault(); + const formData = new FormData(event.target); try { - await new Promise((resolve) => setTimeout(resolve, 1000)); - router.push(route); + const response = await fetch(data.formAction, { + method: data.formMethod, + body: JSON.stringify(Object.fromEntries(formData)), + headers: { + 'Content-Type': 'application/json' + }, + }); + + if (!response.ok) { + throw new Error(response.text()); + } + + console.log('Form submitted successfully'); + if (route) { + router.push(route); + } } catch (error) { - console.error('Form submission error', error); + console.error('Error submitting form:', error); } } + + const renderImage = ( <div className={`flex items-center justify-center w-full lg:w-1/2 hidden lg:flex ${imgPos === "right" ? "lg:order-1" : ""}`}> <div> @@ -44,7 +61,7 @@ const FlexibleForm = ({ imgPos, data, route}) => { </p> </div> <div className="mt-5 sm:mx-auto sm:w-full sm:max-w-sm"> - <form className="space-y-3" action={data.formAction} method={data.formMethod}> + <form onSubmit={handleSubmit} id="testform" className="space-y-3" action={data.formAction} method={data.formMethod}> {data.formFields.map((field, index) => ( <div key={index}> <label htmlFor={field.name} className="block text-sm font-medium leading-6 text-gray-900">{field.label}</label> @@ -61,7 +78,7 @@ const FlexibleForm = ({ imgPos, data, route}) => { </div> ))} <div> - <button type="submit" onClick={handleSubmit} className="flex w-full justify-center rounded-md bg-indigo-600 px-10 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"> + <button type="submit" className="flex w-full justify-center rounded-md bg-indigo-600 px-10 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"> {data.ctaText || "Submit"} </button> </div> |