Contact with google form

Author: ekrishnachaitanya2004

src/pages/[...lang]/contact.astro

@@ -16,7 +16,6 @@ export function getStaticPaths() {
 const { lang } = Astro.params;
 const contact = await getListPage("contact", lang as keyof ContentEntryMap);
 
-const { contact_form_action }: { contact_form_action: string } = config.params;
 const { title, description, meta_title, image } = contact[0].data;
 
 const {
@@ -39,18 +38,24 @@ const {
     <div class="container">
       <div class="row">
         <div class="mx-auto md:col-10 lg:col-6">
-          <form action={contact_form_action} method="POST">
+          <form 
+            action="https://docs.google.com/forms/d/e/1FAIpQLSdKLON3GrQN1OrGxmj0S3HCKeiVg-MjmeqDHLufys7CzkDm1g/formResponse" 
+            method="POST" 
+            target="_blank"
+            onsubmit="return window.submitGoogleForm(this);"
+          >
             <div class="mb-6">
               <label for="name" class="form-label">
                 {full_name}
                 <span class="text-red-500">*</span>
               </label>
               <input
                 id="name"
-                name="name"
+                name="entry.713430944"
                 class="form-input"
                 placeholder="Krishna Chaitanya Ethamukkala"
                 type="text"
+                required
               />
             </div>
             <div class="mb-6">
@@ -60,10 +65,11 @@ const {
               </label>
               <input
                 id="email"
-                name="email"
+                name="entry.1244225098"
                 class="form-input"
                 placeholder="[email protected]"
                 type="email"
+                required
               />
             </div>
             <div class="mb-6">
@@ -73,13 +79,38 @@ const {
               </label>
               <textarea
                 id="message"
-                name="message"
+                name="entry.618640668"
                 class="form-input"
                 placeholder={contact_message_placeholder}
-                rows="8"></textarea>
+                rows="8"
+                required
+              ></textarea>
+            </div>
+            <div id="form-status" class="mb-6 hidden">
+              <p class="text-success">Thank you for your message! We'll get back to you soon.</p>
             </div>
             <button type="submit" class="btn btn-primary">{submit}</button>
           </form>
+
+          <script is:inline>
+            window.submitGoogleForm = function(form) {
+              const formData = new FormData(form);
+              fetch(form.action, {
+                method: 'POST',
+                body: formData,
+                mode: 'no-cors'
+              })
+              .then(() => {
+                form.reset();
+                document.getElementById('form-status').classList.remove('hidden');
+                setTimeout(() => {
+                  document.getElementById('form-status').classList.add('hidden');
+                }, 5000);
+              })
+              .catch(error => console.error('Error:', error));
+              return false;
+            };
+          </script>
         </div>
       </div>
     </div>