Components : Responsive User Registration Form

Preview content adapted to proportion

Responsive User Registration Form

Form

The form is used for user sign-up or registration processes on websites and applications, allowing users to input their details securely.

The component is a user registration form that collects user input, including username, email, and file uploads. It also includes terms agreement and a submit button. Additionally, it provides validation error messages and a loading overlay for processing actions.

Users interact with the form by entering their details, uploading files, agreeing to terms, and submitting the form. Hover effects and focus states enhance user experience with visual feedback.


The form is designed with a responsive grid layout that adjusts from one column on mobile devices to three columns on larger screens, ensuring optimal usability across devices.

Date : May 31, 2025
Views : 43
Copys : 0

fa-tags

Web applications, user onboarding, membership sign-ups, online services, e-commerce platforms

Code

<div class="min-h-screen p-8 bg-[#F8F9FA]">
 <form class="max-w-6xl mx-auto space-y-6">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
   <div class="relative group">
    <input class="w-full px-4 py-3 bg-white rounded-lg border-2 border-gray-200 focus:border-[#2A2D5E] focus:ring-0 transition-all duration-300 group-hover:scale-[1.01] placeholder-transparent peer" placeholder=" " type="text"/>
    <label class="absolute left-4 top-2 text-gray-400 text-sm transition-all duration-300 peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-focus:-top-2 peer-focus:text-sm peer-focus:text-[#2A2D5E]">
     Username
    </label>
    <div class="absolute inset-0 rounded-lg border-2 border-transparent group-hover:border-[#FF6B35] opacity-0 group-hover:opacity-30 transition-all duration-300 -z-10">
    </div>
   </div>
   <div class="relative group">
    <input class="w-full px-4 py-3 bg-white rounded-lg border-2 border-gray-200 focus:border-[#2A2D5E] focus:ring-0 transition-all duration-300 group-hover:scale-[1.01] placeholder-transparent peer" placeholder=" " type="email"/>
    <label class="absolute left-4 top-2 text-gray-400 text-sm transition-all duration-300 peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-focus:-top-2 peer-focus:text-sm peer-focus:text-[#2A2D5E]">
     Email
    </label>
    <div class="absolute right-3 top-3 animate-spin hidden">
     <svg class="w-6 h-6 text-[#FF6B35]" fill="none" stroke="currentColor" viewbox="0 0 24 24">
      <path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
      </path>
     </svg>
    </div>
   </div>
   <div class="relative group">
    <div class="w-full px-4 py-3 bg-white rounded-lg border-2 border-dashed border-gray-300 hover:border-[#2A2D5E] transition-colors duration-300 cursor-pointer">
     <div class="flex items-center space-x-2 text-gray-500">
      <span>
       📤
      </span>
      <span>
       Drag files or click to upload
      </span>
     </div>
    </div>
   </div>
  </div>
  <div class="flex items-center space-x-4">
   <div class="flex items-center">
    <input class="w-5 h-5 text-[#2A2D5E] border-2 border-gray-300 rounded focus:ring-[#FF6B35]" type="checkbox"/>
    <label class="ml-2 text-gray-600">
     Agree to terms
    </label>
   </div>
   <button class="px-8 py-3 bg-gradient-to-r from-[#2A2D5E] to-[#FF6B35] text-white rounded-lg hover:scale-105 transition-transform duration-300 font-medium">
    Submit
   </button>
  </div>
  <div class="mt-6 p-4 bg-red-100 rounded-lg hidden items-center space-x-2 text-red-600">
   <span>
    ⚠️
   </span>
   <p>
    Validation error message example
   </p>
  </div>
  <div class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center">
   <div class="bg-white p-8 rounded-lg flex items-center space-x-4">
    <div class="animate-spin">
     <svg class="w-8 h-8 text-[#FF6B35]" fill="none" stroke="currentColor" viewbox="0 0 24 24">
      <path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
      </path>
     </svg>
    </div>
    <p class="text-gray-600">
     Processing...
    </p>
   </div>
  </div>
 </form>
</div>


<template>
 <div class="min-h-screen p-8 bg-[#F8F9FA]">
  <form class="max-w-6xl mx-auto space-y-6">
   <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="relative group">
     <input class="w-full px-4 py-3 bg-white rounded-lg border-2 border-gray-200 focus:border-[#2A2D5E] focus:ring-0 transition-all duration-300 group-hover:scale-[1.01] placeholder-transparent peer" placeholder=" " type="text"/>
     <label class="absolute left-4 top-2 text-gray-400 text-sm transition-all duration-300 peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-focus:-top-2 peer-focus:text-sm peer-focus:text-[#2A2D5E]">
      Username
     </label>
     <div class="absolute inset-0 rounded-lg border-2 border-transparent group-hover:border-[#FF6B35] opacity-0 group-hover:opacity-30 transition-all duration-300 -z-10">
     </div>
    </div>
    <div class="relative group">
     <input class="w-full px-4 py-3 bg-white rounded-lg border-2 border-gray-200 focus:border-[#2A2D5E] focus:ring-0 transition-all duration-300 group-hover:scale-[1.01] placeholder-transparent peer" placeholder=" " type="email"/>
     <label class="absolute left-4 top-2 text-gray-400 text-sm transition-all duration-300 peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-focus:-top-2 peer-focus:text-sm peer-focus:text-[#2A2D5E]">
      Email
     </label>
     <div class="absolute right-3 top-3 animate-spin hidden">
      <svg class="w-6 h-6 text-[#FF6B35]" fill="none" stroke="currentColor" viewbox="0 0 24 24">
       <path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
       </path>
      </svg>
     </div>
    </div>
    <div class="relative group">
     <div class="w-full px-4 py-3 bg-white rounded-lg border-2 border-dashed border-gray-300 hover:border-[#2A2D5E] transition-colors duration-300 cursor-pointer">
      <div class="flex items-center space-x-2 text-gray-500">
       <span>
        📤
       </span>
       <span>
        Drag files or click to upload
       </span>
      </div>
     </div>
    </div>
   </div>
   <div class="flex items-center space-x-4">
    <div class="flex items-center">
     <input class="w-5 h-5 text-[#2A2D5E] border-2 border-gray-300 rounded focus:ring-[#FF6B35]" type="checkbox"/>
     <label class="ml-2 text-gray-600">
      Agree to terms
     </label>
    </div>
    <button class="px-8 py-3 bg-gradient-to-r from-[#2A2D5E] to-[#FF6B35] text-white rounded-lg hover:scale-105 transition-transform duration-300 font-medium">
     Submit
    </button>
   </div>
   <div class="mt-6 p-4 bg-red-100 rounded-lg hidden items-center space-x-2 text-red-600">
    <span>
     ⚠️
    </span>
    <p>
     Validation error message example
    </p>
   </div>
   <div class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center">
    <div class="bg-white p-8 rounded-lg flex items-center space-x-4">
     <div class="animate-spin">
      <svg class="w-8 h-8 text-[#FF6B35]" fill="none" stroke="currentColor" viewbox="0 0 24 24">
       <path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
       </path>
      </svg>
     </div>
     <p class="text-gray-600">
      Processing...
     </p>
    </div>
   </div>
  </form>
 </div>
</template>
<script>
 export default {
    name: 'MyFormComponent',
    data() {
        return {
        
        }
    },
    methods: {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>
<style scoped="">
</style>



import React from "react";
const MyFormComponent = () => {
    return (
<div>
<div class="min-h-screen p-8 bg-[#F8F9FA]">
 <form class="max-w-6xl mx-auto space-y-6">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
   <div class="relative group">
    <input class="w-full px-4 py-3 bg-white rounded-lg border-2 border-gray-200 focus:border-[#2A2D5E] focus:ring-0 transition-all duration-300 group-hover:scale-[1.01] placeholder-transparent peer" placeholder=" " type="text"/>
    <label class="absolute left-4 top-2 text-gray-400 text-sm transition-all duration-300 peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-focus:-top-2 peer-focus:text-sm peer-focus:text-[#2A2D5E]">
     Username
    </label>
    <div class="absolute inset-0 rounded-lg border-2 border-transparent group-hover:border-[#FF6B35] opacity-0 group-hover:opacity-30 transition-all duration-300 -z-10">
    </div>
   </div>
   <div class="relative group">
    <input class="w-full px-4 py-3 bg-white rounded-lg border-2 border-gray-200 focus:border-[#2A2D5E] focus:ring-0 transition-all duration-300 group-hover:scale-[1.01] placeholder-transparent peer" placeholder=" " type="email"/>
    <label class="absolute left-4 top-2 text-gray-400 text-sm transition-all duration-300 peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-focus:-top-2 peer-focus:text-sm peer-focus:text-[#2A2D5E]">
     Email
    </label>
    <div class="absolute right-3 top-3 animate-spin hidden">
     <svg class="w-6 h-6 text-[#FF6B35]" fill="none" stroke="currentColor" viewbox="0 0 24 24">
      <path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
      </path>
     </svg>
    </div>
   </div>
   <div class="relative group">
    <div class="w-full px-4 py-3 bg-white rounded-lg border-2 border-dashed border-gray-300 hover:border-[#2A2D5E] transition-colors duration-300 cursor-pointer">
     <div class="flex items-center space-x-2 text-gray-500">
      <span>
       📤
      </span>
      <span>
       Drag files or click to upload
      </span>
     </div>
    </div>
   </div>
  </div>
  <div class="flex items-center space-x-4">
   <div class="flex items-center">
    <input class="w-5 h-5 text-[#2A2D5E] border-2 border-gray-300 rounded focus:ring-[#FF6B35]" type="checkbox"/>
    <label class="ml-2 text-gray-600">
     Agree to terms
    </label>
   </div>
   <button class="px-8 py-3 bg-gradient-to-r from-[#2A2D5E] to-[#FF6B35] text-white rounded-lg hover:scale-105 transition-transform duration-300 font-medium">
    Submit
   </button>
  </div>
  <div class="mt-6 p-4 bg-red-100 rounded-lg hidden items-center space-x-2 text-red-600">
   <span>
    ⚠️
   </span>
   <p>
    Validation error message example
   </p>
  </div>
  <div class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center">
   <div class="bg-white p-8 rounded-lg flex items-center space-x-4">
    <div class="animate-spin">
     <svg class="w-8 h-8 text-[#FF6B35]" fill="none" stroke="currentColor" viewbox="0 0 24 24">
      <path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
      </path>
     </svg>
    </div>
    <p class="text-gray-600">
     Processing...
    </p>
   </div>
  </div>
 </form>
</div>

</div>
    )
}
export default MyFormComponent;

Recommended Related Components

More+

Responsive User Registration Form

The form is used for user sign-up or registration processes on websites and applications, allowing users to input their details securely.

43
0

User Registration Form

It is designed to be used in user registration, account creation, or any scenario where user data collection is required.

37
0

Gradient Auth Form

Used for user login or registration pages where a modern and visually appealing interface is desired.

10
0