Cara Memasang Widget Contact Form Di Bawah Kolom Posting Halaman Kontak Sebuah Blog

Sobat Blogger, seperti yang kita tahu bahwasanya apabila kita berkunjung ke sebuah blog, maka salah satu menu yang hampir pasti dapat kita temukan di sana adalah menu yang mengarah ke halaman kontak. Dimana biasanya di halaman ini dicantumkan beberapa informasi terkait dengan kontak, yang diantaranya misalnya adalah informasi mengenai alamat email, nomor telepon, dan atau informasi lain yang berhubungan dengan pengelola blog.

Salah satu maksud dan tujuan dari pembuatan halaman kontak yang mencantumkan beberapa informasi seperti tersebut di atas, tidak lain dan tidak bukan adalah untuk mempermudah seseorang ketika ingin menghubungi admin atau pengelola blog. Dan bahkan dengan maksud untuk lebih mempermudah seseorang dalam mengirimkan pesan, tidak jarang pula admin sebuah blog memanfaatkan layanan dari pihak ketiga untuk memasang formulir pengiriman email di halaman kontak. Akan tetapi pada kenyataannya bisa jadi cara tersebut belumlah begitu efektif karena jumlah pesan yang dapat dikirim dalam suatu waktu sifatnya hanya terbatas pada beberapa kali pengiriman pesan saja.

Nah, terkait dengan hal di atas sepertinya untuk saat ini kita tidak perlu lagi repot-repot memanfaatkan layanan dari pihak ketiga ketika ingin memberikan kemudahan pada pengunjung untuk mengirimkan pesan via email. Hal ini disebabkan karena untuk sekarang ini Blogger sendiri telah menyediakan widget baru yang dapat dipasang dan kemudian dimanfaatkan untuk mengirimkan pesan secara cepat ke alamat email admin atau pengelola blog. Dimana dalam pemasangannya pun terbilang cukup mudah karena yang perlu dilakukan hanyalah dengan menambahkan gadget tersebut melalui halaman ‘Layout/Tata Letak’ dan kemudian menambahkan widget ‘Contact Form'/Formulir Kontak’ seperti yang tampak pada gambar di bawah ini, sehingga akhirnya formulir kontak pun secara otomatis akan ditampilkan pada halaman blog yang kita kelola.

Sumber gambar: blogger.com

Akan tetapi setelah kita menambahkan widget tersebut, yang menjadi masalah sekarang adalah bahwasanya formulir kontak akan selalu ditampilkan pada setiap halaman sesuai dengan letak pemasangannya (sebagai contoh misalnya terletak pada area sidebar blog). Sehingga tentu saja hal yang seperti ini masih saja kurang efektif karena pada kenyataannya telah terdapat halaman khusus yang memberikan informasi tentang kontak yang dapat dihubungi.

Lantas bagaimana solusinya, apakah kita harus menghapus halaman kontak yang sebelumnya sudah ada? Jawabannya tentu saja tidak, karena ada sebuah solusi yang dapat digunakan untuk mengatasinya yaitu dengan cara memasang widget tersebut di bawah kolom posting halaman kontak. Dimana dengan cara pemasangan seperti ini, maka nantinya widget tersebut hanya akan ditampilkan di bawah bidang posting halaman kontak saja dan tidak akan pernah ditampilkan di halaman yang lain. Namun demikian perlu diketahui bahwa teknik pemasangan widget seperti ini tentu saja tidaklah semudah seperti pemasangan widget yang dilakukan melalui ‘Layout/Tata Letak’, karena teknik pemasangannya dilakukan secara langsung dengan menambahkan rangkaian kode yang digunakan ke dalam template.

Oke, selanjutnya apabila Sobat ingin melakukan pemasangan widget ‘Formulir Kontak’ dengan menggunakan teknik ini, maka urutan kerja yang perlu dilakukan adalah sebagai berikut.

Pertama, buka editor template.

Kedua, sisipkan CSS berikut ini dalam area skin. Dalam hal ini tepatnya adalah persis di atas ]]></b:skin>.

.contact-form-widget {
  height: auto;
  margin: 0px;
  max-width: 100%;
  padding: 0px;
  width: 100%;
}
.form{
  padding:4px 6px 4px 4px;
}
.contact-form-name, .contact-form-email{
  max-width: 50% !important;
  width: 50% !important;
}
.contact-form-email-message {
  width:100% !important;
  max-width: 100% !important;
  min-height: 175px;
}
.mobile .contact-form-email-message {
  width: 98.5% !important;
  max-width: 98.5% !important;
}
.contact-form-button-submit {
  margin: 10px 0px 6px 0px;
  float: right;
}

Ketiga, lompat ke widget ‘Blog1’ dan kemudian sisipkan rangkaian kode berikut ini tepat di bawah tag penutup untuk main section.

<b:section class='formulir-kontak' id='formulir-kontak' maxwidgets='1' showaddelement='no'>
  <b:widget id='ContactForm1' locked='true' mobile='yes' title='Formulir Kontak' type='ContactForm'>
    <b:includable id='main'>
      <b:if cond='data:blog.url == &quot;http://eltelu.blogspot.com/2012/10/tata-cara-menghubungi-admin-eltelu.html&quot;'>
        <b:include name='formulir'/>
      <b:else/>
        <b:if cond='data:blog.url == &quot;http://eltelu.blogspot.com/2012/10/tata-cara-menghubungi-admin-eltelu.html?m=0&quot;'>
          <b:include name='formulir'/>
        <b:else/>
          <b:if cond='data:blog.url == &quot;http://eltelu.blogspot.com/2012/10/tata-cara-menghubungi-admin-eltelu.html?m=1&quot;'>
            <b:include name='formulir'/>
          </b:if>
        </b:if>  
      </b:if>
    </b:includable>
    <b:includable id='formulir'>
      <b:if cond='data:title != &quot;&quot;'>
        <h2 class='title'><data:title/></h2>
      </b:if>
      <div class='contact-form-widget'>
        <div class='form'>
          <form name='contact-form'>
            <p/>
            <data:contactFormNameMsg/>
            <br/>
            <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
            <p/>
            <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
            <br/>
            <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
            <p/>
            <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
            <br/>
            <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
            <p/>
            <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
            <p/>
            <div style='text-align: center; max-width: 222px; width: 100%'>
              <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
              <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
            </div>
          </form>
        </div>
      </div>
    </b:includable>
  </b:widget>
</b:section>

Keterangan:
Apabila dalam template ternyata tidak memiliki widget ‘Blog1’ dan atau jika Anda mengalami kesulitan dalam menempatkan rangkaian kode tersebut, maka carilah bagian berikut ini dan kemudian sisipkan rangkaian kode di atas di tempat yang saya tandai dengan keterangan <!-- LETAKKAN RANGKAIAN KODE TAMBAHAN PADA BAGIAN INI –>.

<b:section class='main' id='main' showaddelement='no'>
  <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>...</b:widget>
</b:section>
<!-- LETAKKAN RANGKAIAN KODE TAMBAHAN PADA BAGIAN INI –>

Sebelum menyisipkan rangkaian kode di atas, jangan lupa untuk mengganti http://eltelu.blogspot.com/2012/10/tata-cara-menghubungi-admin-eltelu.html terlebih dulu dengan URL halaman kontak pada blog yang Anda kelola. Ingat, bahwasanya tanda ?m=0 dan ?m=1 yang terdapat pada URL kedua dan ketiga harus tetap disertakan. Sehingga bila bila URL di atas adalah URL yang pertama, maka URL yang kedua adalah http://eltelu.blogspot.com/2012/10/tata-cara-menghubungi-admin-eltelu.html?m=0 dan URL yang ketiga adalah http://eltelu.blogspot.com/2012/10/tata-cara-menghubungi-admin-eltelu.html?m=1.

Keempat, simpan template.

Selanjutnya untuk melakukan pengecekan bukalah halaman kontak yang terdapat pada blog Anda, karena widget formulir kontak hanya akan ditampilkan di halaman yang sesuai dengan URL yang telah dimasukkan. Dan apabila hasil tampilannya masih kurang sesuai dengan desain halaman blog Anda, maka silakan tambahkan CSS baru (sesuai dengan kreatifitas Anda) untuk memperindah tampilan formulir kontak tersebut.

Sedangkan bila Anda ingin melihat contoh dari penerapan teknik tersebut, maka silakan klik di sini untuk membuka halaman kontak yang terdapat di blog ini.

Semoga berguna serta bermanfaat, dan apabila Anda mengalami kendala atau kesulitan ketika menerapkan teknik tersebut, maka Anda dapat mengajukan pertanyaan terkait dengan kesulitan atau kendala yang Anda alami dengan cara mengeposkan komentar dalam artikel ini.
Salam.