[ UPDATE ] Cara Membuat Contact Us Blogger

Di Artikel kali cara menambahkan dan membuat contact us atau contact form di blogger dengan mudah dan contact us atau contact form sangat bermanfaat bagi pengunjung yang mengunjungi blog atau situs anda untuk mengirimkan pesan singkat atau pesan yang ditujukan dari website atau blog kepada anda.

Anda dapat membuat dan menambahkan contact us pada blogger untuk mempermudah pembaca yang sedang membaca beberapa tulisan anda di postingan yang sudah anda post, lalu menghubungi anda dengan mudah.

Untuk itu, mari ikuti dan simak pada bagian bawah ini mengenai cara buat contact us atau contact form di blog dan mudah untuk diterapkan.

Tutorial Membuat Contact Us / Contact Form Pada Blogger

Untuk menambahkan dan membuat contact form atau contact us di blogger dengan mudah dan sudah diperbaharui agar lebih responsif terhadap template blog atau situs anda tentunya, mari ikuti langkah-langkah dengan tutorialnya sebagai berikut.

Langkah-Langkah

1. Pertama sekali, anda terlebih dahulu login kedalam blogger

2. Masuk kebagian dashboard blog milik anda

3. Lalu pergi kebagian Halaman

4. Pilih Buat Halaman Baru

5. Tampilan blogger terbaru pastinya akan bergambar pensil, nah ada dua pilihan yang harus dipilih dan untuk memasang contact us blogger dengan kode html pada tutorial kali ini, maka pilih Tampilan HTML saja

6. Lalu Copy Kode Contact Us Blogger dibawah ini

<div class="form-wrapper">

  <form action="https://formsubmit.co/example@gmail.com" method="POST" target="_blank">

    <div class="form-section">

      <div class="form-row">

        <div class="input-column">

          <label for="name">Name<span class="required-mark">*</span></label>

          <input type="text" name="name" required="" class="input-control">

        </div>

        <div class="input-column">

          <label for="email">Email<span class="required-mark">*</span></label>

          <input type="email" name="email" required="" class="input-control">

        </div>

      </div>

    </div>

    <div class="form-section">

      <label for="message">Message<span class="required-mark">*</span></label>

      <textarea name="message" required="" rows="10" class="textarea-control"></textarea>

    </div>

    <button type="submit" class="submit-button">Submit Form</button>

  </form>

</div>

<style>

.input-control, .textarea-control {

  border: 1px solid; 

  display: block;

  width: 100%;

  outline: 0;

  padding: 15px 15px;

  margin-bottom: 0px;

} 

label {

  display: inline-block;

  font-size: medium;

  margin-bottom: .5rem;

}

.submit-button {

  background: #343a40;

  color: white;

  border: none;

  padding: 15px 20px;

  margin-top: 10px;

  text-align: center;

  vertical-align: middle;

  cursor: pointer;

  width: 100%;

}

.submit-button:hover {

  color: #fff;

  background-color: #23272b;

  border-color: #1d2124;

}

.required-mark {

  color: red;

  margin-left: 4px;

}

</style>

7. Setelah itu save atau simpan

Nah, dibagian kode atas ini jangan lupa ganti email dengan email anda, agar ketika nanti pengunjung mengirimkan pesan dari emailnya menggunakan contact us diblog atau situs anda, bisa mempermudah pengiriman pesan langsung tertuju ke email anda tersebut.

Jika sudah disimpan anda dapat melihat tampilannya seperti contoh gambar diatas yang sudah saya tampilan sebagai contoh yang bisa anda pergunakan nantinya untuk pasang contact us diblogger dengan mudah agar pengunjung bisa menghubungi anda dan pembaca artikel anda bisa mengirimkan pesan lewat email dikirimkan ke email anda untuk bisa anda balas tentunya.