CARA MEMBUAT CONTACT US HTML CSS

Pada artikel ini, kami akan membahas tentang cara membuat halaman ‘Contact Us’ dengan memanfaatkan HTML dan CSS. Halaman ‘Contact Us’ adalah halaman yang sangat penting dalam sebuah website, karena melalui halaman ini pengunjung dapat berinteraksi langsung dengan kamu. Maka dari itu, memiliki halaman ‘Contact Us’ yang menarik dan user-friendly sangatlah penting.

Langkah Pertama: Membuat Struktur HTML

Untuk memulai, hal pertama yang harus kamu lakukan adalah membuat struktur HTML. Kamu bisa mulai dengan membuat form kontak sederhana dengan input field untuk nama, email, dan pesan.

<form id="contact-form">
    <label for="name">Nama:</label>
    <input type="text" id="name" name="name" required>

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

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

    <button type="submit">Kirim Pesan</button>
</form>

Dengan code di atas, kamu telah berhasil membuat form kontak sederhana. Selanjutnya, kamu perlu menggabungkan form ini dengan CSS untuk membuatnya tampil lebih menarik.

Langkah Kedua: Menambahkan CSS

CSS adalah bahasa yang digunakan untuk mengatur tampilan dan layout halaman web. Kamu bisa menambahkan CSS ke form kontakmu dengan menambahkan <style> tag di header HTML atau dengan menggunakan external CSS file.

Sebagai contoh, berikut adalah kode CSS untuk membuat form kontak terlihat lebih menarik:

#contact-form {
    width: 500px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
}

#contact-form label,
#contact-form input,
#contact-form textarea {
    width: 100%;
    margin-top: 20px;
}

#contact-form button {
    display: block;
    width: 100px;
    margin: 20px auto;
    padding: 10px;
    background-color: #ccc;
    color: #000;
    border: none;
}

Simpan kode CSS di atas dalam file CSS yang di-link ke halaman HTMLmu. Dalam contoh ini, CSS akan membuat form kontak berada di tengah halaman, dan mengatur margin, padding, dan warna latar tombol submit.

Dengan menambahkan CSS, form kontak yang dibuat dengan HTML sekarang sudah memiliki tampilan yang lebih menarik. Namun, kamu masih bisa berkreasi lebih lanjut sesuai kebutuhan dan selera desainmu.

Jangan lupa untuk selalu mengecek tampilan website di berbagai perangkat untuk memastikan bahwa desainmu responsif dan user-friendly. Semoga langkah-langkah di atas bisa membantu kamu membuat halaman ‘Contact Us’ yang menarik dan interaktif!