Di bawah ini kita akan mempelajari cara membuat formulir popup dengan CSS dan JavaScript.
Form Popup
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {font-family: Arial, Helvetica, sans-serif;} * {box-sizing: border-box;} /* Button yang digunakan untuk membuka contact form - dipasang di bagian bawah halaman */ .open-button { background-color: #555; color: white; padding: 16px 20px; border: none; cursor: pointer; opacity: 0.8; position: fixed; bottom: 23px; right: 28px; width: 280px; } /* form popup - disembunyikan secara default */ .form-popup { display: none; position: fixed; bottom: 0; right: 15px; border: 3px solid #f1f1f1; z-index: 9; } /* Tambahkan styles ke container form */ .form-container { max-width: 300px; padding: 10px; background-color: white; } /* Lebar maksimum untuk field input */ .form-container input[type=text], .form-container input[type=password] { width: 100%; padding: 15px; margin: 5px 0 22px 0; border: none; background: #f1f1f1; } /* Saat inputan menjadi fokus, lakukan sesuatu */ .form-container input[type=text]:focus, .form-container input[type=password]:focus { background-color: #ddd; outline: none; } /* atur a style untuk submit/login button */ .form-container .btn { background-color: #4CAF50; color: white; padding: 16px 20px; border: none; cursor: pointer; width: 100%; margin-bottom:10px; opacity: 0.8; } /* Tambahkan warna merah untuk button cancel */ .form-container .cancel { background-color: red; } /* Tambahkan beberapa efek hover ke button */ .form-container .btn:hover, .open-button:hover { opacity: 1; } </style> </head> <body> <h2>Conton Form Popup</h2> <p>Klik tombol di bagian bawah halaman ini untuk membuka form login. </p> <p> Perhatikan bahwa button dan form sudah ditetapkan - mereka akan selalu diposisikan di bagian bawah jendela browser.</p> <button class="open-button" onclick="openForm()">Buka Form</button> <div class="form-popup" id="myForm"> <form action="/action_page.php" class="form-container"> <h1>Login</h1> <label for="email"><b>Email</b></label> <input type="text" placeholder="Enter Email" name="email" required> <label for="psw"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="psw" required> <button type="submit" class="btn">Login</button> <button type="button" class="btn cancel" onclick="closeForm()">Close</button> </form> </div> <script> function openForm() { document.getElementById("myForm").style.display = "block"; } function closeForm() { document.getElementById("myForm").style.display = "none"; } </script> </body> </html>
Cara Membuat Form Popup
Langkah 1) Tambahkan HTML
Gunakan elemen <form>
untuk memproses masukan.
Contoh
<div class="form-popup" id="myForm"> <form action="/action_page.php" class="form-container"> <h1>Login</h1> <label for="email"><b>Email</b></label> <input type="text" placeholder="Enter Email" name="email" required> <label for="psw"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="psw" required> <button type="submit" class="btn">Login</button> <button type="submit" class="btn cancel" onclick="closeForm()">Close</button> </form> </div>
Langkah 2) Tambahkan CSS:
Contoh
* {box-sizing: border-box;} /* Button yang digunakan untuk membuka contact form - dipasang di bagian bawah halaman */ .open-button { background-color: #555; color: white; padding: 16px 20px; border: none; cursor: pointer; opacity: 0.8; position: fixed; bottom: 23px; right: 28px; width: 280px; } /* form popup - disembunyikan secara default */ .form-popup { display: none; position: fixed; bottom: 0; right: 15px; border: 3px solid #f1f1f1; z-index: 9; } /* Tambahkan styles ke container form */ .form-container { max-width: 300px; padding: 10px; background-color: white; } /* Lebar maksimum untuk field input */ .form-container input[type=text], .form-container input[type=password] { width: 100%; padding: 15px; margin: 5px 0 22px 0; border: none; background: #f1f1f1; } /* Saat inputan menjadi fokus, lakukan sesuatu */ .form-container input[type=text]:focus, .form-container input[type=password]:focus { background-color: #ddd; outline: none; } /* atur a style untuk submit/login button */ .form-container .btn { background-color: #4CAF50; color: white; padding: 16px 20px; border: none; cursor: pointer; width: 100%; margin-bottom:10px; opacity: 0.8; } /* Tambahkan warna merah untuk button cancel */ .form-container .cancel { background-color: red; } /* Tambahkan beberapa efek hover ke button */ .form-container .btn:hover, .open-button:hover { opacity: 1; }
Langkah 3) Tambahkan JavaScript:
Contoh
function openForm() { document.getElementById("myForm").style.display = "block"; } function closeForm() { document.getElementById("myForm").style.display = "none"; }