Cara Membuat Form Newsletter Dengan HTML Dan CSS

Unknown February 19, 2018 CSS Comment

Hai semuanya, pada tutorial kali ini kita akan belajar membuat design form newsletter dengan HTML dan CSS, langsung kita mulai belajar cara membuatnya.

Bila anda ingin mendownload source code tutorial ini, anda dapat mendownloadnya pada link dibawah ini.

Download

Pertama, kita membutuhkan library Font Awesome untuk menggunakan sebuah icon, untuk menggunakan library Font Awesome, silahkan copy dan paste tag link ini dibawah tag <head>.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Kedua, tulis syntax HTML seperti dibawah ini.

<form action="#" method="get">
  <div class="icon">
    <span class="fa fa-envelope"></span>
  </div>
  <p><strong>Newsletter</strong></p>
  <p>Dapatkan artikel terbaru dari kami, langsung via email anda.</p>
  <label><span class="fa fa-user"></span> Nama Lengkap
    <input type="text" placeholder="Masukkan nama lengkap anda">
  </label>
  <label><span class="fa fa-envelope-o"></span> Email
    <input type="email" placeholder="Masukkan email yang valid">
  </label>
  <button type="submit"><span class="fa fa-send"></span> Kirim</button>
</div>

Selanjutnya, jika anda telah menulis syntax HTML diatas, tulis syntax CSS seperti dibawah ini.

form{
      width: 100%;
      max-width: 300px;
      padding: 15px;
      text-align: center;
      background-color: #199e46;
      color: #fff;
    }

    label,input{
      display: block;
      margin-bottom: 12px;
      font-size: 12px;
    }

    input{
      width: 100%;
      padding: 10px 14px;
      border-radius: 20px;
      border: none;
      margin-top: 7px;
      box-sizing: border-box;
      color: #199e46;
    }

    button{
      padding: 10px;
      width: 100%;
      border: none;
      border-radius: 20px;
      background-color: #199e46;
      border: 2px solid #fff;
      color: #fff;
      cursor: pointer;
      transition: .3s;
    }
    button:hover{
      background-color: #fff;
      color: #199e46;
    }
    .icon{
      width: 150px;
      height: 150px;
      margin: auto;
      border-radius: 50%;
      background-color: #fff;
      color: #199e46;
      line-height: 150px;
      text-align: center;
      font-size: 100px;
    }

Untuk hasilnya, anda dapat melihat hasilnya pada gambar dibawah ini.

Bagaimana menurut anda, design form newsletternya udah bagus atau belum nih ?

Demikian, cara membuat design form newsletter dengan HTML dan CSS, semoga anda tertarik belajar membuatnya. Jika ada kesalahan, kekurangan atau hal hal lainnya silahkan tulis komentar anda pada kolom komentar dibawah ya, terima kasih

Semoga Bermanfaat.