Real Estate Contact Form | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Real Estate Contact</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
   
</head>

<body>

<section class="hero">
        <div class="content">
            <div class="left">
                <h1>Find Your Dream Property</h1>
                <p>Connect with our experts for premium homes, plots & apartments. We make buying & selling effortless.
                </p>
                <div class="badges">
                    <span>Verified Listings</span>
                    <span>24/7 Support</span>
                    <span>Trusted Agents</span>
                </div>
            </div>

<div class="form-box">
                <form id="contactReal">
                    <div class="group">
                        <input type="text" id="name" placeholder=" " required>
                        <label for="name">Full Name</label>
                    </div>
                    <div class="group">
                        <input type="email" id="email" placeholder=" " required>
                        <label for="email">Email Address</label>
                    </div>
                    <div class="group">
                        <input type="tel" id="phone" placeholder=" " required>
                        <label for="phone">Phone Number</label>
                    </div>
                    <div class="group">
                        <textarea id="msg" placeholder=" " rows="4" required></textarea>
                        <label for="msg">Message</label>
                    </div>
                    <button type="submit">Get Callback</button>
                </form>
            </div>
        </div>
    </section>

</body>

</html>

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Montserrat', sans-serif;
        }

body {
            background: #111;
            color: #fff;
        }

.hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: url('https://images.unsplash.com/photo-1598928506311-c55ded1f7c89?auto=format&fit=crop&w=1500&q=80') center/cover no-repeat;
            position: relative;
            overflow: hidden;
        }

.hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.55);
        }

.content {
            position: relative;
            z-index: 2;
            display: flex;
            gap: 60px;
            width: 90%;
            max-width: 1200px;
            flex-wrap: wrap;
            align-items: center;
        }

.left {
            flex: 1 1 350px;
        }

.left h1 {
            font-size: 48px;
            font-weight: 700;
            line-height: 1.2;
            animation: slideDown 1.2s ease forwards;
        }

.left p {
            margin: 20px 0;
            font-size: 18px;
            max-width: 420px;
            opacity: 0.85;
            animation: fade 1.6s ease forwards;
        }

.badges {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }

.badges span {
            background: #fff2;
            padding: 6px 14px;
            border-radius: 50px;
            font-size: 13px;
            backdrop-filter: blur(4px);
        }
        .badges span:hover {
            background: linear-gradient(45deg, #ff9800, #ff6a00);
        }
        .form-box {
            flex: 1 1 340px;
            background: #fff;
            color: #333;
            padding: 35px 30px;
            border-radius: 18px;
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
            animation: slideUp 1.4s ease forwards;
        }

form {
            display: flex;
            flex-direction: column;
            gap: 26px;
        }

.group {
            position: relative;
        }

.group input,
        .group textarea {
            width: 100%;
            padding: 14px 14px;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-size: 15px;
            background: transparent;
            outline: none;
        }

.group label {
            position: absolute;
            top: 14px;
            left: 16px;
            font-size: 15px;
            color: #777;
            pointer-events: none;
            background: #fff;
            padding: 0 4px;
            transition: .3s;
        }

.group input:focus+label,
        .group input:not(:placeholder-shown)+label,
        .group textarea:focus+label,
        .group textarea:not(:placeholder-shown)+label {
            top: -10px;
            left: 12px;
            font-size: 12px;
            color: #ff6a00;
        }

button {
            background: linear-gradient(45deg, #ff6a00, #ff9800);
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            padding: 14px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background .3s, transform .25s;
        }

button:hover {
            background: linear-gradient(45deg, #ff9800, #ff6a00);
            transform: translateY(-3px);
        }

@keyframes slideDown {
            0% {
                opacity: 0;
                transform: translateY(-40px);
            }

100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes slideUp {
            0% {
                opacity: 0;
                transform: translateY(40px);
            }

100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes fade {
            0% {
                opacity: 0;
            }

100% {
                opacity: 0.85;
            }
        }

@media(max-width:768px) {
            .content {
                flex-direction: column;
                gap: 40px;
            }

.left h1 {
                font-size: 34px;
            }
        }

JavaScript

Real Estate Contact Form Preview

Download Options