Components : Contact Us Form

Preview content adapted to proportion

Contact Us Form

ContactUs

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

This component is a contact form that collects user information such as name, email, address, and message. It also includes validation and status indicators.

Interaction:

Users interact with the form by entering their details in the input fields. The form provides real-time validation feedback with checkmarks appearing when fields are valid. The submit button triggers the form submission with a loading animation.

Responsive:

The form is designed to be responsive with a grid layout that adjusts from a single column on mobile devices to two columns on larger screens. The form elements maintain their functionality and appearance across different screen sizes.

Date : June 05, 2025

Copys : 0

fa-tags

Corporate websites, business portals, customer support pages, any site that requires user communication.

Code

<div class="relative min-h-screen bg-gray-900 p-8 flex items-center justify-center">
 <div class="w-full max-w-4xl bg-gray-800 rounded-2xl shadow-2xl p-8 space-y-6 transform transition-all duration-300 hover:shadow-[0_20px_50px_rgba(59,130,246,0.3)]">
  <div class="space-y-2">
   <h2 class="text-4xl font-bold bg-gradient-to-r from-blue-400 to-green-400 bg-clip-text text-transparent">
    Contact Us
   </h2>
   <p class="text-gray-400">
    We'll respond within 24 hours
   </p>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
   <div class="space-y-4">
    <div class="relative">
     <input class="w-full bg-gray-700 rounded-lg px-4 py-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent peer" placeholder="Name" type="text"/>
     <div class="absolute right-3 top-3 hidden peer-valid:block text-green-400">
      ✓
     </div>
    </div>
    <div class="relative">
     <input class="w-full bg-gray-700 rounded-lg px-4 py-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent peer" placeholder="Email" type="email"/>
     <div class="absolute right-3 top-3 hidden peer-valid:block text-green-400">
      ✓
     </div>
    </div>
    <div class="relative">
     <input class="w-full bg-gray-700 rounded-lg px-4 py-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent peer" placeholder="Address" type="text"/>
     <div class="absolute right-3 top-3 hidden peer-valid:block text-green-400">
      ✓
     </div>
    </div>
   </div>
   <div class="space-y-4">
    <div class="relative h-full">
     <textarea class="w-full h-full bg-gray-700 rounded-lg px-4 py-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent resize-none peer" placeholder="Message"></textarea>
     <div class="absolute right-3 bottom-3 hidden peer-valid:block text-green-400">
      ✓
     </div>
    </div>
   </div>
  </div>
  <div class="flex items-center justify-between">
   <div class="flex items-center space-x-2">
    <div class="w-3 h-3 rounded-full bg-gray-600 animate-pulse">
    </div>
    <span class="text-sm text-gray-400">
     Status
    </span>
   </div>
   <button class="relative px-6 py-3 bg-gradient-to-r from-blue-500 to-green-500 rounded-lg font-semibold text-white hover:scale-105 active:scale-95 transition-transform">
    <span class="flex items-center">
     Send Message
     <svg class="ml-2 hidden animate-spin h-5 w-5 text-white" 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>
    </span>
   </button>
  </div>
 </div>
</div>

<template>
 <div class="relative min-h-screen bg-gray-900 p-8 flex items-center justify-center">
  <div class="w-full max-w-4xl bg-gray-800 rounded-2xl shadow-2xl p-8 space-y-6 transform transition-all duration-300 hover:shadow-[0_20px_50px_rgba(59,130,246,0.3)]">
   <div class="space-y-2">
    <h2 class="text-4xl font-bold bg-gradient-to-r from-blue-400 to-green-400 bg-clip-text text-transparent">
     Contact Us
    </h2>
    <p class="text-gray-400">
     We'll respond within 24 hours
    </p>
   </div>
   <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div class="space-y-4">
     <div class="relative">
      <input class="w-full bg-gray-700 rounded-lg px-4 py-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent peer" placeholder="Name" type="text"/>
      <div class="absolute right-3 top-3 hidden peer-valid:block text-green-400">
       ✓
      </div>
     </div>
     <div class="relative">
      <input class="w-full bg-gray-700 rounded-lg px-4 py-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent peer" placeholder="Email" type="email"/>
      <div class="absolute right-3 top-3 hidden peer-valid:block text-green-400">
       ✓
      </div>
     </div>
     <div class="relative">
      <input class="w-full bg-gray-700 rounded-lg px-4 py-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent peer" placeholder="Address" type="text"/>
      <div class="absolute right-3 top-3 hidden peer-valid:block text-green-400">
       ✓
      </div>
     </div>
    </div>
    <div class="space-y-4">
     <div class="relative h-full">
      <textarea class="w-full h-full bg-gray-700 rounded-lg px-4 py-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent resize-none peer" placeholder="Message"></textarea>
      <div class="absolute right-3 bottom-3 hidden peer-valid:block text-green-400">
       ✓
      </div>
     </div>
    </div>
   </div>
   <div class="flex items-center justify-between">
    <div class="flex items-center space-x-2">
     <div class="w-3 h-3 rounded-full bg-gray-600 animate-pulse">
     </div>
     <span class="text-sm text-gray-400">
      Status
     </span>
    </div>
    <button class="relative px-6 py-3 bg-gradient-to-r from-blue-500 to-green-500 rounded-lg font-semibold text-white hover:scale-105 active:scale-95 transition-transform">
     <span class="flex items-center">
      Send Message
      <svg class="ml-2 hidden animate-spin h-5 w-5 text-white" 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>
     </span>
    </button>
   </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-8 flex items-center justify-center">
 <div class="w-full max-w-4xl bg-gray-800 rounded-2xl shadow-2xl p-8 space-y-6 transform transition-all duration-300 hover:shadow-[0_20px_50px_rgba(59,130,246,0.3)]">
  <div class="space-y-2">
   <h2 class="text-4xl font-bold bg-gradient-to-r from-blue-400 to-green-400 bg-clip-text text-transparent">
    Contact Us
   </h2>
   <p class="text-gray-400">
    We'll respond within 24 hours
   </p>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
   <div class="space-y-4">
    <div class="relative">
     <input class="w-full bg-gray-700 rounded-lg px-4 py-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent peer" placeholder="Name" type="text"/>
     <div class="absolute right-3 top-3 hidden peer-valid:block text-green-400">
      ✓
     </div>
    </div>
    <div class="relative">
     <input class="w-full bg-gray-700 rounded-lg px-4 py-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent peer" placeholder="Email" type="email"/>
     <div class="absolute right-3 top-3 hidden peer-valid:block text-green-400">
      ✓
     </div>
    </div>
    <div class="relative">
     <input class="w-full bg-gray-700 rounded-lg px-4 py-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent peer" placeholder="Address" type="text"/>
     <div class="absolute right-3 top-3 hidden peer-valid:block text-green-400">
      ✓
     </div>
    </div>
   </div>
   <div class="space-y-4">
    <div class="relative h-full">
     <textarea class="w-full h-full bg-gray-700 rounded-lg px-4 py-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent resize-none peer" placeholder="Message"></textarea>
     <div class="absolute right-3 bottom-3 hidden peer-valid:block text-green-400">
      ✓
     </div>
    </div>
   </div>
  </div>
  <div class="flex items-center justify-between">
   <div class="flex items-center space-x-2">
    <div class="w-3 h-3 rounded-full bg-gray-600 animate-pulse">
    </div>
    <span class="text-sm text-gray-400">
     Status
    </span>
   </div>
   <button class="relative px-6 py-3 bg-gradient-to-r from-blue-500 to-green-500 rounded-lg font-semibold text-white hover:scale-105 active:scale-95 transition-transform">
    <span class="flex items-center">
     Send Message
     <svg class="ml-2 hidden animate-spin h-5 w-5 text-white" 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>
    </span>
   </button>
  </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.