Home » Programming » Membuat Form Signup/Pendaftaran Keren Dengan CSS3
form signup example

Membuat Form Signup/Pendaftaran Keren Dengan CSS3

Membuat Form Signup/Pendaftaran Keren Dengan CSS3

Form signup css3, membuat template form pendaftaran keren/sign up dengan html dan css3 mudah, desain yang bersih dan elegan.




Tidak afdol rasanya jika kita membuat sebuah form login tanpa membuat form sign-up atau pendaftaran.

contoh form pendaftaran

Login dan sign-up adalah hal yang saling berkaitan, karena sebelum bisa masuk ke sebuah system atau web maka kita wajib melakukan pendaftaran.

Untuk pendaftaran sendiri user biasanya lebih senang menggunakan akun media social miliknya karna tidak perlu repot mengisi data yang diminta, user hanya tinggal mengaitkan akun social media miliknya dengan situs.

Untuk desain form yang akan wowotek bagikan ini telah dilengkapi dengan tombol social media yang elegan, tampilannya juga sangat clean mungkin anda akan suka ketika melihatnya.

Form ini menggunakan css3 manual, untuk kesekian kalinya wowotek tidak membuat desain template form dengan bootstrap.

Kenapa?, karena wowotek ingin mencari suasana yang lebih seru, hehe.

Oke tanpa basa-basi lagi mari kita langsung ke tutorialnya, tapi sebelum itu siapkan dulu bahan-bahannya:

Apa Saja Yang Diperlukan?

  • Html teks editor
  • Gambar pendukung
  • Kopi, teh atau waktu luang.

Cara Membuat Form Signup Keren Dengan CSS3

Berikut ini langkah-langkah sederhana yang bisa kalian ikuti:

Download Gambar Pendukung

Download file gambar pendukung diatas yang telah wowotek bagikan kemudian => ekstrak,

Selanjutnya pindahkan folder hasil ekstrak tadi ke lokasi yang mudah dicari.

Buat file Index.html

Buatlah sebuah file index didalam folder hasil ekstrak tadi, caranya => buka folder => klik kanan => new => file => namai “index.html” => kemudian open with => pilih html teks editor yang kalian pakai.

Baca :  Bootstrap Tutorial: Membuat Tabel Responsive

Atau anda bisa langsung membuka html teks editornya kemudian ketikkan kode dibawah lalu save difolder hasil ekstrak tadi dengan nama “index.html”.

Source code index.html:

<html>
<head>
<title>Signup Form Design</title>  

    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

    <div id="login-box">

      <div class="right-box">

        <h1> Sign Up</h1>         

          <input type="text" name="username" placeholder="Username"/>

          <input type="text" name="email" placeholder="Email"/>

          <input type="password" name="password" placeholder="Password"/>      

          <input type="password" name="password2" placeholder="Retype password"/>    

          <input type="submit" name="signup-button" value="Sign Up"/>       

        </div>

        <div class="left-box">

          <span class="signinwith">Sign in with<br/>Social Network     </span>

        <div class="btn">

          <div class="icon-social fb"><img src="facebook.png" ></div><button class="size facebook">Log in with Facebook</button>

          <div class="icon-social twit"><img src="twitter.png" ></div><button class="size twitter">Log in with Twitter</button>

          <div class="icon-social g"><img src="google-plus.png" ></div><button class="size google">Log in with Google+</button>

        </div>       

        </div>

        <div class="or">

          <img src="right-arrow-1.png" >

        </div>

    </div>

  </body>   

</html>

Buat file Style.css

Buatlah sebuah file style.css, caranya sama seperti membuat index.html

Source code:

body

{

    margin: 0;

    padding: 0;

    background: #efefef;

    font-size: 16px;

    color: #777;

    font-family: sans-serif;

    font-weight: 300;

}

#login-box

{

    position: relative;

    margin: 5% auto;

    height: 400px;

    width: 600px;

    background: #fff;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);

}

.left-box

{

    position: absolute;

    top: 0;

    left: 0;

    box-sizing: border-box;

    padding: 40px;

    width: 300px;

    height: 400px;

    background: #d95563;

    background: linear-gradient(to bottom,#ff8177,#b12a5b 100%);

}

h1

{

    margin: 0 0 20px 0;

    font-weight: 300;

    font-size: 28px;

}

input[type="text"],

input[type="password"]

{

    display: block;

    box-sizing: border-box;

    margin-bottom: 20px;

    padding: 4px;

    width: 220px;

    height: 32px;

    border-radius: 7px;

    border: none;

    outline: none;

    border-bottom: 1px solid #aaa;

    font-family: sans-serif;

    font-weight: 400;

    font-size: 15px;

    transition: 0.2s ease;

}

input[type="submit"]

{

    margin-bottom: 28px;

    width: 120px;

    height: 32px;

    background: #d95563;

    border: none;

    border-radius: 2px;

    color: #fff;

    font-family: sans-serif;

    font-weight: 500;

    text-transform: uppercase;

    transition: 0.2s ease;

    cursor: pointer;

   

}




input[type="submit"]:hover,

input[type="submit"]:focus

{

    background: #eb6a6f;

    transition: 0.2s ease;

}

.right-box

{

    position: absolute;

    top: 0;

    right: 0;

    box-sizing: border-box;

    padding: 40px;

    width: 300px;

    height: 400px;

    background-size: cover;

    background-position: center;

   

}

.or>img

{

    position: absolute;

    top: 180px;

    left: 280px;

    width: 35px;

    height: 35px;

    background: #d95563;

    border-radius: 50%;

    line-height: 0;

    text-align: center;

}

.left-box .signinwith

{

    display: block;

    margin-bottom: 40px;

    font-size: 28px;

    color: #fff;

    text-align: center;

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);

}

.btn{

    width: 220px;

    height: 36px;

}

.size{

    width: 180;

    height: 36px;

    float: right;

    border: none;

    border-radius: 0px 2px 2px 0px;

    color: #fff;

    font-family: sans-serif;

    font-weight: 500;

    transition: 0.2s ease;

    cursor: pointer;

    margin-bottom: 20px;

}

.icon-social{

    width: 40px;

    height: 36px;

    float: left;

    margin-bottom: 20px;   

    border-radius: 2px 0px 0px 2px;

}

.icon-social>img{

    width: 30px;

    height: 30px;

    padding: 2px 0px 0px 2px;

}

button.social{

    margin-bottom: 20px;

    width: 220px;

    height: 36px;

    border: none;

    border-radius: 2px;

    color: #fff;

    font-family: sans-serif;

    font-weight: 500;

    transition: 0.2s ease;

    cursor: pointer;

}

.facebook

{

    background: #32508e;

}

.fb{

    background: #28498c;

}

.twitter

{

    background: #55acee;

}

.twit{

    background: #3c7da3;

}

.google

{

    background: #dd4b39;

}

.g{

    background: #a93329;   

}

Buka Index.html

Langkah selanjutnya jalankan file index.html, caranya : minimize html teks editor anda => pergi ke folder tempat anda menyimpan file index.html => klik kanan mouse => open with => chrome.

Baca :  4 Aplikasi HTML Editor Yang Sering Dipakai Anak Sekolah Hingga Profesional

Berikut tampilannya:

form signup example

Download Source Code Form Pendaftaran Dengan CSS3

 

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *