HTML
Form Kontak HTML CSS: Mudah & Cepat

Masdoni

Hari ini jam 15:52:00 — 7 min read
Berilmu.eu.org Hai semoga semua impianmu terwujud. Pada Hari Ini mari kita teliti HTML, CSS, Form, Web Development, Tutorial yang banyak dibicarakan orang. Artikel Ini Menawarkan HTML, CSS, Form, Web Development, Tutorial Form Kontak HTML CSS Mudah Cepat Tetap ikuti artikel ini sampai bagian terakhir.
Membuat sebuah form kontak yang interaktif dan responsif di website seringkali menjadi kebutuhan mendasar. Bukan hanya sekadar wadah untuk menerima pesan dari pengunjung, form kontak yang baik mencerminkan profesionalisme dan memudahkan komunikasi. Namun, bagi sebagian orang, proses ini bisa terasa rumit, terutama jika belum familiar dengan bahasa pemrograman seperti HTML dan CSS. Jangan khawatir, artikel ini hadir untuk membantumu mewujudkan form kontak impianmu dengan cara yang mudah dan cepat. Kita akan membahas langkah demi langkah, mulai dari struktur HTML dasar hingga sentuhan CSS yang mempercantik tampilan. Tujuannya, kamu bisa memiliki form kontak yang fungsional dan menarik tanpa perlu menghabiskan banyak waktu dan tenaga.
Form kontak yang efektif bukan hanya soal estetika, tetapi juga tentang kemudahan penggunaan. Pengunjung website harus dapat dengan mudah menemukan form tersebut, mengisi informasi yang dibutuhkan, dan mengirimkan pesan tanpa hambatan. Selain itu, form kontak juga harus terintegrasi dengan sistem backend yang memungkinkanmu menerima dan mengelola pesan-pesan tersebut. Oleh karena itu, kita akan membahas tidak hanya aspek visual, tetapi juga beberapa pertimbangan penting terkait fungsionalitas dan keamanan. Ingat, form kontak adalah jembatan antara kamu dan calon pelanggan, jadi pastikan jembatan itu kokoh dan mudah dilalui.
Dalam panduan ini, kita akan fokus pada implementasi form kontak menggunakan HTML untuk struktur dan CSS untuk tampilan. Kita tidak akan membahas aspek backend seperti pengiriman email atau penyimpanan data, karena itu memerlukan pengetahuan tentang bahasa pemrograman server-side seperti PHP atau Python. Namun, kita akan memberikan panduan dasar tentang bagaimana mengintegrasikan form kontak ini dengan layanan pihak ketiga yang dapat menangani pengiriman email secara otomatis. Dengan begitu, kamu bisa fokus pada pembuatan tampilan yang menarik dan fungsional, sementara urusan backend diserahkan kepada ahlinya.
Sebelum kita mulai, pastikan kamu memiliki editor teks favorit untuk menulis kode HTML dan CSS. Kamu juga perlu memiliki browser web untuk melihat hasil dari kode yang kamu tulis. Tidak ada persyaratan khusus untuk editor teks atau browser web, kamu bebas memilih yang paling nyaman digunakan. Yang terpenting, pastikan kamu memiliki koneksi internet yang stabil untuk mengakses referensi dan sumber daya online yang mungkin dibutuhkan selama proses pembuatan form kontak ini. Siap untuk memulai? Mari kita mulai petualangan coding ini!
Struktur Dasar HTML Form Kontak

Langkah pertama adalah membuat struktur dasar HTML untuk form kontak. Kita akan menggunakan elemen
sebagai wadah utama, dan elemen-elemen input seperti dan
</code> untuk menerima input dari pengguna.  Jangan lupa untuk menambahkan elemen <code><label></code> untuk memberikan deskripsi yang jelas untuk setiap input.  <b id="heading-7">Objek</b> Label ini sangat penting untuk aksesibilitas dan kemudahan penggunaan.  Berikut adalah contoh kode HTML dasar:</p><pre><code><form action= method=post>  <label for=nama>Nama:</label>  <input type=text id=nama name=nama required><br><br>  <label for=email>Email:</label>  <input type=email id=email name=email required><br><br>  <label for=pesan>Pesan:</label>  <textarea id=pesan name=pesan rows=4 cols=50 required></textarea><br><br>  <input type=submit value=Kirim Pesan></form></code></pre><p>Perhatikan atribut <code>required</code> pada elemen input. Atribut ini memastikan bahwa pengguna harus mengisi field tersebut sebelum dapat mengirimkan form.  Atribut <code>method=post</code> menentukan metode pengiriman data, dan <code>action=</code> menentukan URL tujuan pengiriman data.  Dalam contoh ini, kita menggunakan <code></code> sebagai placeholder, karena kita belum membahas aspek backend.  Kamu bisa menggantinya dengan URL yang sesuai setelah kamu mengimplementasikan backend.</p><h id="heading-8"><h3>Mempercantik Tampilan dengan CSS</h3></h><p>Setelah struktur HTML selesai, saatnya mempercantik tampilan form kontak dengan CSS.  Kita bisa menggunakan CSS untuk mengatur layout, warna, font, dan berbagai properti visual lainnya.  Berikut adalah contoh kode CSS sederhana:</p><pre><code>label {  display: block;  margin-bottom: 5px;}input[type=text],input[type=email],textarea {  width: 100%;  padding: 10px;  margin-bottom: 10px;  border: 1px solid ccc;  border-radius: 4px;  box-sizing: border-box;}input[type=submit] {  background-color: 4CAF50;  color: white;  padding: 12px 20px;  border: none;  border-radius: 4px;  cursor: pointer;}input[type=submit]:hover {  background-color: 3e8e41;}</code></pre><p>Kode CSS ini mengatur tampilan label, input teks, input email, textarea, dan tombol submit.  Kita menggunakan properti <code>display: block</code> untuk membuat label ditampilkan di baris baru, dan <code>margin-bottom</code> untuk memberikan jarak antara label dan input.  Properti <code>width: 100%</code> membuat input mengisi lebar container, dan <code>padding</code> memberikan ruang di sekitar teks input.  Properti <code>border</code> dan <code>border-radius</code> memberikan tampilan border yang lebih menarik.  <b id="heading-9">Objek</b> Tombol submit diberi warna hijau dengan teks putih, dan efek hover mengubah warna latar belakang saat mouse diarahkan ke atas tombol.</p><h id="heading-10"><h3>Membuat Form Kontak Responsif</h3></h><p>Di era perangkat mobile, penting untuk memastikan bahwa form kontakmu responsif, yaitu dapat menyesuaikan tampilannya dengan ukuran layar perangkat yang berbeda.  Kita bisa menggunakan media queries di CSS untuk mencapai hal ini.  Berikut adalah contoh kode CSS untuk membuat form kontak responsif:</p><pre><code>@media (max-width: 600px) {  input[type=text],  input[type=email],  textarea {    width: 100%;  }}</code></pre><p>Kode CSS ini mengatur lebar input menjadi 100% ketika lebar layar kurang dari 600px.  Dengan begitu, form kontak akan menyesuaikan diri dengan layar perangkat mobile dan tetap terlihat rapi.  Kamu bisa menyesuaikan nilai <code>max-width</code> sesuai dengan kebutuhan desainmu.  Pastikan untuk menguji form kontakmu di berbagai perangkat dan ukuran layar untuk memastikan responsivitasnya.</p><h id="heading-11"><h3><a href="/search?q=Validasi&results=all">Validasi</a> Form Kontak Sederhana</h3></h><p>Validasi form kontak adalah proses memeriksa apakah input yang dimasukkan oleh pengguna valid sebelum dikirimkan ke server.  Kita bisa menggunakan HTML5 validation attributes seperti <code>required</code>, <code>type=email</code>, dan <code>pattern</code> untuk melakukan validasi sederhana di sisi klien.  Namun, perlu diingat bahwa validasi sisi klien tidak cukup untuk keamanan, karena pengguna dapat mematikan JavaScript atau memodifikasi kode HTML.  Oleh karena itu, penting untuk melakukan validasi juga di sisi server.</p><h id="heading-12"><h3>Menambahkan Placeholder dan Label yang Jelas</h3></h><p>Placeholder adalah teks yang ditampilkan di dalam input field sebelum pengguna memasukkan data.  Placeholder dapat memberikan petunjuk kepada pengguna tentang format data yang diharapkan.  Label yang jelas juga sangat penting untuk membantu pengguna memahami apa yang harus diisi di setiap field.  Pastikan label dan placeholder konsisten dan mudah dipahami.</p><h id="heading-13"><h3>Menggunakan CSS Framework untuk Mempercepat Pengembangan</h3></h><p>Jika kamu ingin mempercepat pengembangan form kontak, kamu bisa menggunakan CSS framework seperti Bootstrap atau Tailwind CSS.  CSS framework menyediakan komponen-komponen UI yang sudah jadi, termasuk form, yang dapat kamu gunakan dan sesuaikan dengan kebutuhanmu.  Dengan menggunakan CSS framework, kamu tidak perlu menulis kode CSS dari awal, sehingga dapat menghemat waktu dan tenaga.</p><h id="heading-14"><h3>Integrasi dengan Layanan Pihak Ketiga</h3></h><p>Untuk menangani pengiriman email secara otomatis, kamu bisa mengintegrasikan form kontakmu dengan layanan pihak ketiga seperti Formspree atau Netlify Forms.  Layanan-layanan ini menyediakan endpoint API yang dapat kamu gunakan untuk mengirimkan data form ke server mereka, dan mereka akan menangani pengiriman email ke alamat yang kamu tentukan.  Integrasi dengan layanan pihak ketiga ini sangat memudahkan, karena kamu tidak perlu mengelola server email sendiri.</p><h id="heading-15"><h3>Tips Keamanan Form Kontak</h3></h><p>Keamanan form kontak sangat penting untuk melindungi website dan data pengguna dari serangan.  Berikut adalah beberapa tips keamanan yang perlu kamu perhatikan:<ul><li>Gunakan CAPTCHA untuk mencegah bot mengirimkan spam.</li><li>Validasi semua input di sisi server.</li><li>Enkripsi data form menggunakan HTTPS.</li><li>Lindungi endpoint API dari serangan.</li></ul></p><h id="heading-16"><h3>Contoh Form Kontak Lengkap</h3></h><p>Berikut adalah contoh kode HTML dan CSS lengkap untuk form kontak sederhana:</p><pre><code><!DOCTYPE html><html><head>  <title>Form Kontak</title>  <style>    label {      display: block;      margin-bottom: 5px;    }    input[type=text],    input[type=email],    textarea {      width: 100%;      padding: 10px;      margin-bottom: 10px;      border: 1px solid ccc;      border-radius: 4px;      box-sizing: border-box;    }    input[type=submit] {      background-color: 4CAF50;      color: white;      padding: 12px 20px;      border: none;      border-radius: 4px;      cursor: pointer;    }    input[type=submit]:hover {      background-color: 3e8e41;    }    @media (max-width: 600px) {      input[type=text],      input[type=email],      textarea {        width: 100%;      }    }  </style></head><body>  <form action= method=post>    <label for=nama>Nama:</label>    <input type=text id=nama name=nama required><br><br>    <label for=email>Email:</label>    <input type=email id=email name=email required><br><br>    <label for=pesan>Pesan:</label>    <textarea id=pesan name=pesan rows=4 cols=50 required></textarea><br><br>    <input type=submit value=Kirim Pesan>  </form></body></html></code></pre><h id="heading-17"><h3>Menguji Form Kontak</h3></h><p>Setelah kamu selesai membuat form kontak, penting untuk mengujinya secara menyeluruh.  Pastikan semua field berfungsi dengan benar, validasi bekerja seperti yang diharapkan, dan data form terkirim dengan benar.  Uji form kontak di berbagai perangkat dan browser untuk memastikan kompatibilitasnya.  Jangan ragu untuk meminta teman atau kolega untuk menguji form kontakmu dan memberikan feedback.</p><h id="heading-18"><h3>Akhir Kata</h3></h><p>Membuat form kontak HTML CSS yang mudah dan cepat ternyata tidak sesulit yang dibayangkan, bukan? Dengan panduan ini, kamu telah mempelajari langkah-langkah dasar untuk membuat form kontak yang fungsional dan menarik.  Ingatlah untuk selalu memperhatikan aspek keamanan dan responsivitas agar form kontakmu dapat digunakan oleh semua pengunjung website.  Selamat mencoba dan semoga berhasil!</p>
           <style>#relBefore {
  position: relative;
  margin-top: 42px;
  padding: 1.5em;
  border-top: 1px solid #f1f6fd;
  border-bottom: 1px solid #f1f6fd;
  font-size: 16px;
  margin-bottom: 0px;
}

#relBefore span {
  font-weight: 400;
  margin: 0;
  padding: 6px 14px;
  background-color: #fefefe;
  border: 1px solid #e6e6e6;
  border-radius: 15px;
  position: absolute;
  top: -15.5px;
  left: 20px;
}
div#relBefore a {
  display: contents;
  line-height: 2;
}
#relBefore ul {
  margin: 8px 0 0;
  padding-left: 20px;
}
#relBefore li {
list-style-type: none;
transition: all 0.4s ease;
background: transparent !important;
}</style><div id="relBefore">
<span>Baca Juga:</span>
<ul>
<li><a href="profil-web-sederhana-html-css-mudah">➝ Profil Web Sederhana: HTML & CSS Mudah</a></li>
  <li><a href="cloud-storage-simpan-data-aman-mudah">➝ Cloud Storage: Simpan Data Aman & Mudah.</a></li>
  <li><a href="embed-youtube-di-html-mudah-cepat">➝ Embed YouTube di HTML: Mudah & Cepat</a></li>
  
</ul>
</div>
  
           <p class="RNdf">Terima kasih telah mengikuti pembahasan <span><i>form kontak html css mudah  cepat</i></span> dalam html, css, form, web development, tutorial ini sampai akhir Moga moga artikel ini cukup nambah pengetahuan buat kamu tetap produktif dalam berkarya dan perhatikan kesehatan holistik.  Bagikan kepada yang perlu tahu tentang ini. jangan lupa cek artikel lainnya di bawah ini.</p>
           

           <!-- WG SHARE POST-->
         
 
        <!-- COMMENT INSD-->
        

        <!-- WG AI -->
        
        </section>
  
    </article>

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <style>

      div#slTop {
    margin-top: 60px!important;
}
        /* Basic styles */
        
        .owl-carousel .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
           
        }
        .item img {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
        }
        .owl-nav button {
            background: none;
            border: none;
            color: #4d0270; /* Change color as needed */
            font-size: 24px; /* Adjust size as needed */
            cursor: pointer; /* Ensure pointer cursor for clickable area */
            padding: 10px; /* Add padding for better click area */
        }
        .owl-nav button:hover {
            color: #c6005f; /* Change color on hover */
        }
    </style>


<div class="slTop section gh-outer" id="slTop">
  <h3 style="
    margin-bottom: 20px;
">Baca Juga: </h3>
    <div class="widget HTML" data-version="2" id="HTML14">
       
        <div class="widget-content">
            <div class="owl-carousel owl-loaded owl-drag">
                <div class="owl-stage-outer">
                    <div class="owl-stage">
                        <div class="owl-item" style="width: 250px;">
                            <div class="item">
                                <a href="/buat-favicon-website-html-mudah-cepat" title="Buat Favicon Website: HTML Mudah & Cepat">
                                    <img src="https://tse1.mm.bing.net/th?q=Buat+Favicon+Website:+HTML+Mudah+&+Cepat" alt="Buat Favicon Website: HTML Mudah & Cepat">
                                </a>
                                <h2 class="rect-title"><a href="/buat-favicon-website-html-mudah-cepat">Buat Favicon Website: HTML Mudah & Cepat</a></h2>
                                <div class="post-meta"><div class="rcDTe">Update jam 02:03:00</div></div>
                            </div>
                        </div><div class="owl-item" style="width: 250px;">
                            <div class="item">
                                <a href="/google-bard-ai-chatbot-fitur-penggunaan" title="Google Bard: AI Chatbot, Fitur & Penggunaan">
                                    <img src="https://tse1.mm.bing.net/th?q=Google+Bard:+AI+Chatbot,+Fitur+&+Penggunaan" alt="Google Bard: AI Chatbot, Fitur & Penggunaan">
                                </a>
                                <h2 class="rect-title"><a href="/google-bard-ai-chatbot-fitur-penggunaan">Google Bard: AI Chatbot, Fitur & Penggunaan</a></h2>
                                <div class="post-meta"><div class="rcDTe">Update jam 02:01:00</div></div>
                            </div>
                        </div><div class="owl-item" style="width: 250px;">
                            <div class="item">
                                <a href="/validasi-form-html-mudah-tanpa-javascript" title="Validasi Form HTML: Mudah Tanpa JavaScript">
                                    <img src="https://tse1.mm.bing.net/th?q=Validasi+Form+HTML:+Mudah+Tanpa+JavaScript" alt="Validasi Form HTML: Mudah Tanpa JavaScript">
                                </a>
                                <h2 class="rect-title"><a href="/validasi-form-html-mudah-tanpa-javascript">Validasi Form HTML: Mudah Tanpa JavaScript</a></h2>
                                <div class="post-meta"><div class="rcDTe">Update jam 01:02:00</div></div>
                            </div>
                        </div><div class="owl-item" style="width: 250px;">
                            <div class="item">
                                <a href="/link-building-strategi-cara-istilah-penting" title="Link Building: Strategi, Cara, & Istilah Penting">
                                    <img src="https://tse1.mm.bing.net/th?q=Link+Building:+Strategi,+Cara,+&+Istilah+Penting" alt="Link Building: Strategi, Cara, & Istilah Penting">
                                </a>
                                <h2 class="rect-title"><a href="/link-building-strategi-cara-istilah-penting">Link Building: Strategi, Cara, & Istilah Penting</a></h2>
                                <div class="post-meta"><div class="rcDTe">Update jam 01:00:00</div></div>
                            </div>
                        </div><div class="owl-item" style="width: 250px;">
                            <div class="item">
                                <a href="/slider-gambar-css-sederhana-tutorial-mudah" title="Slider Gambar CSS Sederhana: Tutorial Mudah">
                                    <img src="https://tse1.mm.bing.net/th?q=Slider+Gambar+CSS+Sederhana:+Tutorial+Mudah" alt="Slider Gambar CSS Sederhana: Tutorial Mudah">
                                </a>
                                <h2 class="rect-title"><a href="/slider-gambar-css-sederhana-tutorial-mudah">Slider Gambar CSS Sederhana: Tutorial Mudah</a></h2>
                                <div class="post-meta"><div class="rcDTe">Hari ini jam 00:01:00</div></div>
                            </div>
                        </div>
                    
                        <!-- Add more items similarly -->
                    </div>
                </div>
               
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function(){
        $('.owl-carousel').owlCarousel({
            loop: true,
            margin: 20,
            nav: true,
            items: 5, // Show 5 items on desktop
            autoplay: true,
            autoplayTimeout: 3000,
            autoplayHoverPause: true,
            responsive: {
                0: {
                    items: 1 // 1 item on mobile
                },
                600: {
                    items: 2 // 2 items on small tablets
                },
                992: {
                    items: 5 // 5 items on desktop
                }
            }
        });
    });
</script>


</main>
<footer class="gh-footer gh-outer">

<div class="gh-footer-inner gh-inner">
<div class="gh-footer-bar">
<span class="gh-footer-logo is-title"><img style="width:220px!important;height:auto!important;" alt="" class="ls-is-cached lazyloaded" src="https://ik.imagekit.io/masdoni/ChatGPT_Image_Jan_11__2026__07_38_40_-removebg-preview_nosqB8M7l.png" title=""></span>
<nav class="gh-footer-menu"><ul class="nav"><li><a href="https://berilmu.eu.org/tentang-kami">Tentang Kami</a></li><li><a href="https://berilmu.eu.org/hubungi-kami">Hubungi Kami</a></li><li><a href="https://berilmu.eu.org/kebijakan-privasi">Kebijakan Privasi</a></li><li><a href="https://berilmu.eu.org/syarat-dan-ketentuan">Syarat dan Ketentuan</a></li></ul></nav>
<div class="gh-footer-copyright">
Powered by <a href="/" target="_blank">berilmu.eu.org</a>
</div>
</div>

<section class="gh-footer-signup">
<h2 class="gh-footer-signup-header"><img style="width:220px!important;height:auto!important;" alt="" class="ls-is-cached lazyloaded" src="https://ik.imagekit.io/masdoni/ChatGPT_Image_Jan_11__2026__07_38_40_-removebg-preview_nosqB8M7l.png" title=""></h2>
<p class="gh-footer-signup-subhead">Platform edukasi teknologi gratis. Temukan tutorial Excel, belajar Python, tips AI terbaru, dan panduan produktivitas kerja yang praktis dan mudah dipahami.</p>

<style>
.social-share{display:flex; gap:12px; margin-top:20px; justify-content:center}
.social-share a{width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#fff!important; font-size:18px; transition:0.3s}
.social-share a:hover{opacity:0.8; transform:translateY(-3px)}
.facebook{background:#3b5998} .twitter{background:#1da1f2} .linkedin{background:#0077b5} .instagram{background:#e1306c} .whatsapp{background:#25D366}
</style>
<div class="social-share">
<a href="https://www.facebook.com/sharer/sharer.php?u=https://berilmu.eu.org" class="facebook" target="_blank"><i class="fab fa-facebook-f"></i></a>
<a href="https://twitter.com/intent/tweet?url=https://berilmu.eu.org" class="twitter" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="https://www.linkedin.com/shareArticle?url=https://berilmu.eu.org" class="linkedin" target="_blank"><i class="fab fa-linkedin-in"></i></a>
<a href="https://api.whatsapp.com/send?text=https://berilmu.eu.org" class="whatsapp" target="_blank"><i class="fab fa-whatsapp"></i></a>
</div>
</section>
</div>
</div>
</footer>
</div>

<div id="ghost-portal-root">
<style>
.gsmodal { position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999; display:flex; align-items:center; justify-content:center; background:#fff; visibility:hidden; opacity:0; transition:0.3s; }
.gsmodal.gsshow { visibility:visible; opacity:1; }
.gscontent { width:90%; max-width:600px; text-align:center; }
.gscontent input { width:100%; padding:15px; border:0; border-bottom:2px solid #eee; font-size:24px; outline:none; }
.gsclose { position:absolute; top:20px; right:20px; background:none; border:0; font-size:30px; cursor:pointer; }
</style>

<div class="gsmodal">
<button class="gsclose">×</button>
<div class="gscontent">
<form action="/search">
<input name="q" placeholder="Search..." required type="search">
<button type="submit" style="display:none"></button>
</form>
<p style="margin-top:15px; color:#888">Press Enter to search</p>
</div>
</div>
</div>

<script>
const triggers = document.querySelectorAll('.gh-search');
const modal = document.querySelector('.gsmodal');
const close = document.querySelector('.gsclose');

triggers.forEach(t => t.onclick = () => modal.classList.add('gsshow'));
close.onclick = () => modal.classList.remove('gsshow');
window.onclick = (e) => { if(e.target == modal) modal.classList.remove('gsshow'); }
</script>

<script src="https://cdn.jsdelivr.net/gh/iwgs/newswave@refs/heads/main/js/source.js?v=fce98be120"></script>
<script></script>  
<style>
  #bannerAds {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    user-select: none;
    cursor: default;
    box-sizing: border-box;
  }
  #bannerAds.fixed {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 50% !important;
    max-width: none !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important;
    z-index: 99999 !important;
    cursor: pointer;
  }
  #bannerAds img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: inherit;
    pointer-events: none;
    user-select: none;
  }
  #bannerAds .close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 18px;
    color: #444;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    user-select: none;
    z-index: 10;
  }
  #bannerAds .close-btn:hover,
  #bannerAds .close-btn:focus {
    background: #e53e3e;
    color: white;
    outline: none;
  }
  /* Text overlay container */
  #bannerAds .text-overlay {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.2;
    pointer-events: none;
    user-select: none;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  #bannerAds.fixed .text-overlay {
    font-size: 1.25rem;
    bottom: 16px;
    left: 16px;
    right: 16px;
  }
  /* Title container */
  #bannerAds .title {
    position: absolute;
    top: 12px;
    left: 20px;
    right: 60px;
    color: #222;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.2;
    user-select: none;
    pointer-events: none;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  #bannerAds.fixed .title {
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    top: 12px;
    left: 16px;
    right: 60px;
    font-size: 1.1rem;
  }
  /* Progress bar container */
  #bannerAds .progress-bar-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
  }
  #bannerAds.fixed .progress-bar-container {
    border-radius: 0 0 16px 16px;
  }
  /* Progress bar fill */
  #bannerAds .progress-bar-fill {
    height: 100%;
    background: #e53e3e;
    width: 0%;
    transition: width linear;
  }
  /* Responsive adjustments */
  @media (max-width: 400px) {
    #bannerAds.fixed {
      width: 90vw !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
    }
    #bannerAds .text-overlay {
      font-size: 1.1rem;
      bottom: 14px;
      left: 14px;
      right: 14px;
    }
    #bannerAds .title {
      font-size: 1rem;
      left: 14px;
      right: 50px;
    }
    #bannerAds.fixed .title {
      font-size: 1rem;
      left: 14px;
      right: 50px;
    }
  }
</style>
<!-- Banner Ads Container -->
<div
  aria-label="Promotional banner advertisement"
  id="bannerAds"
  role="region"
  tabindex="0"
>
  
  <button aria-label="Close banner ad" class="close-btn" id="closeBtn" type="button">
    <i aria-hidden="true" class="fas fa-times"></i>
  </button>
  <div class="title" aria-hidden="true">Display Ads</div>
  
      



  

  <div class="progress-bar-container" aria-hidden="true">
    <div class="progress-bar-fill" id="progressBar"></div>
  </div>
</div>
<script>
  (function () {
    const banner = document.getElementById("bannerAds");
    const closeBtn = document.getElementById("closeBtn");
    const progressBar = document.getElementById("progressBar");

    // Constants for timing
    const INITIAL_DELAY = 5000; // 5 seconds initial delay before fixed popup
    const BASE_INTERVAL = 10000; // 10 seconds base interval after close
    const DAY_MILLISECONDS = 24 * 60 * 60 * 1000;
    const AUTO_CLOSE_DURATION = 10000; // 10 seconds auto close duration when popup shown

    // Keys for localStorage
    const STORAGE_KEY = "bannerAdsState";

    // State object structure:
    // {
    //   lastCloseTime: timestamp in ms,
    //   currentIntervalMultiplier: number,
    //   lastShowTime: timestamp in ms
    // }

    // Initialize or reset state if 24 hours passed
    function getState() {
      const stateRaw = localStorage.getItem(STORAGE_KEY);
      if (!stateRaw) {
        return {
          lastCloseTime: 0,
          currentIntervalMultiplier: 1,
          lastShowTime: 0,
        };
      }
      try {
        const state = JSON.parse(stateRaw);
        if (Date.now() - state.lastCloseTime > DAY_MILLISECONDS) {
          // Reset after 24 hours
          return {
            lastCloseTime: 0,
            currentIntervalMultiplier: 1,
            lastShowTime: 0,
          };
        }
        return state;
      } catch {
        return {
          lastCloseTime: 0,
          currentIntervalMultiplier: 1,
          lastShowTime: 0,
        };
      }
    }

    function saveState(state) {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
    }

    // Show banner as fixed popup
    function showFixedPopup() {
      banner.style.display = "block";
      banner.classList.add("fixed");
      startProgressBar(AUTO_CLOSE_DURATION);
      startAutoCloseTimer(AUTO_CLOSE_DURATION);
    }

    // Show banner as normal full width banner (initial)
    function showInitialBanner() {
      banner.style.display = "block";
      banner.classList.remove("fixed");
      resetProgressBar();
      clearAutoCloseTimer();
    }

    // Hide banner
    function hideBanner() {
      banner.style.display = "none";
      resetProgressBar();
      clearAutoCloseTimer();
    }

    // Variables to hold timers
    let fixedPopupTimer = null;
    let recurringTimer = null;
    let autoCloseTimer = null;

    // Clear all timers except autoCloseTimer
    function clearTimers() {
      if (fixedPopupTimer) {
        clearTimeout(fixedPopupTimer);
        fixedPopupTimer = null;
      }
      if (recurringTimer) {
        clearTimeout(recurringTimer);
        recurringTimer = null;
      }
    }

    // Clear auto close timer
    function clearAutoCloseTimer() {
      if (autoCloseTimer) {
        clearTimeout(autoCloseTimer);
        autoCloseTimer = null;
      }
    }

    // Start the initial 5 second timer to show fixed popup
    function startInitialTimer() {
      showInitialBanner();
      fixedPopupTimer = setTimeout(() => {
        showFixedPopup();
        state.lastShowTime = Date.now();
        saveState(state);
      }, INITIAL_DELAY);
    }

    // Start recurring popup timer after close
    function startRecurringTimer() {
      clearTimers();
      const interval = BASE_INTERVAL * state.currentIntervalMultiplier;
      recurringTimer = setTimeout(() => {
        showFixedPopup();
        state.lastShowTime = Date.now();
        saveState(state);
      }, interval);
    }

    // Auto close popup after duration
    function startAutoCloseTimer(duration) {
      clearAutoCloseTimer();
      autoCloseTimer = setTimeout(() => {
        hideBanner();
        // Update state as if closed by user to increase interval multiplier
        state.lastCloseTime = Date.now();
        state.currentIntervalMultiplier++;
        saveState(state);
        startRecurringTimer();
      }, duration);
    }

    // Progress bar animation
    function startProgressBar(duration) {
      progressBar.style.transition = "none";
      progressBar.style.width = "0%";
      // Force reflow to restart transition
      void progressBar.offsetWidth;
      progressBar.style.transition = "width "+ duration + "ms linear";
      progressBar.style.width = "100%";
    }

    function resetProgressBar() {
      progressBar.style.transition = "none";
      progressBar.style.width = "0%";
    }

    // On close button click
    closeBtn.addEventListener("click", () => {
      hideBanner();
      clearTimers();
      clearAutoCloseTimer();

      // Update state
      state.lastCloseTime = Date.now();
      state.currentIntervalMultiplier++;
      saveState(state);

      // Start recurring timer with increased interval
      startRecurringTimer();
    });

    // On page load
    let state = getState();

    // If banner was closed less than 24h ago and last show time is recent, show fixed popup immediately
    // Otherwise start initial 5s timer
    if (
      state.lastCloseTime > 0 &&
      Date.now() - state.lastCloseTime < DAY_MILLISECONDS
    ) {
      // Calculate time passed since last close
      const timeSinceClose = Date.now() - state.lastCloseTime;
      const nextInterval = BASE_INTERVAL * state.currentIntervalMultiplier;

      if (timeSinceClose >= nextInterval) {
        // Show fixed popup immediately
        showFixedPopup();
        state.lastShowTime = Date.now();
        saveState(state);
        // Start next recurring timer with incremented multiplier
        state.currentIntervalMultiplier++;
        saveState(state);
        startRecurringTimer();
      } else {
        // Wait remaining time to show popup
        showInitialBanner();
        fixedPopupTimer = setTimeout(() => {
          showFixedPopup();
          state.lastShowTime = Date.now();
          saveState(state);
          state.currentIntervalMultiplier++;
          saveState(state);
          startRecurringTimer();
        }, nextInterval - timeSinceClose);
      }
    } else {
      // Reset multiplier and start initial 5s timer
      state.currentIntervalMultiplier = 1;
      saveState(state);
      startInitialTimer();
    }
  })();
</script>

</body>
<script>
void 0===localStorage.loc&&(localStorage.loc="3335000"); 
const uCore=["scroll"];uCore.forEach(function(event){window.addEventListener(event,ujLdrs,{passive:!0})});function ujLdrs(){rsccore(0);localStorage.setItem('star', 'load');uCore.forEach(function(event){window.removeEventListener(event,ujLdrs,{passive:!0})})}
function lscCore(){document.querySelectorAll("script[data-js-host='adsjs']").forEach(function(elem){elem.setAttribute("src",elem.getAttribute("attribute"))})}
const uCorecss=["scroll"];uCorecss.forEach(function(event){window.addEventListener(event,ujLdrscss,{passive:!0})});function ujLdrscss(){rsccore(0);localStorage.setItem('loc', '0');uCorecss.forEach(function(event){window.removeEventListener(event,ujLdrscss,{passive:!0})})}
function lscCorecss(){document.querySelectorAll("link[data-type='css']").forEach(function(elem){elem.setAttribute("href",elem.getAttribute("attribute"))
elem.setAttribute("rel", "stylesheet")
})} 
window.addEventListener(localStorage.getItem('star'), dcores,false);
function dcores(){
rsccore(0); 
}
var pvtr = 0;
const rsccore = (cffe) => {
if (cffe < 1) {
  setTimeout(() => {
    ++cffe
    rsccore(cffe);
pvtr +=1;
if(pvtr == 1){
lscCorecss();
lscCore();
var WGSLAZY = document.getElementsByTagName("img"); 
for (var i=0; i < WGSLAZY.length; i++) {
  if(WGSLAZY[i].getAttribute('oper-src')) {
     WGSLAZY[i].setAttribute('src',WGSLAZY[i].getAttribute('oper-src'));
}}
}
  }, 0);
}
}
</script>
</html>
Form Kontak HTML CSS: Mudah & Cepat

Masdoni

Table of Contents

Struktur Dasar HTML Form Kontak

Mempercantik Tampilan dengan CSS

Membuat Form Kontak Responsif

Validasi Form Kontak Sederhana

Menambahkan Placeholder dan Label yang Jelas

Menggunakan CSS Framework untuk Mempercepat Pengembangan

Integrasi dengan Layanan Pihak Ketiga

Tips Keamanan Form Kontak

Contoh Form Kontak Lengkap

Menguji Form Kontak

Akhir Kata

Struktur Dasar HTML Form Kontak
