Cara Membuat Contact Form Pada Blogger

Halaman Contact Form pada website yang penting agar pegunjung dapat menghubungi pemilik situs tersebut. Halaman Contact juga membuat pengunjung maupun customer menjadi yakin dan percaya dengan situs tersebut. Sehingga menjadikan halaman Contact ini wajib pada setiap website.

Dengan membuat halaman Contact Form, pengunjung juga akan dimudahkan dalam menghubungi pemilik situs. Pengunjung tidak perlu lagi membuka dan menuliskan email tujuan. Mereka cukup menuliskan nama, email, dan pesan pada halaman Contact Form.

Pada Blogger, sudah tersedia sebuah layanan untuk membuat Contact Form secara default. Namun, layanan tersebut berupa widget dimana tidak bisa dijadikan sebuah halaman tersendiri. 

Untuk membuatnya sebenarnya cukup mudah. Kamu hanya perlu memindahkan kode widget tersebut kedalam sebuah Page / Halaman. Tapi pada artikel Cara Membuat Contact Form Pada Blogger kali ini, kita akan membuat tampilan yang berbeda dengan stardardnya. Kita akan membuat tampilan Contact Form yang menarik.

Cara Membuat Contact Form Pada Blogger

1. Silahkan buka Dashboard blogger kamu. Setelah itu, pilih menu Page pada sisi kiri. Selanjutnya pilih New Page.

2. Ubah mode penulisan dari Compose View ke HTML View. Disini kita akan menuliskan kode untuk mengirimkan pesan langsung ke email kamu. Silahkan salin dan tempel kode dibawah ini pada blog kamu.

<form name="contact-form">
  <div class="formcolumn1">
    <input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="">
  </div>
  <div class="formcolumn2">
    <input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="">
  </div>
  <div class="formcolumn3">
    <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="7"></textarea>
  </div>
  <div class="formcolumn4">
    <input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now">
  </div>
  <div style="max-width: 100%; text-align: center; width: 100%;">
    <div id="ContactForm1_contact-form-error-message"></div>
    <div id="ContactForm1_contact-form-success-message"></div>
  </div>
</form>

3. Untuk mempercantik tampilannya, silahkan tambah kode CSS berikut sebelum atau sesudah kode HTML diatas.

<style scoped="" type="text/css">
#ContactForm1{display:none}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{font-family:'Google Sans';border-radius:99em;text-indent:10px;display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#f7f9f8;color:#222;border:1px solid rgba(0,0,0,0);transition:all .6s}#ContactForm1_contact-form-email-message{font-family:'Google Sans';border-radius:22px;width:100%;height:250px;margin:10px auto;padding:20px;background:#f7f9f8;color:#222;border:1px solid rgba(0,0,0,0);transition:all .6s}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:transparent;box-shadow:inset 0 0 0 0.125rem #f7f9f8}#ContactForm1_contact-form-submit{background:#0088cc;outline:none;color:#fff;font-size:14px;width:161px;height:42px;float:left;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:22px;transition:all .8s cubic-bezier(0.4,0.0,0.2,1)}.formcolumn4{position:relative}#ContactForm1_contact-form-submit:hover,#ContactForm1_contact-form-submit:focus{background:#0b9ce4;color:#fff;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 2px 4px 1px rgba(60,64,67,0.149)}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}form{color:#888}.formcolumn1,.formcolumn2{float:left;width:50%}.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}.formcolumn2{padding:0 0 0 10px}.Night #ContactForm1_contact-form-name,.Night #ContactForm1_contact-form-email,.Night #ContactForm1_contact-form-email-message{background:#33475c;color:#fff}.Night #ContactForm1_contact-form-name:focus,.Night #ContactForm1_contact-form-email:focus,.Night #ContactForm1_contact-form-email-message:focus{background:#1c2733;box-shadow:none}.Night #ContactForm1_contact-form-name::placeholder,.Night #ContactForm1_contact-form-email::placeholder,.Night #ContactForm1_contact-form-email-message::placeholder{color:rgba(255,255,255,.7)}.Night #ContactForm1_contact-form-submit{background:#33475c;color:#fff}.Night #ContactForm1_contact-form-submit:hover,.Night #ContactForm1_contact-form-submit:focus{background:#1c2733;color:#fff}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}#ContactForm1_contact-form-submit{height:45px;display:table;margin:10px auto 0 auto;text-align:center;float:none;width:100%}.Night #ContactForm1_contact-form-name,.Night #ContactForm1_contact-form-email,.Night #ContactForm1_contact-form-email-message{background:#263545;color:#fff}.Night #ContactForm1_contact-form-name:focus,.Night #ContactForm1_contact-form-email:focus,.Night #ContactForm1_contact-form-email-message:focus{background:#33475c}.Night #ContactForm1_contact-form-submit{background:#263545;color:#fff}.Night #ContactForm1_contact-form-submit:hover,.Night #ContactForm1_contact-form-submit:focus{background:#33475c;color:#fff}}
</style>

4. Jika blog kamu sudah di custom untuk mempercepat loadingnya, maka kamu perlu memanggil file javascript untuk widget dari blogger. Silahkan tambahkan kode ini tempat dibawah kode sebelumnya.

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>

5. Terakhir kamu perlu menambahkan kode javascript di bawah ini agar Contact Form di atas dapat bekerja dengan baik.

<script type="text/javascript">//<![CDATA[
  if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'BLOG_ID_KAMU';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dBLOG_ID_KAMU','//www.kooi.xyz/','BLOG_ID_KAMU'); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, 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': 'BLOG_ID_KAMU', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>

6. Silahkan ubah BLOG_ID_KAMU dengan Blog ID kamu. Untuk mengetahui Blog  ID, silahkan buka Dashboard Blogger lalu ambil ID Blog pada URL tersebut. Misalnya : https://draft.blogger.com/blog/posts/3343396040682792815 , maka Blog IDnya adalah 3343396040682792815

7. Jangan lupa untuk memberikan judul pada halaman tersebut. Kamu juga bisa memberikan sedikit kata pembuka untuk pengujung yang ingin menghubungimu.

Sekarang kamu sudah Membuat Contact Form Pada Blogger. Kamu bisa menambahkannya pada daftar menu website agar lebih mudah diakses oleh pengunjung. Kamu bisa mengubah, mengurangi, atau menambahkan kode CSS agar sesuai dengan tampilan yang kamu inginkan.

Akhir kata, semoga artikel Cara Membuat Contact Form Pada Blogger dapat membantu blog kamu menjadi lebih baik dan bermanfaat. Sekian dan terima kasih.

Terima kasih telah membaca artikel ini & dipublikasikan oleh Viospaper Pro