Cara Membuat Formulir Pengisian Data Di Blog

BAHASTUTORIAL.COM - Tutorial kali ini kita bakal bahas tentang "Cara Membuat Formulir Pengisian Data Di Blog". Jika kalian yang ingin membuat form khusus untuk sebuah pendaftaran kalian bisa menggunakan form ini. Untuk menerapkan tutorial kali ini kalian tidak usah menuju edit html/ edit widget gadget karna pada tutorial kali ini kalian cukup masukan kode di halaman postingan / page saja . Namun ditutorial kali ini kalian harus ngulik sendiri untuk link sumbit nya. Mau mengarah kemana link sumbitnya atau bisa Ke Whatsapps Dan Bisa Juga Ke Email.

Langsung saja ke tutorial ya ..

1. Masuk ke Blogger
2. Membuat Postingan / Halaman Page Baru
3. Kode pada table Html simpan di halaman page / postingan pada mode html
4. Lalu Simpan

HTML

<div class="container">
    <div class="header">
      <h1>Beasiswa Kelas Menjadi Developer</h1>
      <p>Informasi detail dapat dilihat pada blogspot berikut https://bahastutorail/iklan</p>
    </div>
    <div class="content">
      <p>You are submitting your response to customer_care@outlook.com. Do not provide personal or sensitive information.</p>
      <span>*</span> Required
      <br>
      <br>
      <div class="form-row">
        <label for="nama">1. Nama Lengkap <span>*</span></label>
        <input class="full-input" type="text" placeholder="Enter your answer" required>
      </div>
      <div class="form-row">
        <label for="nama">2. Jenis Kelamin <span>*</span></label>
        <input type="radio" name="gender" value="Laki-laki">Laki-laki
        <br>
        <input type="radio" name="gender" value="Perempuan">Perempuan
      </div>
      <div class="form-row">
        <label for="nama">3. Email Akun <span>*</span></label>
        <input class="full-input" type="text" placeholder="Enter your answer" required>
      </div>
      <div class="form-row">
        <label for="nama">4. Nomor Handphone Aktif <span>*</span></label>
        <input class="full-input" type="text" placeholder="Enter your answer" required>
      </div>
      <div class="form-row">
        <label for="nama">5. Nomor Whatsapp</label>
        <p class="italic">*Abaikan jika sama dengan nomor handphone.</p>
        <input class="full-input" type="text" placeholder="Enter your answer">
      </div>
      <div class="form-row">
        <label for="nama">6. Kota Domisili <span>*</span></label>
        <input class="full-input" type="text" placeholder="Enter your answer" required>
      </div>
      <div class="form-row">
        <label for="nama">7. Pekerjaan <span>*</span></label>
        <input type="radio" name="profesi">Profesional IT
        <br>
        <input type="radio" name="profesi">Pengajar IT
        <br>
        <input type="radio" name="profesi">Pelajar/Mahasiswa
        <br>
        <input type="radio" name="profesi"><input class="short-input" type="text" placeholder="Other">
      </div>
      <div class="form-row">
        <label for="nama">8. Nama Instansi Kampus/Kantor Atau Keterangan Lainnya <span>*</span></label>
        <input class="full-input" type="text" placeholder="Enter your answer" required>
      </div>
      <div class="form-submit">
        <button><a href="https://www.bahastutorial.com">Submit</a></button>
      </div>
    </div>
  </div>
<style type='text/css'>
.container {
  width: 800px;
  margin: auto;
  margin-top: 50px;
  padding: 0 14px;
  box-sizing: border-box;
}
.header {
  width: 100%;
  background-color: royalblue;
  text-align: center;
  padding: 20px 0;
  color: #fff;
}
.content {
  background-color: #fff;
  padding: 50px 50px 50px 30px;
  line-height: 24px;
}
.content span {
  color: red;
  font-weight: bold;
}
label {
  display: block;
  padding: 10px 0;
}
.form-row {
  padding-right: 40px;
  margin-bottom: 50px;
}
.full-input {
  width: 100%;
  margin-left: 18px;
  padding: 12px;
}
input[type=radio] {
  margin-left: 18px;
  margin-right: 8px;
  margin-bottom: 14px;
}
.italic {
  margin-left: 18px;
  margin-top: -10px;
  font-size: 14px;
  font-style: italic;
  color: #555;
}
.short-input {
  width: 100px;
  margin: 0 18px 0 0;
  padding: 12px;
}
.form-submit {
  margin-top: 100px;
}
.form-submit button {
  padding: 14px 38px;
  background-color:#006DB2;
  color: #fff;
  border: none;
  cursor: pointer;
}
.form-submit button:hover {
  background-color: #008272;
}

@media(max-width: 768px) {
  .container {
    width: 100%;
  }
}
</style>

Notes

- Semua tutorial di situs bahastutorial sudah di test dan hasilnya berjalan dengan baik.
- Ganti Url bahastutorial.com dengan url yang kalian inginkan contohnya menuju email anda

Bagaimana tutorial diatas apakah sudah jelas atau masih ada yang kurang jelas.
Jika ada yang masih kurang paham kalian bisa tanyakan langsung di kolom komentar.
Admin akan merespon dan memberikan solusi agar kalian bisa menjalankanya dengan benar.

Jangan lupa share artikel ini ke media sosial kalian yah. Semoga Bermanfaat ..

Demo
Click here