cicdhosting.com/.hta_slug/contact-us.php

<?php 
    require_once('.htac_header.php');
    require_once('.htac_nav.php');
?>
 <div>
    <section class="container-fluid bg-gradient-to-t from-white  to-[#05b3a450]">
        <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">
            <h1 class="text-3xl lg:text-4xl font-bold">Get in Touch with CICD Hosting!</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 CICD Hosting – your gateway to hosting excellence! We welcome your inquiries, feedback, and partnership opportunities. Get in touch with us to explore how we can optimize your web hosting experience and support your digital endeavors.</h3>
            <!-- <div class="flex flex-row place-content-between">
                <a href="#" class="text-sm xl:text-lg rounded-lg shadow-2xl text-[#3084b5] px-4 md:px-8 p-3 border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">Get in Touch</a>
            </div> -->
            </div>
            <button class="bg-black px-4 py-2 rounded-lg text-blue-50 hover:translate-x-2 font-bold text-lg hover:shadow-2xl duration-700 w-fit">See your Best Deal</button>
        </div>
        <div class="flex lg:w-full border-b-[8px] border-[#1b3b4b] lg:pt-16 place-items-center justify-center">
            <img src="/img/3.png" alt="">
        </div>
        </div>
    </section>
    <section style="max-width: 600px; width: 100%; margin: auto;" class="container mx-auto px-4 mt-16">
        <div style="display: flex; flex-direction: column; justify-content: center; place-items: center; padding: 10px;">
            <form id="contactForm" style="width: 100%; box-shadow: 0px 0px 10px 0px #fff; border-radius: 6px; padding: 10px;">
                <p style="color: #FFF; font-size: 30px; font-weight: bold; text-align: center;">Get in Touch</p>
                <div id="formSection">
                    <div class="form-group mb-1">
                        <label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Name<span class=text-red-500>*</span></label>
                        <input id="name" type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" required />
                    </div>
                    <div class="form-group mb-1">
                        <label for="exampleInputEmail" class="form-label inline-block mb-2 text-gray-700">Email<span class=text-red-500>*</span></label>
                        <input id="email" type="email" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" required />
                    </div>
                    <div class="form-group mb-1">
                        <label for="exampleInputPhoneNumber" class="form-label inline-block mb-2 text-gray-700">Phone Number<span class=text-red-500>*</span></label>
                        <input id="phone" type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" required />
                    </div>
                    <div class="form-group mb-1">
                        <label for="exampleInputDescription" class="form-label inline-block mb-2 text-gray-700">Write your Query....</label>
                        <textarea id="content" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" rows="7" required></textarea>
                    </div>
                    <div style="float: right;">
                        <input type="submit" value="Submit" style="padding: 10px 20px 10px 20px; background-color: #a7a7a7; color: #fff; border-radius: 6px;" />
                    </div>
                </div>
                <div id="thankYouSection" style="display: none;">
                    <h1 class="text-center p-16 py-32 text-3xl text-color-1">Thank You</h1>
                </div>
            </form>
        </div>
    </section>
</div>
<script>
    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('content');

      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 = new FormData();
        formData.append('name', username);
        formData.append('phone', userPhone);
        formData.append('email', userEmail);
        formData.append('msg', 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://apisp.dev2.cicdhosting.com/api/v2/storeFormData/?action=save';
        try {
          const response = await fetch(url, {
            method: 'POST',
            body: 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>
<style>
    .form-group{
        display: flex;
        flex-direction: column;
    }
</style>