Components : Contact Form and Information Section

Preview content adapted to proportion

Contact Form and Information Section

ContactUs

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

This component provides a contact form for users to submit messages along with company contact information and social media links.

Interaction:

The form allows users to input their name, phone number, and email address. It includes validation for each field, displaying error messages when invalid data is entered. The submit button triggers a form submission process, with an animated loading icon displayed during submission.

Responsive:

The layout adjusts dynamically based on screen size, using a grid system to stack columns into three on small screens, two on medium screens, and three on large screens. The design also supports dark mode for improved readability and user experience.

Date : May 31, 2025

Copys : 0

fa-tags

Company websites, business portfolios, service provider platforms, online marketplaces

Code

<div class="max-w-[1200px] mx-auto p-8 bg-white dark:bg-gray-900 rounded-lg shadow-lg">
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- Contact Form -->
  <div class="lg:col-span-2 space-y-6">
   <h2 class="text-3xl font-bold text-gray-900 dark:text-blue-400">
    Get in Touch
   </h2>
   <form class="space-y-4">
    <div class="space-y-2">
     <input class="w-full p-3 rounded-lg border border-gray-200 dark:border-gray-700 focus:ring-2 focus:ring-orange-500 bg-transparent peer invalid:border-red-500" placeholder="Full Name" type="text"/>
     <span class="hidden text-red-500 text-sm peer-invalid:block">
      Please enter valid name
     </span>
    </div>
    <div class="space-y-2">
     <input class="w-full p-3 rounded-lg border border-gray-200 dark:border-gray-700 focus:ring-2 focus:ring-orange-500 bg-transparent peer invalid:border-red-500" placeholder="Phone Number" type="tel"/>
     <span class="hidden text-red-500 text-sm peer-invalid:block">
      Invalid phone format
     </span>
    </div>
    <div class="space-y-2">
     <input class="w-full p-3 rounded-lg border border-gray-200 dark:border-gray-700 focus:ring-2 focus:ring-orange-500 bg-transparent peer invalid:border-red-500" placeholder="Email Address" type="email"/>
     <span class="hidden text-red-500 text-sm peer-invalid:block">
      Invalid email address
     </span>
    </div>
    <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 px-6 rounded-lg transition-transform hover:scale-105 flex items-center justify-center">
     <svg class="animate-spin h-5 w-5 mr-3 hidden" viewbox="0 0 24 24">
     </svg>
     Submit Message
    </button>
   </form>
  </div>
  <!-- Contact Info -->
  <div class="space-y-8">
   <div class="p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
    <div class="flex items-center gap-4 mb-6">
     <div class="p-3 bg-blue-500 rounded-full">
      📞
     </div>
     <div>
      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
       Phone
      </h3>
      <p class="text-gray-600 dark:text-gray-400">
       +1 (555) 000-1234
      </p>
     </div>
    </div>
    <div class="flex items-center gap-4 mb-6">
     <div class="p-3 bg-blue-500 rounded-full">
      📍
     </div>
     <div>
      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
       Address
      </h3>
      <p class="text-gray-600 dark:text-gray-400">
       123 Tech Valley
      </p>
     </div>
    </div>
    <div class="flex items-center gap-4">
     <div class="p-3 bg-blue-500 rounded-full">
      ✉️
     </div>
     <div>
      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
       Email
      </h3>
      <p class="text-gray-600 dark:text-gray-400">
       [email protected]
      </p>
     </div>
    </div>
   </div>
   <!-- Social Icons -->
   <div class="flex justify-center space-x-6">
    <a class="text-gray-600 hover:text-purple-500 dark:text-gray-400 transition-colors" href="#">
     🐦
    </a>
    <a class="text-gray-600 hover:text-purple-500 dark:text-gray-400 transition-colors" href="#">
     📘
    </a>
    <a class="text-gray-600 hover:text-purple-500 dark:text-gray-400 transition-colors" href="#">
     🔗
    </a>
    <a class="text-gray-600 hover:text-purple-500 dark:text-gray-400 transition-colors" href="#">
     📸
    </a>
   </div>
   <!-- Map -->
   <div class="rounded-lg overflow-hidden shadow-md">
    <div class="bg-gray-200 h-48 flex items-center justify-center">
     🗺️
    </div>
   </div>
  </div>
 </div>
</div>

<template>
 <div class="max-w-[1200px] mx-auto p-8 bg-white dark:bg-gray-900 rounded-lg shadow-lg">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
   <!-- Contact Form -->
   <div class="lg:col-span-2 space-y-6">
    <h2 class="text-3xl font-bold text-gray-900 dark:text-blue-400">
     Get in Touch
    </h2>
    <form class="space-y-4">
     <div class="space-y-2">
      <input class="w-full p-3 rounded-lg border border-gray-200 dark:border-gray-700 focus:ring-2 focus:ring-orange-500 bg-transparent peer invalid:border-red-500" placeholder="Full Name" type="text"/>
      <span class="hidden text-red-500 text-sm peer-invalid:block">
       Please enter valid name
      </span>
     </div>
     <div class="space-y-2">
      <input class="w-full p-3 rounded-lg border border-gray-200 dark:border-gray-700 focus:ring-2 focus:ring-orange-500 bg-transparent peer invalid:border-red-500" placeholder="Phone Number" type="tel"/>
      <span class="hidden text-red-500 text-sm peer-invalid:block">
       Invalid phone format
      </span>
     </div>
     <div class="space-y-2">
      <input class="w-full p-3 rounded-lg border border-gray-200 dark:border-gray-700 focus:ring-2 focus:ring-orange-500 bg-transparent peer invalid:border-red-500" placeholder="Email Address" type="email"/>
      <span class="hidden text-red-500 text-sm peer-invalid:block">
       Invalid email address
      </span>
     </div>
     <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 px-6 rounded-lg transition-transform hover:scale-105 flex items-center justify-center">
      <svg class="animate-spin h-5 w-5 mr-3 hidden" viewbox="0 0 24 24">
      </svg>
      Submit Message
     </button>
    </form>
   </div>
   <!-- Contact Info -->
   <div class="space-y-8">
    <div class="p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
     <div class="flex items-center gap-4 mb-6">
      <div class="p-3 bg-blue-500 rounded-full">
       📞
      </div>
      <div>
       <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
        Phone
       </h3>
       <p class="text-gray-600 dark:text-gray-400">
        +1 (555) 000-1234
       </p>
      </div>
     </div>
     <div class="flex items-center gap-4 mb-6">
      <div class="p-3 bg-blue-500 rounded-full">
       📍
      </div>
      <div>
       <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
        Address
       </h3>
       <p class="text-gray-600 dark:text-gray-400">
        123 Tech Valley
       </p>
      </div>
     </div>
     <div class="flex items-center gap-4">
      <div class="p-3 bg-blue-500 rounded-full">
       ✉️
      </div>
      <div>
       <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
        Email
       </h3>
       <p class="text-gray-600 dark:text-gray-400">
        [email protected]
       </p>
      </div>
     </div>
    </div>
    <!-- Social Icons -->
    <div class="flex justify-center space-x-6">
     <a class="text-gray-600 hover:text-purple-500 dark:text-gray-400 transition-colors" href="#">
      🐦
     </a>
     <a class="text-gray-600 hover:text-purple-500 dark:text-gray-400 transition-colors" href="#">
      📘
     </a>
     <a class="text-gray-600 hover:text-purple-500 dark:text-gray-400 transition-colors" href="#">
      🔗
     </a>
     <a class="text-gray-600 hover:text-purple-500 dark:text-gray-400 transition-colors" href="#">
      📸
     </a>
    </div>
    <!-- Map -->
    <div class="rounded-lg overflow-hidden shadow-md">
     <div class="bg-gray-200 h-48 flex items-center justify-center">
      🗺️
     </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="max-w-[1200px] mx-auto p-8 bg-white dark:bg-gray-900 rounded-lg shadow-lg">
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- Contact Form -->
  <div class="lg:col-span-2 space-y-6">
   <h2 class="text-3xl font-bold text-gray-900 dark:text-blue-400">
    Get in Touch
   </h2>
   <form class="space-y-4">
    <div class="space-y-2">
     <input class="w-full p-3 rounded-lg border border-gray-200 dark:border-gray-700 focus:ring-2 focus:ring-orange-500 bg-transparent peer invalid:border-red-500" placeholder="Full Name" type="text"/>
     <span class="hidden text-red-500 text-sm peer-invalid:block">
      Please enter valid name
     </span>
    </div>
    <div class="space-y-2">
     <input class="w-full p-3 rounded-lg border border-gray-200 dark:border-gray-700 focus:ring-2 focus:ring-orange-500 bg-transparent peer invalid:border-red-500" placeholder="Phone Number" type="tel"/>
     <span class="hidden text-red-500 text-sm peer-invalid:block">
      Invalid phone format
     </span>
    </div>
    <div class="space-y-2">
     <input class="w-full p-3 rounded-lg border border-gray-200 dark:border-gray-700 focus:ring-2 focus:ring-orange-500 bg-transparent peer invalid:border-red-500" placeholder="Email Address" type="email"/>
     <span class="hidden text-red-500 text-sm peer-invalid:block">
      Invalid email address
     </span>
    </div>
    <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 px-6 rounded-lg transition-transform hover:scale-105 flex items-center justify-center">
     <svg class="animate-spin h-5 w-5 mr-3 hidden" viewbox="0 0 24 24">
     </svg>
     Submit Message
    </button>
   </form>
  </div>
  <!-- Contact Info -->
  <div class="space-y-8">
   <div class="p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
    <div class="flex items-center gap-4 mb-6">
     <div class="p-3 bg-blue-500 rounded-full">
      📞
     </div>
     <div>
      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
       Phone
      </h3>
      <p class="text-gray-600 dark:text-gray-400">
       +1 (555) 000-1234
      </p>
     </div>
    </div>
    <div class="flex items-center gap-4 mb-6">
     <div class="p-3 bg-blue-500 rounded-full">
      📍
     </div>
     <div>
      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
       Address
      </h3>
      <p class="text-gray-600 dark:text-gray-400">
       123 Tech Valley
      </p>
     </div>
    </div>
    <div class="flex items-center gap-4">
     <div class="p-3 bg-blue-500 rounded-full">
      ✉️
     </div>
     <div>
      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
       Email
      </h3>
      <p class="text-gray-600 dark:text-gray-400">
       [email protected]
      </p>
     </div>
    </div>
   </div>
   <!-- Social Icons -->
   <div class="flex justify-center space-x-6">
    <a class="text-gray-600 hover:text-purple-500 dark:text-gray-400 transition-colors" href="#">
     🐦
    </a>
    <a class="text-gray-600 hover:text-purple-500 dark:text-gray-400 transition-colors" href="#">
     📘
    </a>
    <a class="text-gray-600 hover:text-purple-500 dark:text-gray-400 transition-colors" href="#">
     🔗
    </a>
    <a class="text-gray-600 hover:text-purple-500 dark:text-gray-400 transition-colors" href="#">
     📸
    </a>
   </div>
   <!-- Map -->
   <div class="rounded-lg overflow-hidden shadow-md">
    <div class="bg-gray-200 h-48 flex items-center justify-center">
     🗺️
    </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.

Contact Form and Information Section

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

Contact Form Component

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

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.