Components : Contact Form Component

Preview content adapted to proportion

Contact Form Component

ContactUs

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

This component provides a contact form with input fields for name, email, and message, along with contact information and a submission button.

Interaction:

Users can interact with the form by entering their details and submitting the message. The form includes hover effects and focus states for better user experience.

Responsive:

The component is designed to be responsive, with different padding sizes for small, medium, and large screens, and a grid layout that adjusts based on screen size.

Date : June 12, 2025

Copys : 0

fa-tags

Corporate websites, business portfolios, service platforms, e-commerce sites

Code

<div class="max-w-7xl mx-auto px-4 sm:px-6 xs:px-4 py-12">
 <div class="bg-white shadow-lg rounded-2xl p-12 sm:p-8 xs:p-6 transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] hover:shadow-xl">
  <div class="grid gap-8 lg:grid-cols-2">
   <div class="space-y-8">
    <div class="bg-gradient-to-r from-[#6D28D9] to-[#8B5CF6] p-6 rounded-xl text-white">
     <h2 class="text-3xl font-bold mb-4">
      📬 Get in Touch
     </h2>
     <div class="space-y-4">
      <div class="flex items-center gap-3">
       <span class="text-2xl">
        📧
       </span>
       <p class="text-gray-200">
        [email protected]
       </p>
      </div>
      <div class="flex items-center gap-3">
       <span class="text-2xl">
        📞
       </span>
       <p class="text-gray-200">
        +1 (555) 123-4567
       </p>
      </div>
     </div>
    </div>
    <div class="bg-[#E5E5E5]/30 p-6 rounded-xl backdrop-blur-sm">
     <div class="flex flex-col gap-6">
      <div class="flex items-center gap-4 text-blue-900">
       <span class="text-3xl">
        📍
       </span>
       <p class="font-medium">
        123 Innovation Street
        <br/>
        Tech Valley, CA 94016
       </p>
      </div>
      <div class="flex items-center gap-4 text-blue-900">
       <span class="text-3xl">
        ⏰
       </span>
       <p class="font-medium">
        Mon-Fri: 9AM - 5PM
        <br/>
        Sat-Sun: Closed
       </p>
      </div>
     </div>
    </div>
   </div>
   <form class="space-y-6">
    <div class="grid gap-6">
     <div>
      <input class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-4 focus:ring-blue-300 focus:border-blue-600 placeholder-gray-500 transition-all duration-200 hover:scale-[1.02]" placeholder="Full Name" type="text"/>
      <p class="mt-2 text-sm text-red-500 invisible">
       Validation error
      </p>
     </div>
     <div>
      <input class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-4 focus:ring-blue-300 focus:border-blue-600 placeholder-gray-500 transition-all duration-200 hover:scale-[1.02]" placeholder="Email Address" type="email"/>
      <p class="mt-2 text-sm text-red-500 invisible">
       Validation error
      </p>
     </div>
     <div>
      <textarea class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-4 focus:ring-blue-300 focus:border-blue-600 placeholder-gray-500 transition-all duration-200 hover:scale-[1.02]" placeholder="Your Message" rows="4"></textarea>
      <p class="mt-2 text-sm text-red-500 invisible">
       Validation error
      </p>
     </div>
    </div>
    <button class="w-full py-3 px-6 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-all duration-300 hover:scale-[1.02] disabled:bg-gray-400 flex justify-center items-center gap-2" type="submit">
     <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white invisible" fill="none" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
      </circle>
      <path class="opacity-75" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" fill="currentColor">
      </path>
     </svg>
     Send Message
    </button>
   </form>
  </div>
 </div>
</div>

<template>
 <div class="max-w-7xl mx-auto px-4 sm:px-6 xs:px-4 py-12">
  <div class="bg-white shadow-lg rounded-2xl p-12 sm:p-8 xs:p-6 transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] hover:shadow-xl">
   <div class="grid gap-8 lg:grid-cols-2">
    <div class="space-y-8">
     <div class="bg-gradient-to-r from-[#6D28D9] to-[#8B5CF6] p-6 rounded-xl text-white">
      <h2 class="text-3xl font-bold mb-4">
       📬 Get in Touch
      </h2>
      <div class="space-y-4">
       <div class="flex items-center gap-3">
        <span class="text-2xl">
         📧
        </span>
        <p class="text-gray-200">
         [email protected]
        </p>
       </div>
       <div class="flex items-center gap-3">
        <span class="text-2xl">
         📞
        </span>
        <p class="text-gray-200">
         +1 (555) 123-4567
        </p>
       </div>
      </div>
     </div>
     <div class="bg-[#E5E5E5]/30 p-6 rounded-xl backdrop-blur-sm">
      <div class="flex flex-col gap-6">
       <div class="flex items-center gap-4 text-blue-900">
        <span class="text-3xl">
         📍
        </span>
        <p class="font-medium">
         123 Innovation Street
         <br/>
         Tech Valley, CA 94016
        </p>
       </div>
       <div class="flex items-center gap-4 text-blue-900">
        <span class="text-3xl">
         ⏰
        </span>
        <p class="font-medium">
         Mon-Fri: 9AM - 5PM
         <br/>
         Sat-Sun: Closed
        </p>
       </div>
      </div>
     </div>
    </div>
    <form class="space-y-6">
     <div class="grid gap-6">
      <div>
       <input class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-4 focus:ring-blue-300 focus:border-blue-600 placeholder-gray-500 transition-all duration-200 hover:scale-[1.02]" placeholder="Full Name" type="text"/>
       <p class="mt-2 text-sm text-red-500 invisible">
        Validation error
       </p>
      </div>
      <div>
       <input class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-4 focus:ring-blue-300 focus:border-blue-600 placeholder-gray-500 transition-all duration-200 hover:scale-[1.02]" placeholder="Email Address" type="email"/>
       <p class="mt-2 text-sm text-red-500 invisible">
        Validation error
       </p>
      </div>
      <div>
       <textarea class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-4 focus:ring-blue-300 focus:border-blue-600 placeholder-gray-500 transition-all duration-200 hover:scale-[1.02]" placeholder="Your Message" rows="4"></textarea>
       <p class="mt-2 text-sm text-red-500 invisible">
        Validation error
       </p>
      </div>
     </div>
     <button class="w-full py-3 px-6 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-all duration-300 hover:scale-[1.02] disabled:bg-gray-400 flex justify-center items-center gap-2" type="submit">
      <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white invisible" fill="none" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
       <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
       </circle>
       <path class="opacity-75" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" fill="currentColor">
       </path>
      </svg>
      Send Message
     </button>
    </form>
   </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-7xl mx-auto px-4 sm:px-6 xs:px-4 py-12">
 <div class="bg-white shadow-lg rounded-2xl p-12 sm:p-8 xs:p-6 transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] hover:shadow-xl">
  <div class="grid gap-8 lg:grid-cols-2">
   <div class="space-y-8">
    <div class="bg-gradient-to-r from-[#6D28D9] to-[#8B5CF6] p-6 rounded-xl text-white">
     <h2 class="text-3xl font-bold mb-4">
      📬 Get in Touch
     </h2>
     <div class="space-y-4">
      <div class="flex items-center gap-3">
       <span class="text-2xl">
        📧
       </span>
       <p class="text-gray-200">
        [email protected]
       </p>
      </div>
      <div class="flex items-center gap-3">
       <span class="text-2xl">
        📞
       </span>
       <p class="text-gray-200">
        +1 (555) 123-4567
       </p>
      </div>
     </div>
    </div>
    <div class="bg-[#E5E5E5]/30 p-6 rounded-xl backdrop-blur-sm">
     <div class="flex flex-col gap-6">
      <div class="flex items-center gap-4 text-blue-900">
       <span class="text-3xl">
        📍
       </span>
       <p class="font-medium">
        123 Innovation Street
        <br/>
        Tech Valley, CA 94016
       </p>
      </div>
      <div class="flex items-center gap-4 text-blue-900">
       <span class="text-3xl">
        ⏰
       </span>
       <p class="font-medium">
        Mon-Fri: 9AM - 5PM
        <br/>
        Sat-Sun: Closed
       </p>
      </div>
     </div>
    </div>
   </div>
   <form class="space-y-6">
    <div class="grid gap-6">
     <div>
      <input class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-4 focus:ring-blue-300 focus:border-blue-600 placeholder-gray-500 transition-all duration-200 hover:scale-[1.02]" placeholder="Full Name" type="text"/>
      <p class="mt-2 text-sm text-red-500 invisible">
       Validation error
      </p>
     </div>
     <div>
      <input class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-4 focus:ring-blue-300 focus:border-blue-600 placeholder-gray-500 transition-all duration-200 hover:scale-[1.02]" placeholder="Email Address" type="email"/>
      <p class="mt-2 text-sm text-red-500 invisible">
       Validation error
      </p>
     </div>
     <div>
      <textarea class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-4 focus:ring-blue-300 focus:border-blue-600 placeholder-gray-500 transition-all duration-200 hover:scale-[1.02]" placeholder="Your Message" rows="4"></textarea>
      <p class="mt-2 text-sm text-red-500 invisible">
       Validation error
      </p>
     </div>
    </div>
    <button class="w-full py-3 px-6 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-all duration-300 hover:scale-[1.02] disabled:bg-gray-400 flex justify-center items-center gap-2" type="submit">
     <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white invisible" fill="none" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
      </circle>
      <path class="opacity-75" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" fill="currentColor">
      </path>
     </svg>
     Send Message
    </button>
   </form>
  </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.