add this : </script>

<script type="application/javascript">


$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('#toTopBtn').fadeIn();
} else {
$('#toTopBtn').fadeOut();
}
});

$('#toTopBtn').click(function() {
$("html, body").animate({
scrollTop: 0
}, 1000);
return false;
});
});

$(document).ready(function(){

function getUrlVars()
{
let vars = [], hash;
let hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(let i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}

$('#fail_email').hide();
$('#success_email').hide();

let result = getUrlVars()["result"];

if(typeof(result) != 'undefined'){

if(result.includes('success'))
{
$('#success_email').show();
$('#fail_email').hide();
}
else
{
$('#fail_email').show();
$('#success_email').hide();
}

}


});

function removeQuery() {

let url = window.location.href;

let a = url.indexOf("?");
let b = url.substring(a);
let c = url.replace(b,"");
window.location.href = c;

}


</script>

<script src="https://www.google.com/recaptcha/api.js?render=6LfWu2YcAAAAAPooSewjuw82sSxhAdh657M4VvzT"></script>

<script>
grecaptcha.ready(function() {

grecaptcha.execute('6LfWu2YcAAAAAPooSewjuw82sSxhAdh657M4VvzT', {action:'validate_captcha'})
.then(function(token) {
// add token value to form
document.getElementById('g-recaptcha-response').value = token;
});

});
</script>


<div class="wrap mcb-wrap one-third clearfix" style="border-radius: 15px;box-shadow: 0px 20px 20px 20px rgb(0 0 0/30%);padding: 1rem;">
<h2 style="font-weight: bold;text-align: center;">Get to know more on VLC Magento Connector</h2>

<div role="form" class="wpcf7" id="wpcf7-f35-p16-o1" lang="en-US" dir="ltr" >
<div class="screen-reader-response"></div>

<div id="contactWrapper" class="animate" data-anim-type="fadeInLeft" >
<form id="contactform" method="post" action="./magento_connector_landing_page.php" enctype="multipart/form-data" >

<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">g-recaptcha
<input type="hidden" name="action" value="validate_captcha">

<div class="column one">
<span>First Name <span style="color:red;">*</span></span>
<input class="case_study_bg_color" type="text" name="first_name" id="first_name" required />
</div>

<div class="column one">
<span>Last Name <span style="color:red;">*</span></span>
<input class="case_study_bg_color" type="text" name="last_name" id="last_name" required />
</div>

<div class="column one">
<span>Organization Name<span style="color:red;">*</span></span>
<input class="case_study_bg_color" type="text" name="company" id="company" required />
</div>

<div class="column one">
<p id="email_error" style="color:red;">Please enter valid email.</p>
<span>Business EMail <span style="color:red;">*</span></span>
<input class="case_study_bg_color" type="email" name="email" id="email" required/>
</div>

<div class="column one">
<span>Business Phone Number <span style="color:red;">*</span></span>
<input class="case_study_bg_color" type="text" name="phone_number" id="phone_number" required />
</div>

<div class="column one">
<span>Note <span style="color:red;">*</span></span>
<textarea class="case_study_bg_color" name="note" id="note" rows="10" required></textarea>
</div>

<div class="column one">
Our privacy practices, and how we are committed to protecting and respecting
your privacy, please review our <a target="_blank" href="./privacy.html">Privacy Policy</a>.
</div>
<div class="column one"></div>
<div class="column one">
By clicking submit below, you consent to allow VLC Solutions to store and process the
personal information submitted above to provide you the content requested.
</div>
<div class="column one"></div>
<div class="column one">
<input style="font-size: 26px;" type="submit" value="Get in Touch" id="submit" />
</div>


</form>
</div>
</div>

</div>

<!--End-->

</div>
</div>

</div>

index.html

@@ -370,15 +370,69 @@
           <p class="text-gray-600">Analyze trends, track sales, and manage inventory with business-critical insights.</p>
         </div>
       </div>
-      
       <div class="bg-[var(--vlc-tint)] p-8 md:p-12 rounded-xl" data-aos="fade-up">
-        <div class="max-w-4xl mx-auto text-center">
-          <h3 class="text-2xl md:text-3xl font-bold text-[var(--vlc-navy)] mb-6">Improve Your Online Store's Operations with Magento Integration</h3>
-          <p class="text-lg text-gray-600 mb-8">Enhance efficiency and scalability by integrating Magento with Microsoft Dynamics 365 Business Central for seamless e-commerce and ERP operations.</p>
-          <a href="./magento-connector-with-business-central.html" class="btn-accent inline-block px-6 py-3 rounded-md text-lg font-semibold">Get to know more on VLC Magento Connector</a>
+        <div class="max-w-4xl mx-auto">
+          <h3 class="text-2xl md:text-3xl font-bold text-[var(--vlc-navy)] mb-6 text-center">Improve Your Online Store's Operations with Magento Integration</h3>
+          <p class="text-lg text-gray-600 mb-8 text-center">Enhance efficiency and scalability by integrating Magento with Microsoft Dynamics 365 Business Central for seamless e-commerce and ERP operations.</p>
+          
+          <div class="bg-white rounded-xl shadow-xl p-8 mx-auto max-w-2xl">
+            <h2 class="text-xl font-bold text-center mb-6">Get to know more on VLC Magento Connector</h2>
+            
+            <form id="contactform" method="post" action="./magento_connector_landing_page.php" enctype="multipart/form-data">
+              <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
+              <input type="hidden" name="action" value="validate_captcha">
+
+              <div class="grid md:grid-cols-2 gap-4 mb-4">
+                <div>
+                  <label class="block text-sm font-medium mb-1">First Name <span class="text-red-500">*</span></label>
+                  <input type="text" name="first_name" id="first_name" required 
+                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--vlc-navy)]">
+                </div>
+                <div>
+                  <label class="block text-sm font-medium mb-1">Last Name <span class="text-red-500">*</span></label>
+                  <input type="text" name="last_name" id="last_name" required 
+                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--vlc-navy)]">
+                </div>
+              </div>
+
+              <div class="mb-4">
+                <label class="block text-sm font-medium mb-1">Organization Name <span class="text-red-500">*</span></label>
+                <input type="text" name="company" id="company" required 
+                  class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--vlc-navy)]">
+              </div>
+
+              <div class="mb-4">
+                <label class="block text-sm font-medium mb-1">Business Email <span class="text-red-500">*</span></label>
+                <input type="email" name="email" id="email" required 
+                  class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--vlc-navy)]">
+                <p id="email_error" class="text-red-500 text-sm hidden">Please enter valid email.</p>
+              </div>
+
+              <div class="mb-4">
+                <label class="block text-sm font-medium mb-1">Business Phone Number <span class="text-red-500">*</span></label>
+                <input type="text" name="phone_number" id="phone_number" required 
+                  class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--vlc-navy)]">
+              </div>
+
+              <div class="mb-4">
+                <label class="block text-sm font-medium mb-1">Note <span class="text-red-500">*</span></label>
+                <textarea name="note" id="note" rows="4" required 
+                  class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--vlc-navy)]"></textarea>
+              </div>
+
+              <div class="text-xs mb-4">
+                <p>Our privacy practices, and how we are committed to protecting and respecting your privacy, please review our <a href="./privacy.html" class="text-[var(--vlc-navy)] hover:underline" target="_blank">Privacy Policy</a>.</p>
+                <p class="mt-2">By clicking submit below, you consent to allow VLC Solutions to store and process the personal information submitted above to provide you the content requested.</p>
+              </div>
+
+              <button type="submit" class="w-full bg-[var(--vlc-navy)] hover:bg-[var(--vlc-navy-700)] text-white font-bold py-3 px-4 rounded-md transition duration-300">
+                Get in Touch
+              </button>
+            </form>
+          </div>
         </div>
       </div>
-    </div>
+</div>
   </section>
 <!-- FOOTER -->
   <footer class="bg-[var(--vlc-navy)] text-white pt-14 pb-8">
@@ -446,11 +500,62 @@
       </div>
 </div>
   </footer>
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <script>
+  // Back to top button functionality
+  $(document).ready(function() {
+    // Create back to top button
+    $('body').append('<button id="toTopBtn" class="fixed bottom-8 right-8 bg-[var(--vlc-navy)] text-white w-12 h-12 rounded-full shadow-lg opacity-0 transition-opacity duration-300 flex items-center justify-center"><i data-feather="arrow-up"></i></button>');
+    feather.replace();
+    
+    $(window).scroll(function() {
+      if ($(this).scrollTop() > 50) {
+        $('#toTopBtn').fadeIn();
+      } else {
+        $('#toTopBtn').fadeOut();
+      }
+    });
+
+    $('#toTopBtn').click(function() {
+      $("html, body").animate({
+        scrollTop: 0
+      }, 1000);
+      return false;
+    });
+
+    // Form handling
+    function getUrlVars() {
+      let vars = [], hash;
+      let hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
+      for(let i = 0; i < hashes.length; i++) {
+        hash = hashes[i].split('=');
+        vars.push(hash[0]);
+        vars[hash[0]] = hash[1];
+      }
+      return vars;
+    }
+
+    $('#email_error').hide();
+    let result = getUrlVars()["result"];
+    if(typeof(result) != 'undefined'){
+      if(result.includes('success')) {
+        alert('Thank you for your submission! We will contact you soon.');
+      } else {
+        alert('There was an error with your submission. Please try again.');
+      }
+    }
+  });
 
+  function removeQuery() {
+    let url = window.location.href;
+    let a = url.indexOf("?");
+    let b = url.substring(a);
+    let c = url.replace(b,"");
+    window.location.href = c;
+  }
 
-  <script> 
   // Init animations and handle mobile menu functionality after scripts loaded
-  document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', () => {
     // Initialize AOS (Animation On Scroll)
     if (window.AOS) {
       AOS.init({
@@ -511,6 +616,15 @@
     }
   });
 </script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+  <script src="https://www.google.com/recaptcha/api.js?render=6LfWu2YcAAAAAPooSewjuw82sSxhAdh657M4VvzT"></script>
+  <script>
+    grecaptcha.ready(function() {
+      grecaptcha.execute('6LfWu2YcAAAAAPooSewjuw82sSxhAdh657M4VvzT', {action:'validate_captcha'})
+        .then(function(token) {
+          document.getElementById('g-recaptcha-response').value = token;
+        });
+    });
+  </script>
+  <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

style.css

@@ -22,7 +22,23 @@ p {
 	border: 1px solid lightgray;
 	border-radius: 16px;
 }
-
 .card p:last-child {
 	margin-bottom: 0;
 }
+
+/* Back to top button */
+#toTopBtn {
+  transition: all 0.3s ease;
+  z-index: 9999;
+}
+
+/* Form styles */
+input, textarea {
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+input:focus, textarea:focus {
+  outline: none;
+  border-color: var(--vlc-navy);
+  box-shadow: 0 0 0 3px rgba(0, 32, 96, 0.1);
+}