Cara Membuat Halaman Kontak di Blog

Cara Membuat Halaman Kontak di Blog - Halaman kontak (atau contact us, contact page) adalah salah satu komponen blog yang sering dibutuhkan oleh seorang penulis. Halaman ini berguna untuk memudahkan pengunjung untuk berkomunikasi dengan admin.

Hampir setiap platform penulisan menyediakan widget kontak agar lebih mudah dipasang. Namun tampilan akan sangat sederhana dan terkesan apa adanya. Bukan hanya itu, ukuran HTML template juga akan semakin membengkak.

Untuk mengatasi masalah tersebut, kita membutuhkan script yang nantinya akan dipasang sebagai halaman tulisan. Selain tidak memberatkan loading blog, tampilannya juga cukup menarik dipandang mata.

Langsung saja, berikut adalah tampilan lengkapnya:

Demo

Cara Membuat Halaman Kontak di Blog

Masuk ke BLOGGER
Pilih menu HALAMAN
Pilih TAMPILAN HTML
Tentukan judul halaman
Salin dan tempel script berikut ke dalam HTML halaman:

<!-- HTML -->
<div class="ContactForm" id="ContactForm1">
  <form name="cForm">
    <div class="cArea">
      <label>
        <input class="cInpt cName" id="ContactForm1_contact-form-name" name="name" type="text" />
        <span class="n">Nama</span>
      </label>
    </div>
    <div class="cArea">
      <label>
        <input class="cInpt cMail" id="ContactForm1_contact-form-email" name="email" type="email" />
        <span class="n req">Email</span>
      </label>
      <span class="h">Dibutuhkan email yang valid</span>
    </div>
    <div class="cArea">
      <label>
        <textarea class="cInpt cMsg" id="ContactForm1_contact-form-email-message" name="message" rows="3"></textarea>
        <span class="n req">Pesan</span>
      </label>
      <span class="h">Pesan tidak boleh kosong</span>
    </div>
    <div class="cArea">
      <input class="cBtn" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
    </div>
    <div class="cArea nArea">
      <p class="cNtf" id="ContactForm1_contact-form-error-message"></p>
      <p class="cNtf" id="ContactForm1_contact-form-success-message"></p>
    </div>
  </form>
</div>
<!-- End HTML -->

<!-- CSS -->
<style>
.ContactForm{max-width:500px;font-family:"Noto Sans",sans-serif;font-size:14px}.cArea:not(:last-child){margin-bottom:25px}.cArea label{display:block;position:relative}.cArea label .n{display:block;position:absolute;left:0;right:0;top:-5px;color:rgba(8,16,43,.4);line-height:1.6em;padding:15px 16px 0;border-radius:4px 4px 0 0;transition:all .1s ease}.cArea label .n.req::after{content:"*";font-size:85%}.cArea textarea{height:100px}.cArea textarea:focus,.cArea textarea[data-text=fl]{height:200px}.cArea input:focus~.n,.cArea textarea:focus~.n,.cArea input[data-text=fl]~.n,.cArea textarea[data-text=fl]~.n{padding-top:5px;color:rgba(8,16,43,.7);font-size:90%;background:#ececec}.cArea .h{display:block;font-size:90%;padding:5px 16px 0;opacity:.7;line-height:normal}.nArea .contact-form-error-message-with-border{color:#d32f2f}.nArea .contact-form-success-message-with-border{color:#2e7b32}
</style>
<!-- End CSS -->

<!-- JavaScript -->
<script src="https://www.blogger.com/static/v1/widgets/1997315711-widgets.js"></script>
<script>
if (typeof(BLOG_attachCsiOnload) !="undefined" && BLOG_attachCsiOnload !=null){
    window["blogger_templates_experiment_id"]="templatesV1";
    window["blogger_blog_id"]="xxxxxxxxxxxxxxxxxx";
    BLOG_attachCsiOnload("");
}
_WidgetManager._Init("//www.blogger.com/rearrange?blogID\xxxxxxxxxxxxxxxxxx","//www.namablog.com/","xxxxxxxxxxxxxxxxxx");
_WidgetManager._RegisterWidget("_ContactFormView",new _WidgetInfo("ContactForm1","side-widget",document.getElementById("ContactForm1"),{
    "contactFormMessageSendingMsg":"Mengirim...",
    "contactFormMessageSentMsg":"Pesan telah terkirim",
    "contactFormMessageNotSentMsg":"Pesan tidak dapat dikirim. Silahkan coba lagi!",
    "contactFormInvalidEmailMsg":"Email harus valid",
    "contactFormEmptyMessageMsg":"Pesan tidak boleh kosong",
    "title":"Contact Form",
    "blogId":"xxxxxxxxxxxxxxxxxx",
    "contactFormNameMsg":"Name",
    "contactFormEmailMsg":"Email",
    "contactFormMessageMsg":"Message",
    "contactFormSendMsg":"Send",
    "contactFormToken":"AOuZoY7-XrSBXLF-FtHPwPSNXVpjQNlsCA:1657932657881",
    "submitUrl":"https://www.blogger.com/contact-form.do"
},"displayModeFull"))
</script>
<!-- End JavaScript -->

Pilih PUBLIKASIKAN
Selesai.

Catatan

Ganti xxxxxxxxxxxxxxxxxx dengan id blog Anda.

Ganti www.namablog.com dengan nama blog Anda.

Pada kode yang saya tandai warna coklat, silahkan mengganti dengan token blog Anda. Untuk mendapatkan token tersebut, silahkan mengikuti langkah berikut:

Masuk ke BLOGGER
Pilih menu TATA LETAK
Pilih TAMBAHKAN GADGET
Pilih FORMULIR KONTAK > SIMPAN

Pada browser yang digunakan, buka view-source:https://www.namaweb.com/
Tekan CTRL + F dan cari contactFormToken
Langsung saja salin dan tempel pada kode yang ditandai coklat sebelumnya
Selesai.

Penutup

Penggunaan halaman kontak memang telah menjadi trend bagi blogger sekarang ini. Selain memberikan kesan yang lebih profesional, pengunjung juga dapat berkomunikasi dengan admin tanpa harus membuka email lagi.

Rekomendasi:

Disclaimer: Script yang dibagikan di artikel kali ini dibuat oleh www.jagodesain.com dan dimodifikasi oleh www.wendycode.com.

Cukup sekian artikel tentang Cara Membuat Halaman Kontak di Blog ini, Terima kasih.