Cara Membuat Form Kontak Pada Blogspot

Kali ini saya akan menjelaskan cara membuat halaman kontak untuk Blogspot dengan form yang sudah saya sediakan. Teman-teman hanya perlu menyalin kode HTML dan menempelkannya ke halaman Kontak ataupun halaman Hubungi Kami di blog teman-teman. Tidak ada perubahan kode secara mendetail, metode sederhana dan mudah untuk halaman kontak.

Halaman kontak sendiri sangat penting bagi sebuah website untuk berkomunikasi dengan penggunanya. Pengguna dapat  menggunakan halaman form kontak yang disediakan di Situs Web untuk mengajukan pertanyaan, masalah, umpan balik atau permintaan, serta untuk menghubungi teman-teman menggunakan informasi kontak yang disediakan di halaman.

Blogspot memungkinkan teman-teman untuk menambahkan widget form kontak ke sidebar ataupun footer blog teman-teman. Tetapi, hal tersebut tidak terlihat profesional, jadi teman-teman harus memiliki halaman khusus, di mana teman-teman dapat membuat halaman kontak tersendiri.

Jadi teman-teman hanya perlu menambahkan code di bawah ini ke bagian "HTML" di halaman kontak teman-teman. Jadi disini saya sudah menyediakan form kontak untuk blog teman-teman. Untuk form kontak yang sudah saya sediakan ini hanya bekerja pada blogspot 1.0 dan juga 2.0. 

<style>
  input[type="text"],
  select,
  textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
  }

  input[type="button"] {
    background-color: #3385d9;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  input[type="button"]:hover {
    background-color: #2d79c4;
  }
</style>

<div class="contact-form-widget">
  <div class="form">
    <form name="contact-form">
      <p>Name</p>
      <input class="contact-form-name" id="ContactForm_contact-form-name" name="name" size="30" type="text" value="" />
      <p>Email<span style="font-weight: bolder">*</span></p>
      <input class="contact-form-email" id="ContactForm_contact-form-email" name="email" size="30" type="text" value="" />
      <p>Message<span style="font-weight: bolder">*</span></p>
      <textarea class="contact-form-email-message" cols="25" id="ContactForm_contact-form-email-message" name="email-message" rows="5"></textarea>
      <input class="contact-form-button contact-form-button-submit" id="ContactForm_contact-form-submit" type="button" value="Send" />
      <div style="text-align: center; width: 100%">
        <p class="contact-form-error-message" id="ContactForm_contact-form-error-message"></p>
        <p class="contact-form-success-message" id="ContactForm_contact-form-success-message"></p>
      </div>
    </form>
  </div>
</div>
<script src="https://www.blogger.com/static/v1/widgets/1997315711-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
  window["__wavt"] = "AOuZoY4PUAjvdPMazQDQJXJCrDFxkBfenw:1546660985916";
  _WidgetManager._Init("//www.blogger.com/rearrange?blogIDx3d6947900496059744469", "//blogspot.com", "6947900496059744469");
  _WidgetManager._SetDataContext([{ name: "widgets", data: [{ title: "Contact Form", type: "ContactForm", sectionId: "sidebar2", id: "ContactForm" }] }]);
  _WidgetManager._RegisterWidget(
    "_ContactFormView",
    new _WidgetInfo(
      "ContactForm",
      "sidebar2",
      document.getElementById("ContactForm"),
      {
        contactFormMessageSendingMsg: "Sending...",
        contactFormMessageSentMsg: "Your message has been sent :) ",
        contactFormMessageNotSentMsg: "Message could not be sent. Please try again later.",
        contactFormInvalidEmailMsg: "A valid email address is required.",
        contactFormEmptyMessageMsg: "Message field cannot be empty.",
        title: "Contact Form",
        blogId: "6947900496059744469",
        contactFormNameMsg: "Name",
        contactFormEmailMsg: "Email",
        contactFormMessageMsg: "Message",
        contactFormSendMsg: "Send",
        contactFormToken: "AOuZoY5n0jAnH1zJ1PxFo36Fs64S87_5yQ:1234567891234",
        submitUrl: "https://www.blogger.com/contact-form.do",
      },
      "displayModeFull"
    )
  );
</script>

Berikut ini merupakan tahapannya :

• Login ke akun blogspot teman-teman.
• Pada halaman dasbor, pilih menu halaman, kemudian tambah halaman baru.