Membuat Form Kontak dengan CSS

Membuat Form Kontak dengan CSS

—

by

Webbiz.ID
in

Berikut ini adalah contoh kode untuk membuat form kontak dengan menggunakan CSS:

HTML
<!DOCTYPE html>
<html>
<head>
    <title>Form Kontak</title>
    <style>
        .form-kontak {
            width: 300px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f2f2f2;
            border-radius: 5px;
        }

        .form-kontak label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
        }

        .form-kontak input[type="text"],
        .form-kontak textarea {
            width: 100%;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        .form-kontak button {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        .form-kontak button:hover {
            background-color: #45a049;
        }

        @keyframes fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        .form-kontak {
            animation: fadeIn 1s;
        }
    </style>
</head>
<body>
    <div class="form-kontak">
        <h2>Form Kontak</h2>
        <form>
            <label for="nama">Nama:</label>
            <input type="text" id="nama" name="nama" required>

            <label for="email">Email:</label>
            <input type="text" id="email" name="email" required>

            <label for="pesan">Pesan:</label>
            <textarea id="pesan" name="pesan" required></textarea>

            <button type="submit">Kirim</button>
        </form>
    </div>
</body>
</html>
HTML

Anda dapat menggunakan kode di atas untuk membuat form kontak dengan tampilan yang menarik dan animasi fadeIn saat form muncul. Anda dapat menyesuaikan tampilan form sesuai dengan kebutuhan Anda dengan mengubah properti CSS yang ada.

Artikel Terbaru ⭐