Skip to content Skip to sidebar Skip to footer

Form Bukutamu Keren dengan Efek Tulisan Keren

Halo kawan, sudah lama tidak posting artikel ya hehehe, kali ini saya akan membahas bagaimana cara membuat Form bukutamu keren dengan efek tulisan keren, nah untuk yang satu ini berbeda dengan yang dulu, buat kalian yang masih belum tahu model form bukutamu yang dulu bisa dibaca link dibawah ini :


Keunggulan dari form bukutamu yang ini adalah, keunggulan desainnya terdapat pada tulisan yang timbul keluar, berikut tampilannya :
Cara membuat form bukutamu efek keren
Tampilan Form Bukutamu

Untuk kalian yang ingin gambar seperti diatas bisa didownload gambar dengan tulisan Bukutamu dibawah ini, caranya klik kanan gambar dibawah ini, kemudian pilih Views Images :


nah lalu bagaimana cara membuat form bukutamunya...? oke langsung saja kita mulai

1). Buat folder dengan nama bukutamu, kemudian copy source code HTML dibawah ini dan simpan dengan nama index.html

Source Code HTML
<!doctype html>
<html>
    <head>
        <title>Bukutamu Dunia Programming</title>
            <link rel="stylesheet" href="style.css" type="text/css">
    </head>
        <body>
            <form name="form1" enctype="multipart/form-data" method="post" action="Simpan.php">
                <div id="utama">
                    <img src="H.png">
                    <div id="inputan">
                        <div>
                            <input class="nama" name="Nama" type="text" id="TxtNama" size="38" maxlength="25" placeholder="Nama">
                        </div>
                        <div>
                            <input class="alamat" name="Alamat" type="text" id="TxtAlamat" size="38" maxlength="35" placeholder="Alamat"></td>
                        </div>
                        <div>
                            <input class="email" name="Email" type="email" id="TxtEmail" size="38" maxlength="30" placeholder="Email"></td>
                        </div>
                        <div>
                            <input class="kota" name="Kota" type="text" id="TxtKota" size="38" maxlength="20" placeholder="Kota"></td>
                        </div>
                        <div>
                            <textarea name="Pesan" placeholder="Pesan Anda"></textarea>
                        </div>
                        <div>
                            <input class="gambar" name="gambar" type="file" id="gambar" size="30">
                        </div>
                        <div>
                            <div>
                                <input class="button" type="submit" name="submit" value="Simpan">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
</body>
</html>

2). Copy source code CSS dibawah ini, lalu simpan dengan nama style.css

Source Code CSS
body {
    background: #222;
}
a {
    text-decoration: none;
}
input {
    padding: 10px;
    background: #ffffff;
    border: 1px solid #c9c9c9;
    border-radius: 5px;
    color: #000000;
    margin-bottom: 4px;
    margin-left: 7px;
}
textarea {
    padding: 10px;
    width: 276px;
    background: #ffffff;
    border: 1px solid #c9c9c9;
    border-radius: 5px;
    color: #000000;
    margin-bottom: 4px;
    margin-left: 7px;
}
#utama {
    width: 350px;
    margin: 0 auto;
    margin-top: -35px;
}
#judul {
    font-size: 20px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom: 3px solid #336666;
}
#inputan {
    background-color: #ccc;
    padding: 20px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
input.nama {
    background: #ffffff url(images/user.png)no-repeat 7px 9px;
    border: 1px solid #c9c9c9;
    border-radius: 3px;
    height: 25px;
    padding: 8px;
    padding-left: 37px;
    margin-bottom: 8px;
       
    transition: 1s all;
    -moz-transition: 1s all;
    -o-transition: 1s all;
}
input.alamat {
    background: #ffffff url(images/maps.png)no-repeat 7px 9px;
    border: 1px solid #c9c9c9;
    border-radius: 3px;
    height: 25px;
    padding: 8px;
    padding-left: 37px;
    margin-bottom: 8px;
       
    transition: 1s all;
    -moz-transition: 1s all;
    -o-transition: 1s all;
}
input.email {
    background: #ffffff url(images/mail.png)no-repeat 7px 9px;
    border: 1px solid #c9c9c9;
    border-radius: 3px;
    height: 25px;
    padding: 8px;
    padding-left: 37px;
    margin-bottom: 8px;
       
    transition: 1s all;
    -moz-transition: 1s all;
    -o-transition: 1s all;
}
input.kota {
    background: #ffffff url(images/kota.png)no-repeat 7px 9px;
    border: 1px solid #c9c9c9;
    border-radius: 3px;
    height: 25px;
    padding: 8px;
    padding-left: 37px;
    margin-bottom: 8px;
       
    transition: 1s all;
    -moz-transition: 1s all;
    -o-transition: 1s all;
}
input.gambar {
    background: #ccc;
    color: #ffffff;
    height: 40px;
}
input:focus {
    border: 1px solid #26C281;
       
    transition: 1s all;
    -moz-transition: 1s all;
    -o-transition: 1s all;
}
.button {
    background: #1abc9c;
    color: #ffffff;
    border: 1px solid #1abc9c;
    width: 295px;
    margin-top: 10px;
   
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
}
.button:hover {
    background: #16a085;
    color: #ffffff;
    border: 1px solid #16a085;
   
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
}
.button-op {
    background: #1abc9c;
    color: #ffffff;
    border: 1px solid #1abc9c;
    width: 100px;
    margin-top: 10px;
    margin-left: 0px;
   
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
}
.button-op:hover {
    background: #16a085;
    color: #ffffff;
    border: 1px solid #16a085;
   
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
}

Setelah langkah diatas kalian lakukan, kemudian, klik file index.html untuk melihat hasilnya

Bagaimana...? keren bukan, pastinya dong keren, dan tentunya beda dengan bukutamu yang dulu.

Lalu, bagaimana ya cara memfungsikan bukutamu diatas, agar bisa digunakan layaknya sebuah program..?

Baca : 
Baca : 

Sekian tutorial dari saya, apabila kalian mengalami kesulitan dalam pembuatan form Bukutamu, silahkan kalian dapat meinggalkan komentar pada bagian bawah artikel ini. semoga bermanfaat.

Post a Comment for "Form Bukutamu Keren dengan Efek Tulisan Keren"

Berlangganan via Email