Cara Membuat Laman Contact Form di Blogger

Penjelasan mengenai Widget Contact Form Blogger dan Cara memasang Contact Form di laman statis Blogger untuk menambah umpan balik dari penggunjung.

membuat laman formulir kontak pada blogger

Tentang Widget Contact Form

Secara umum, widget merupakan sebuah kumpulan kode sederhana yang berguna untuk melakukan fungsi atau menampilkan data tertentu, sedangkan Contact Form adalah sekumpulan masukan berbentuk formulir yang berguna untuk mengirimkan pesan kepada pemilik website atau blog tertentu.

Blogger sendiri juga menyediakan widget Contact Form yang dapat dipasang pada sidebar atau footer yang ada pada template Blogger, tetapi kendalanya adalah kebanyakan pengguna website biasanya menaruh formulir kontak tersebut pada laman khusus.
Nah, artikel kali ini akan membahas tentang tutorial pemasangan dan solusi permasalahan yang umum terjadi seputar Widget Contact Form di Blogger.

Langkah-langkah Membuat Laman Contact Form Blogger

  1. Pertama masuk ke menu Tata Letak di Dashboard Blogger.
  2. Lalu tambahkan widget Contact Form baru, disarankan menaruhnya di sidebar bagian bawah atau di footer. Pastikan pilihan Visible telah dicentang, pastikan juga bahwa widget ini muncul di tampilan laman statis. Klik Simpan.
  3. Masuk ke menu Laman, buat laman baru dengan judul Contact atau Formulir Kontak terserah, langsung klik simpan, untuk konten jangan diisi terlebih dahulu. Gunanya untuk membuat laman tersebut beralamat sesuai judulnya, contohnya seperti /p/contact.html atau /p/formulir-kontak.html. Jika ragu, laman tersebut bisa diterbitkan terlebih dahulu, lalu dibuka ke jendela baru untuk me-copy alamat URL-nya.
  4. Setelah di-Copy klik Urungkan ke Draf laman tersebut, lalu kembali ke dashboard blogger.
  5. Masuk ke menu Edit Template pada mode HTML.
  6. Cari widget Contact Form tadi dengan cara klik icon Jump to Widget dan klik pada tulisan ContactForm1, atau bisa juga dengan fitur search (Ctrl + F) dan ketikkan ContactForm1.

    Contoh cuplikan kodenya bisa dilihat di bawah ini.
    <b:widget cond='data:.view.url == "https://domain.blogspot.com/p/contact.html"' id='ContactForm1' locked='false' title='Contact Form' type='ContactForm' visible='true'>
     <b:includable id='main'>
      <div class='normalwidget-title'>
       <b:include name='widget-title'/>
      </div>
      <b:include name='content'/>
     </b:includable>
     <b:includable id='content'>
      <div class='contact-form-widget'>
       <div class='form'>
        <form name='contact-form'>
         <span class='input-label'><data:contactFormNameMsg/></span>
         <input aria-label='contact name' class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
         <span class='input-label'><data:contactFormEmailMsg/> <span class='required'>*</span></span>
         <input aria-label='contact email' class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
         <span class='input-label'><data:contactFormMessageMsg/> <span class='required'>*</span></span>
         <textarea aria-label='message' class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'></textarea>
         <input aria-label='submit button' class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
         <div class='contact-form-message-wrap'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
         </div>
        </form>
       </div>
      </div>
     </b:includable>
    </b:widget>

    Keterangan:
    • data:view.url untuk menampilkan widget tersebut hanya di halaman tertentu (dalam hal ini adalah laman contact form), ganti URL tersebut dengan tautan laman Contact Form yang telah disalin.
    • Ganti semua kode <b:includable id='content'> ... </b:includable> termasuk isinya, menjadi <b:includable id='content'/>
  7. Simpan Template.
  8. Copy dan paste kode di bawah ini ke laman sebelumnya. Pastikan dalam mode HTML.
    <div class='contact-form-widget'>
      <div class="form">
        <form name="contact-form">
          <span class="input-label">Name</span>
          <input aria-label="contact name" class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" placeholder="Nama">
          <span class="input-label">Email
            <span class="required">*</span></span>
          <input aria-label="contact email" class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" placeholder="nama@example.com">
          <span class="input-label">Message
            <span class="required">*</span></span>
          <textarea aria-label="message" class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
          <input aria-label="submit button" class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send">
          <div class="contact-form-message-wrap">
            <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>
    </div>
  9. Tambahkan kode ini di bawah kode di atas.
    <style>
     .contact-form-widget input[type=button]{background:#b13e3e;color:#ffffff}.contact-form-widget input[type=button]:hover{background:#923535}
     .contact-form-widget .form .input-label{font-size:14px;font-size:.875rem;opacity:.9}.contact-form-widget .form span.required{font-weight:700;color:red}.contact-form-widget .form input[type=text],.contact-form-widget .form select,.contact-form-widget .form textarea{width:100%;padding:12px 14px;margin:5px 0 20px;display:inline-block;border:1px solid #ccc;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box}.contact-form-widget .form input[type=button]{width:100%;padding:14px 20px;margin:8px 0;border:none;border-radius:4px;cursor:pointer;-webkit-transition:all .2s;transition:all .2s}.contact-form-widget .form .contact-form-message-wrap p.contact-form-error-message,.contact-form-widget .form .contact-form-message-wrap p.contact-form-error-message-with-border{color:#b34e27}.contact-form-widget .form .contact-form-message-wrap p.contact-form-success-message,.contact-form-widget .form .contact-form-message-wrap p.contact-form-success-message-with-border{color:#338a1d}
    </style>
  10. Coba di-publish dan klik pada tombol Kirim tanpa mengisi form tersebut, jika di bawahnya muncul error berarti Contact Form Blogger telah sukses dipasang. Jika tidak muncul apa-apa, berarti ada kesalahan. Biasanya dikarenakan template bloggernya menggunakan kode perangkap blogger. Tambahkan script ini di bagian bawah laman tersebut.
    <script>
     if (typeof (BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1"; window['blogger_blog_id'] = 'XXXXXXXXXXXXXXXXXXX'; BLOG_attachCsiOnload(''); } _WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dXXXXXXXXXXXXXXXXXXX', '//domain.blogspot.com//', 'XXXXXXXXXXXXXXXXXXX');
     _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar-content', document.getElementById('ContactForm1'), { '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': 'XXXXXXXXXXXXXXXXXXX', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do' }, 'displayModeFull'));
    </script>
    Jangan lupa, ganti kode XXXXXXXXXXXXXXXXXXX dengan Id Blog anda.
  11. Klik Publikasikan.

Untuk Tutorial Berbentuk Video, bisa dilihat di bawah ini:

Sekian tutorial kali ini, semoga bermanfaat.

Posting Komentar