Cara Membuat Halaman Contact di Blog

Halaman Contact adalah sebuah formulir untuk pengunjung berkomunikasi secara privat dengan pemilik blog, seperti: ingin bertanya-tanya, saran maupun kritik bisa juga menjadi halaman untuk mengajukan partnet atau berkolaborasi.
Membuat Halaman Contact di Blogger
Tarbiyyator - Halaman Contact adalah sebuah formulir untuk pengunjung berkomunikasi secara privat dengan pemilik blog, seperti: ingin bertanya-tanya, saran maupun kritik bisa juga menjadi halaman untuk mengajukan partnet atau berkolaborasi.

Halaman ini sangatlah penting untuk situs/ blog. Bisa dijadikan indikator untuk keseriusan dalam mengelola, sehingga dapat menambah kepercayaan pengunjung terhadap apa yang ada di dalamnya.

Sebenarnya Blogger sudah menyediakan widget untuk contact ini. Namun, pada kesempatan kali ini admin akan membuat halaman tersebut terpisah supaya untuk memudahkan pengunjung dan tidak memberatkan kinerja blog.

Oke, silahkan simak tahap-tahap pembuatannya.

Cara Membuat Halaman Contact Dengan Mudah

  1. Buka dashboard Blogger sobat.
  2. Pilih menu Halaman > Halaman Baru.
  3. Klik mode HTML (Jangan Compose), dan salin kode dibawah ini.
  4. <script>
    var blogId = '13477711311111xxxxx';
    var contactFormMessageSendingMsg ='Mengirim...';
    var contactFormMessageSentMsg = 'Pesan sudah dikirim. Semoga Anda bahagia.';
    var contactFormMessageNotSentMsg = 'Pesan tidak dapat dikirim. Coba lagi nanti.';
    var contactFormEmptyMessageMsg = 'Bidang pesan harus diisi.';
    var contactFormInvalidEmailMsg = 'Alamat email harus valid.'
    
    var widgetLoaded=false;
    function sendEmailMsg() {
    if(widgetLoaded== false) {
    _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
    widgetLoaded=true;
    document.getElementById('ContactForm1_contact-form-submit').click();
    }
    return true;
    }
    </script>
    <div class="Form">
    <form name="contact-form">
    <p></p>
    Nama
    <br />
    <input class="contact-form-name" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
    <p></p>
    Email
    <span style="font-weight: bolder;">*</span><br />
    <input class="contact-form-email"style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
    <p></p>
    Pesan
    <span style='font-weight: bolder;'>*</span>
    <br />
    <textarea class="contact-form-email-message" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
    <p></p>
    <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Kirim" />
    <p></p>
    <div style="max-width: 400px; text-align: center; width: 100%;">
    <p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
    <p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
    </div>
    </form>
    </div>
    Nb: Ganti tulisan yang sudah ditandai dengan ID blog sobat.
  5. Tahap terakhir, jangan lupa Simpan.
Gimana mudah bukan cara membuatnya? Itulah Cara Membuat Halaman Contact di Blog yang dapat saya bagikan, semoga bermanfaat dan apabila ada pertanyaan silahkan sobat kirim melalui kolom komentar. Sampai jumpa, sekian dan terima kasih.