Cara Membuat Halaman Kontak di Blogger

Dalam dunia blogging, membangun komunikasi tanpa batas dengan pengguna adalah bagian terpenting. Form kontak berfungsi sebagai alat atau media yang sangat diperlukan, memungkinkan pengunjung untuk terhubung dengan Anda atau memberikan umpan balik yang berharga, mengajukan pertanyaan. Artikel ini bertujuan untuk memberikan Anda tutorial membuat form kontak pada Blogger.

Related Posts

Menambahkan HTML Pada Halaman Blog

• Masuk ke akun Blogger Anda dan buka Dashboard situs web Anda.
• Arahkan ke halaman lalu klik tanda + atau buat halaman baru.
• Di editor Blogger, alihkan ke mode HTML.
• Salin kode HTML di bawah ini dan tempel ke editor HTML.

<div class="my-contact-form">
  <form
    action="https://formsubmit.co/youremail@email.com"
    method="POST"
    id="contact-form"
  >
    <div>
      <label class="my-contact-form-label" for="name">Name:</label>
      <input class="my-contact-form-input" type="text" id="name" name="name" required />
    </div>
    <div>
      <label class="my-contact-form-label" for="email">Email:</label>
      <input class="my-contact-form-input" type="email" id="email" name="email" required />
    </div>
    <div>
      <label class="my-contact-form-label" for="message">Message:</label>
      <textarea class="my-contact-form-input" id="message" name="message" required></textarea>
    </div>
    <input type="hidden" name="_captcha" value="false" />
    <input type="hidden" name="_template" value="table" />
    <input
      type="hidden"
      name="_next"
      value="https://www.agungprastiyo.com/p/konfirmasi.html"
    />
    <button class="my-contact-form-btn" type="submit">Send</button>
  </form>
</div>

Silahkan ganti email youremail@email.com dengan email Anda. Dan https://www.agungprastiyo.com/p/konfirmasi.html ubah url ini dengan url halaman Anda.

Copy Code CSS dan Paste di bawah HTML

Untuk kode CSS silahkan tambahkan <style> dan </style>

  .my-contact-form{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.my-contact-form form{
  	width: 100%
}
.my-contact-form-label{
    display: block;
    font-weight: 600;
    font-size: 16px;
    color: #07074d;
    margin: 12px 0;
}
.my-contact-form-input{
    width: 100%;
    padding: 12px 0px !important;
    text-indent: 10px !important;
    border-radius: 6px !important;
    border: 1px solid #e0e0e0 !important;
    background: white !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    color: #6b7280 !important;
    outline: none !important;
    resize: none !important;
}
.my-contact-form-input:focus{
  border-color: #6a64f1 !important;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05) !important;
}
.my-contact-form-btn {
    text-align: center;
    font-size: 16px;
    border-radius: 6px;
    padding: 14px 32px;
    border: none;
    font-weight: 600;
    background-color: #6a64f1;
    color: white;
    width: 100%;
    cursor: pointer;
  	margin-top: 12px;
}
.my-contact-form-btn:hover {
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
}

Setelah itu publish halaman ini yang sudah dibuat.

Menambahkan halaman konfirmasi

• Sekarang buat halaman baru dan beri judul "Konfirmasi".
• Setelah itu salin Kode HTML dan CSS di bawah ini dan tempel di dalam Kode Editor.
• Sekarang, publikasikan halaman ini.
• Salin URL halaman ini dan tempel di dalam kode HTML yang saya berikan sebelumnya.

<div class="content">
  <div class="wrapper-1">
    <div class="wrapper-2">
      <h2 class="thank-you">Terima Kasih !</h2>
      <p>Terima kasih telah mengirimkan email kepada Saya.<br> Saya akan segera membalas Anda.</p>
      <a class="button" href="YOUR BLOG URL HERE">Go To Home</a>
    </div>
  </div>
</div>

Untuk kode CSS silahkan tambahkan <style> dan </style>

 @import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
  .pTtl{
  	display:none;
  }
    .wrapper-1{
    width:100%;
    height:100vh;
    display: flex;
  flex-direction: column;
      border-radius: 15px;
  }
  .wrapper-2{
    padding :30px;
    text-align:center;
  }
  .thank-you{
      font-family: 'Kaushan Script', cursive !important;
    font-size:4em;
    letter-spacing:3px;
    color:#5892FF ;
    margin:0 !important;
    margin-bottom:20px;
  }
  @media (min-width:600px){
    .content{
    max-width:1000px;
    margin:0 auto;
  }
    .wrapper-1{
    height: initial;
    max-width:620px;
    margin:0 auto;
    margin-top:50px;
    box-shadow: 4px 8px 40px 8px rgba(88, 146, 255, 0.2);
  }
}

Jangan lupa untuk mengganti URL Anda di Kode HTML

Script Code diatas sudah Saya coba dan berhasil jika Anda mengalami kendala, bisa dicoba kembali dengan lebih teliti atau bisa tulis kendala di kolom komentar untuk Saya bantu selanjutnya.

Go to Link