Contact Website Design Template For Blogger/Wordpress Website LATEST!

<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-[#ffffff] py-16">
  <div class="max-w-[860px] mx-auto bg-white shadow-sm">
    
    <!--Main grid: left contact info + right form-->
    <div class="grid grid-cols-1 lg:grid-cols-5 gap-12 p-12">
      
      <!--LEFT COLUMN - Contact Info-->
      <div class="lg:col-span-2 space-y-10">
        
        <h1 class="text-[42px] leading-none font-semibold tracking-tight text-black">
          Get in touch
        </h1>
        
        <div class="space-y-6 text-[15px]">
          <!--Email-->
          <div>
            <div class="text-xs uppercase tracking-widest text-gray-500 font-medium mb-1">Email</div>
            <a class="text-black hover:underline font-medium" href="mailto:MH4K@gmail.com">MH4K@gmail.com</a>
          </div>
          
          <!--Phone-->
          <div>
            <div class="text-xs uppercase tracking-widest text-gray-500 font-medium mb-1">Phone</div>
            <a class="text-black hover:underline font-medium" href="tel:+17631683">+17631683</a>
          </div>
          
          <!--Address-->
          <div>
            <div class="text-xs uppercase tracking-widest text-gray-500 font-medium mb-1">Address</div>
            <div class="text-black font-medium leading-relaxed">
              123 Innovation Avenue, Suite 456<br />
              Tech District, San Francisco, CA 94107<br />
              United States
            </div>
          </div>
        </div>
        
        <!--Follow us - NOW WITH PURE WHITE ICONS-->
        <div>
          <div class="text-xs uppercase tracking-widest text-gray-500 font-medium mb-3">FOLLOW US</div>
          <div class="flex gap-4">
            
            <!--Instagram - WHITE icon-->
            <a class="w-9 h-9 bg-black hover:bg-zinc-800 transition-colors rounded-full flex items-center justify-center" href="#" target="_blank">
              <svg class="w-5 h-5" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.849.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4 2.21 0 4 1.791 4 4 0 2.21-1.79 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" fill="white">
              </path></svg>
            </a>
            
            <!--Facebook - WHITE icon-->
            <a class="w-9 h-9 bg-black hover:bg-zinc-800 transition-colors rounded-full flex items-center justify-center" href="#" target="_blank">
              <svg class="w-5 h-5" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" fill="white">
              </path></svg>
            </a>
            
            <!--LinkedIn - WHITE icon-->
            <a class="w-9 h-9 bg-black hover:bg-zinc-800 transition-colors rounded-full flex items-center justify-center" href="#" target="_blank">
              <svg class="w-5 h-5" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" fill="white">
              </path></svg>
            </a>
            
            <!--X - WHITE icon-->
            <a class="w-9 h-9 bg-black hover:bg-zinc-800 transition-colors rounded-full flex items-center justify-center" href="#" target="_blank">
              <svg class="w-5 h-5" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932zM17.61 20.644h2.039L6.486 3.24H4.298z" fill="white">
              </path></svg>
            </a>
            
          </div>
        </div>
      </div>
      
      <!--RIGHT COLUMN - Form-->
      <div class="lg:col-span-3">
        <form action="https://formspree.io/f/xdalgnqr" class="space-y-8" method="POST">
          
          <!--Name + Email row-->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">Your Name</label>
              <input class="w-full bg-[#e1e2e3] border border-transparent focus:border-gray-300 focus:bg-white rounded-2xl px-5 py-4 text-base outline-none transition-all" name="name" type="text" />
            </div>
            
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">Email address</label>
              <input class="w-full bg-[#e1e2e3] border border-transparent focus:border-gray-300 focus:bg-white rounded-2xl px-5 py-4 text-base outline-none transition-all" name="email" required="" type="email" />
            </div>
          </div>
          
          <!--Message-->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Message</label>
            <textarea class="w-full bg-[#e1e2e3] border border-transparent focus:border-gray-300 focus:bg-white rounded-3xl px-5 py-4 text-base outline-none resize-y min-h-[180px] transition-all" name="message" required="" rows="7"></textarea>
          </div>
          
          <!--Submit Button-->
          <button class="w-full bg-black hover:bg-zinc-900 transition-colors text-white font-semibold text-lg py-4 rounded-2xl" type="submit">
            Send Message
          </button>
        </form>
      </div>
    </div>
  </div>
</div>



<b:if cond='data:blog.url == "https://mh4kin.blogspot.com/p/contact_19.html"'>
  <style type='text/css'>
    .sidebar-wrapper,
    .sidebar,
    #sidebar-right,
    .right-sidebar,
    .column-right-inner,
    .rsidebar,
    .PopularPosts,
    .widget-popular-posts,
    .FollowByEmail,
    .Label,
    .BlogArchive,
    .HTML,
    .PageList,
    [id*="FollowByEmail"],
    [id*="PopularPosts"],
    [id*="Label"],
    [id*="BlogArchive"] {
      display: none !important;
    }

    .main-inner .columns, 
    .main-inner .column-center-inner, 
    .content-outer, 
    .content-inner, 
    #main-wrapper, 
    .post-outer, 
    .main {
      width: 100% !important;
      max-width: 100% !important;
      float: none !important;
      margin: 0 auto !important;
      padding: 0 !important;
    }

    .main-inner {
      padding: 0 !important;
    }

    .contact-form-container, 
    form {
      margin: 0 auto !important;
      max-width: 800px !important;
    }
  </style>
</b:if>