Components : Contact Form with Company Information

Preview content adapted to proportion

Contact Form with Company Information

ContactUs

The contact form is used to collect user information such as full name, email address, and a message. The company information section provides essential contact details.

This component features a contact form for users to send messages, along with company contact details and an embedded map for location reference.

The form includes interactive elements like input fields with floating labels, a submit button with hover and active states, and a success message that appears when the form is valid.


The layout is responsive, adapting to different screen sizes with a two-column grid on larger screens (md:grid-cols-2) and a single column on smaller screens. The form and other elements adjust their padding and spacing based on the screen size for optimal usability.

Date : June 18, 2025
Views : 10
Copys : 0

fa-tags

Business websites, corporate landing pages, portfolio sites, service-oriented platforms

Code

<div class="relative min-h-screen bg-gray-900 p-4 md:p-8">
 <div class="mx-auto max-w-7xl space-y-8">
  <div class="grid gap-8 md:grid-cols-2">
   <!-- Contact Form -->
   <div class="rounded-2xl bg-gray-800/50 p-6 backdrop-blur-lg md:p-8">
    <h2 class="mb-6 text-3xl font-bold text-teal-400">
     Get in Touch
    </h2>
    <form class="space-y-4 peer" novalidate="">
     <div class="group relative">
      <input class="w-full bg-gray-700/30 rounded-lg px-4 py-3 text-gray-100 placeholder-transparent ring-1 ring-gray-600 transition-all focus:ring-2 focus:ring-teal-400 focus:outline-none invalid:[&amp;:not(:placeholder-shown):not(:focus)]:ring-pink-500 peer" placeholder="Full Name" required="" type="text"/>
      <span class="pointer-events-none absolute left-4 top-2 text-sm text-gray-400 transition-all group-focus-within:-translate-y-5 group-focus-within:text-xs group-[:not(:placeholder-shown)]:-translate-y-5 group-[:not(:placeholder-shown)]:text-xs">
       Full Name
      </span>
     </div>
     <div class="group relative">
      <input class="w-full bg-gray-700/30 rounded-lg px-4 py-3 text-gray-100 placeholder-transparent ring-1 ring-gray-600 transition-all focus:ring-2 focus:ring-teal-400 focus:outline-none invalid:[&amp;:not(:placeholder-shown):not(:focus)]:ring-pink-500 peer" placeholder="Email Address" required="" type="email"/>
      <span class="pointer-events-none absolute left-4 top-2 text-sm text-gray-400 transition-all group-focus-within:-translate-y-5 group-focus-within:text-xs group-[:not(:placeholder-shown)]:-translate-y-5 group-[:not(:placeholder-shown)]:text-xs">
       Email Address
      </span>
     </div>
     <textarea class="w-full bg-gray-700/30 rounded-lg px-4 py-3 text-gray-100 placeholder-gray-400 ring-1 ring-gray-600 transition-all focus:ring-2 focus:ring-teal-400 focus:outline-none" placeholder="Your Message" required="" rows="4"></textarea>
     <button class="w-full bg-gradient-to-r from-blue-500 to-teal-400 px-6 py-3 rounded-lg font-semibold text-white transition-transform hover:scale-105 active:scale-95" type="submit">
      Send Message
     </button>
    </form>
    <div class="mt-4 hidden text-center text-sm text-green-400 peer-valid:block">
     ✅ Message sent successfully!
    </div>
   </div>
   <!-- Contact Info & Map -->
   <div class="space-y-6">
    <div class="rounded-2xl bg-gradient-to-br from-gray-800 to-gray-900 p-6 shadow-xl transition-transform hover:scale-[1.02]">
     <div class="space-y-4">
      <div class="flex items-center gap-4">
       <div class="rounded-full bg-teal-400/10 p-3">
        <span class="text-2xl">
         📌
        </span>
       </div>
       <div>
        <h3 class="text-lg font-semibold text-gray-100">
         Office Location
        </h3>
        <p class="text-gray-400">
         123 Innovation Street
        </p>
       </div>
      </div>
      <div class="flex items-center gap-4">
       <div class="rounded-full bg-teal-400/10 p-3">
        <span class="text-2xl">
         📞
        </span>
       </div>
       <div>
        <h3 class="text-lg font-semibold text-gray-100">
         Phone Number
        </h3>
        <p class="text-gray-400">
         +1 (555) 123-4567
        </p>
       </div>
      </div>
      <div class="flex items-center gap-4">
       <div class="rounded-full bg-teal-400/10 p-3">
        <span class="text-2xl">
         📧
        </span>
       </div>
       <div>
        <h3 class="text-lg font-semibold text-gray-100">
         Email Address
        </h3>
        <p class="text-gray-400">
         [email protected]
        </p>
       </div>
      </div>
     </div>
    </div>
    <div class="aspect-[4/3] overflow-hidden rounded-2xl border border-gray-700">
     <iframe class="h-full w-full" src="https://maps.google.com/maps?q=New%20York&amp;t=&amp;z=13&amp;ie=UTF8&amp;iwloc=&amp;output=embed" style="filter: grayscale(1) contrast(1.2) opacity(0.8);">
     </iframe>
    </div>
   </div>
  </div>
 </div>
</div>


<template>
 <div class="relative min-h-screen bg-gray-900 p-4 md:p-8">
  <div class="mx-auto max-w-7xl space-y-8">
   <div class="grid gap-8 md:grid-cols-2">
    <!-- Contact Form -->
    <div class="rounded-2xl bg-gray-800/50 p-6 backdrop-blur-lg md:p-8">
     <h2 class="mb-6 text-3xl font-bold text-teal-400">
      Get in Touch
     </h2>
     <form class="space-y-4 peer" novalidate="">
      <div class="group relative">
       <input class="w-full bg-gray-700/30 rounded-lg px-4 py-3 text-gray-100 placeholder-transparent ring-1 ring-gray-600 transition-all focus:ring-2 focus:ring-teal-400 focus:outline-none invalid:[&amp;:not(:placeholder-shown):not(:focus)]:ring-pink-500 peer" placeholder="Full Name" required="" type="text"/>
       <span class="pointer-events-none absolute left-4 top-2 text-sm text-gray-400 transition-all group-focus-within:-translate-y-5 group-focus-within:text-xs group-[:not(:placeholder-shown)]:-translate-y-5 group-[:not(:placeholder-shown)]:text-xs">
        Full Name
       </span>
      </div>
      <div class="group relative">
       <input class="w-full bg-gray-700/30 rounded-lg px-4 py-3 text-gray-100 placeholder-transparent ring-1 ring-gray-600 transition-all focus:ring-2 focus:ring-teal-400 focus:outline-none invalid:[&amp;:not(:placeholder-shown):not(:focus)]:ring-pink-500 peer" placeholder="Email Address" required="" type="email"/>
       <span class="pointer-events-none absolute left-4 top-2 text-sm text-gray-400 transition-all group-focus-within:-translate-y-5 group-focus-within:text-xs group-[:not(:placeholder-shown)]:-translate-y-5 group-[:not(:placeholder-shown)]:text-xs">
        Email Address
       </span>
      </div>
      <textarea class="w-full bg-gray-700/30 rounded-lg px-4 py-3 text-gray-100 placeholder-gray-400 ring-1 ring-gray-600 transition-all focus:ring-2 focus:ring-teal-400 focus:outline-none" placeholder="Your Message" required="" rows="4"></textarea>
      <button class="w-full bg-gradient-to-r from-blue-500 to-teal-400 px-6 py-3 rounded-lg font-semibold text-white transition-transform hover:scale-105 active:scale-95" type="submit">
       Send Message
      </button>
     </form>
     <div class="mt-4 hidden text-center text-sm text-green-400 peer-valid:block">
      ✅ Message sent successfully!
     </div>
    </div>
    <!-- Contact Info & Map -->
    <div class="space-y-6">
     <div class="rounded-2xl bg-gradient-to-br from-gray-800 to-gray-900 p-6 shadow-xl transition-transform hover:scale-[1.02]">
      <div class="space-y-4">
       <div class="flex items-center gap-4">
        <div class="rounded-full bg-teal-400/10 p-3">
         <span class="text-2xl">
          📌
         </span>
        </div>
        <div>
         <h3 class="text-lg font-semibold text-gray-100">
          Office Location
         </h3>
         <p class="text-gray-400">
          123 Innovation Street
         </p>
        </div>
       </div>
       <div class="flex items-center gap-4">
        <div class="rounded-full bg-teal-400/10 p-3">
         <span class="text-2xl">
          📞
         </span>
        </div>
        <div>
         <h3 class="text-lg font-semibold text-gray-100">
          Phone Number
         </h3>
         <p class="text-gray-400">
          +1 (555) 123-4567
         </p>
        </div>
       </div>
       <div class="flex items-center gap-4">
        <div class="rounded-full bg-teal-400/10 p-3">
         <span class="text-2xl">
          📧
         </span>
        </div>
        <div>
         <h3 class="text-lg font-semibold text-gray-100">
          Email Address
         </h3>
         <p class="text-gray-400">
          [email protected]
         </p>
        </div>
       </div>
      </div>
     </div>
     <div class="aspect-[4/3] overflow-hidden rounded-2xl border border-gray-700">
      <iframe class="h-full w-full" src="https://maps.google.com/maps?q=New%20York&amp;t=&amp;z=13&amp;ie=UTF8&amp;iwloc=&amp;output=embed" style="filter: grayscale(1) contrast(1.2) opacity(0.8);">
      </iframe>
     </div>
    </div>
   </div>
  </div>
 </div>
</template>
<script>
 export default {
    name: 'MyContactUsComponent',
    data() {
        return {
        
        }
    },
    methods: {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>
<style scoped="">
</style>



import React from "react";
const MyContactUsComponent = () => {
    return (
<div>
<div class="relative min-h-screen bg-gray-900 p-4 md:p-8">
 <div class="mx-auto max-w-7xl space-y-8">
  <div class="grid gap-8 md:grid-cols-2">
   <!-- Contact Form -->
   <div class="rounded-2xl bg-gray-800/50 p-6 backdrop-blur-lg md:p-8">
    <h2 class="mb-6 text-3xl font-bold text-teal-400">
     Get in Touch
    </h2>
    <form class="space-y-4 peer" novalidate="">
     <div class="group relative">
      <input class="w-full bg-gray-700/30 rounded-lg px-4 py-3 text-gray-100 placeholder-transparent ring-1 ring-gray-600 transition-all focus:ring-2 focus:ring-teal-400 focus:outline-none invalid:[&amp;:not(:placeholder-shown):not(:focus)]:ring-pink-500 peer" placeholder="Full Name" required="" type="text"/>
      <span class="pointer-events-none absolute left-4 top-2 text-sm text-gray-400 transition-all group-focus-within:-translate-y-5 group-focus-within:text-xs group-[:not(:placeholder-shown)]:-translate-y-5 group-[:not(:placeholder-shown)]:text-xs">
       Full Name
      </span>
     </div>
     <div class="group relative">
      <input class="w-full bg-gray-700/30 rounded-lg px-4 py-3 text-gray-100 placeholder-transparent ring-1 ring-gray-600 transition-all focus:ring-2 focus:ring-teal-400 focus:outline-none invalid:[&amp;:not(:placeholder-shown):not(:focus)]:ring-pink-500 peer" placeholder="Email Address" required="" type="email"/>
      <span class="pointer-events-none absolute left-4 top-2 text-sm text-gray-400 transition-all group-focus-within:-translate-y-5 group-focus-within:text-xs group-[:not(:placeholder-shown)]:-translate-y-5 group-[:not(:placeholder-shown)]:text-xs">
       Email Address
      </span>
     </div>
     <textarea class="w-full bg-gray-700/30 rounded-lg px-4 py-3 text-gray-100 placeholder-gray-400 ring-1 ring-gray-600 transition-all focus:ring-2 focus:ring-teal-400 focus:outline-none" placeholder="Your Message" required="" rows="4"></textarea>
     <button class="w-full bg-gradient-to-r from-blue-500 to-teal-400 px-6 py-3 rounded-lg font-semibold text-white transition-transform hover:scale-105 active:scale-95" type="submit">
      Send Message
     </button>
    </form>
    <div class="mt-4 hidden text-center text-sm text-green-400 peer-valid:block">
     ✅ Message sent successfully!
    </div>
   </div>
   <!-- Contact Info & Map -->
   <div class="space-y-6">
    <div class="rounded-2xl bg-gradient-to-br from-gray-800 to-gray-900 p-6 shadow-xl transition-transform hover:scale-[1.02]">
     <div class="space-y-4">
      <div class="flex items-center gap-4">
       <div class="rounded-full bg-teal-400/10 p-3">
        <span class="text-2xl">
         📌
        </span>
       </div>
       <div>
        <h3 class="text-lg font-semibold text-gray-100">
         Office Location
        </h3>
        <p class="text-gray-400">
         123 Innovation Street
        </p>
       </div>
      </div>
      <div class="flex items-center gap-4">
       <div class="rounded-full bg-teal-400/10 p-3">
        <span class="text-2xl">
         📞
        </span>
       </div>
       <div>
        <h3 class="text-lg font-semibold text-gray-100">
         Phone Number
        </h3>
        <p class="text-gray-400">
         +1 (555) 123-4567
        </p>
       </div>
      </div>
      <div class="flex items-center gap-4">
       <div class="rounded-full bg-teal-400/10 p-3">
        <span class="text-2xl">
         📧
        </span>
       </div>
       <div>
        <h3 class="text-lg font-semibold text-gray-100">
         Email Address
        </h3>
        <p class="text-gray-400">
         [email protected]
        </p>
       </div>
      </div>
     </div>
    </div>
    <div class="aspect-[4/3] overflow-hidden rounded-2xl border border-gray-700">
     <iframe class="h-full w-full" src="https://maps.google.com/maps?q=New%20York&amp;t=&amp;z=13&amp;ie=UTF8&amp;iwloc=&amp;output=embed" style="filter: grayscale(1) contrast(1.2) opacity(0.8);">
     </iframe>
    </div>
   </div>
  </div>
 </div>
</div>

</div>
    )
}
export default MyContactUsComponent;

Recommended Related Components

More+

Contact Us Form

The form is used to allow users to send messages or inquiries to the website owner or support team.

48
0

Contact Form and Information Section

Used on company websites to facilitate communication between the business and its potential customers.

39
0

Contact Form Component

It is used to allow users to send inquiries or messages to the website's administrators.

22
0

Contact Form with Company Information

The contact form is used to collect user information such as full name, email address, and a message. The company information section provides essential contact details.

10
0