barta-india.in/src/pages/contact.astro

---
import Layout from "../layouts/Layout.astro";
---
<Layout title="Get in Touch | Barta-India">
    <main>
        <div class="">
            <section class="">
              <div class="container mx-auto px-4 flex flex-col lg:flex-row place-content-between space-x-4">
                <div class="flex flex-col justify-center w-full">
                  <div class="flex flex-col w-full md:mt-20">
                    <h1 class="text-3xl lg:text-4xl font-bold">Get in Touch with Barta News Portal</h1>
                    <!-- <h2 class="text-2xl md:text-3xl text-[#3084b5]">Connect with CICD Hosting: Let's Shape the Future of Your Web Presence Together</h2> -->
                      <h3 class="text-xl text-justify pb-4">Feel free to drop us a line at Barta</h3>
                </div>
            </section>
            <!-- items-center max-w-xl -->
            <section class="container mx-auto px-8 md:mt-16 max-w-xl border-2 shadow-xl rounded-xl">
                <!-- <div class="p-6 text-xl"> -->
                  <h3 class="border-b-4 border-[#780a0a] text-3xl mb-4 font-bold pt-10">Get In Touch</h3>
                  <form method="post" id="contactForm" class="flex flex-col ">
                    <div id="formSection" class="flex flex-col space-y-4 justify-center place-items-center">
                      <div class="flex flex-col w-full">
                        <label for="name">Name<span class="text-red-500">*</span></label>
                        <input id="name" name="name" class="border-2 rounded-md py-2 border-gray-400 focus:outline-none focus:border-2 focus:border-[#780a0a]" type="text" required/>
                      </div>
                      <div class="flex flex-col w-full">
                        <label for="phone">phone<span class="text-red-500">*</span></label>
                        <input id="phone" name="phone" class="border-2 rounded-md py-2 border-gray-400 focus:outline-none focus:border-2 focus:border-[#780a0a]" type="text" required/>
                      </div>
                      <div class="flex flex-col w-full">
                        <label for="email">email<span class="text-red-500">*</span></label>
                        <input id="email" name="email" class="border-2 rounded-md py-2 border-gray-400 focus:outline-none focus:border-2 focus:border-[#780a0a]" type="email" required/>
                      </div>
                      <div class="flex flex-col w-full      ">
                        <label for="message">Write your message...</label>
                        <textarea rows="8" id="message" name="message" class="border-2 rounded-md py-2 border-gray-400 focus:outline-none focus:border-2 focus:border-[#780a0a]"></textarea>
                      </div>
                      <div class="flex flex-col w-full pb-6">
                        <input class="bg-[#780a0a] text-white py-2 px-6 rounded-lg cursor-pointer" type="submit" value="Submit" />
                      </div>
                    </div>
                    <div id="thankYouSection" style="display: none;">
                      <p>Thank You!</p>
                    </div>
                  </form>
                <!-- </div> -->
            </section>
        </div>
    </main> 
</Layout>

<script is:inline>
    document.addEventListener('DOMContentLoaded', function () {
      const contactForm = document.getElementById('contactForm');
      const formSection = document.getElementById('formSection');
      const thankYouSection = document.getElementById('thankYouSection');
      const nameInput = document.getElementById('name');
      const emailInput = document.getElementById('email');
      const phoneInput = document.getElementById('phone');
      const contentInput = document.getElementById('message');

      contactForm.addEventListener('submit', async function (event) {
        event.preventDefault();

        let username = nameInput.value; let userPhone = phoneInput.value; let userEmail = emailInput.value; let userMsg = contentInput.value; 
       let formData = {
        'name' : username,
        'phone': userPhone,
        'email' : userEmail,
        'message' : userMsg
       }
        // fetch('https://apisp.dev2.cicdhosting.com/api/v2/storeFormData/?action=save',{
        //   method: 'POST',
        //   body: formData,
        // })
        // .then(response =>{
        //   if(response.ok){
        //       console.log('Form Submitted')
        //       formSection.style.display = 'none';
        //       thankYouSection.style.display = 'block';
        //   } else{
        //     console.error('an error occoured')
        //   }
        // })

        console.log("Form Data",formData, username, userPhone, userEmail, userMsg)

        const url = 'https://api7.siliconpin.com/items/barta_contact';
        try {
          const response = await fetch(url, {
            method: 'POST',
            headers: {
              'Content-Type' : 'application/json'
            },
            body:JSON.stringify(formData),
          });
          if (response.ok) {
            console.log('Form Submitted')
            formSection.style.display = 'none';
            thankYouSection.style.display = 'block';
            console.log('Form data submitted successfully', response);
          } else {
            console.error('Failed to submit form data');
          }
        } catch (error) {
          console.error('An error occurred:', error);
        }
      });
    });
  </script>