Cara Membuat Contact Form Di Blog

Widget contact form atau halaman contact merupakan fitur customer support yang sangat penting di blog / website. Dengan adanya widget contact form pengunjung situs dapat memgirimkan feed back kepada pemilik blog, baik itu berupa saran maupun kritik yang mungkin tidak bisa disampaikan dihalaman blog.

Selain itu halaman contact juga merupakan wujud profesionalisme yang menggambarkan keseriusan pengelola blog. Jadi, untuk itu mari kita buat halaman kontak (contact form) dengan sebaik mungkin.

Contact Form Blogger
[ads id="ads1"]

Membuat Contact Form Blog

  1. Masuk ke dashboard blogger
  2. Pilih Menu Pages (Halaman)
  3. Klik Add New Page
  4. Buat Judul Halaman Kontak example: Contact Form
  5. Tambahkan kode html, css dan javascript contact form blogger melalui mode HTML View secara berurutan.

Code HTML Contact Form



<div class="cordial-content">

  <div class="cordial-contact">

     <div class="cordial-other">

       <div class="cordial-info">

         <h2>More Methods</h2>

         <h3>Call or Email</h3>

         <div class="svg-wrap">

           <a href="mailto:yourmail@gmail.com"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>yourmail@gmail.com</a>

         </div>

         <div class="svg-wrap">

           <a href="tel:+6282111000061"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>+6282111000061</a>

         </div>

         <h3>Connect</h3>

         <div class="svg-wrap">

           <a href="https://www.facebook.com/cordialblogger" title="Connect with us on facebook" rel="noopener" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="60.734" height="60.733" viewBox="0 0 60.734 60.733"><path d="M57.378 0H3.352C1.502 0 0 1.5 0 3.354V57.38c0 1.852 1.502 3.353 3.352 3.353h29.086v-23.52h-7.914v-9.166h7.914v-6.76c0-7.843 4.79-12.116 11.787-12.116 3.355 0 6.232.252 7.07.36v8.2h-4.853c-3.805 0-4.54 1.81-4.54 4.463v5.85h9.08l-1.188 9.167h-7.892v23.52h15.475c1.852 0 3.355-1.503 3.355-3.35V3.35C60.732 1.5 59.23 0 57.378 0z"/></svg></a>

           <a href="http://twitter.com/cordialblogger" title="Connect with us on twitter" rel="noopener" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612"><path d="M612 116.258c-22.525 9.98-46.694 16.75-72.088 19.772 25.93-15.527 45.777-40.155 55.184-69.41-24.322 14.378-51.17 24.82-79.775 30.48-22.906-24.438-55.49-39.66-91.63-39.66-69.333 0-125.55 56.218-125.55 125.514 0 9.828 1.11 19.427 3.25 28.606-104.325-5.24-196.834-55.223-258.75-131.174-10.822 18.51-16.98 40.078-16.98 63.1 0 43.56 22.182 81.994 55.836 104.48-20.575-.688-39.926-6.348-56.867-15.756v1.568c0 60.806 43.29 111.554 100.692 123.104-10.517 2.83-21.607 4.398-33.08 4.398-8.107 0-15.947-.803-23.634-2.333 15.985 49.907 62.336 86.2 117.253 87.194-42.946 33.655-97.098 53.656-155.915 53.656-10.134 0-20.116-.612-29.944-1.72 55.568 35.68 121.537 56.484 192.44 56.484 230.947 0 357.187-191.29 357.187-357.188l-.42-16.253C573.87 163.525 595.21 141.42 612 116.257z"/></svg></a>

           <a href="https://codepen.io/cordialblogger" title="Connect with us on codepen" rel="noopener" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M100 34.2c-.4-2.6-3.3-4-5.3-5.3-3.6-2.4-7.1-4.7-10.7-7.1-8.5-5.7-17.1-11.4-25.6-17.1-2-1.3-4-2.7-6-4-1.4-1-3.3-1-4.8 0-5.7 3.8-11.5 7.7-17.2 11.5L5.2 29C3 30.4.1 31.8 0 34.8c-.1 3.3 0 6.7 0 10v16c0 2.9-.6 6.3 2.1 8.1 6.4 4.4 12.9 8.6 19.4 12.9 8 5.3 16 10.7 24 16 2.2 1.5 4.4 3.1 7.1 1.3 2.3-1.5 4.5-3 6.8-4.5 8.9-5.9 17.8-11.9 26.7-17.8l9.9-6.6c.6-.4 1.3-.8 1.9-1.3 1.4-1 2-2.4 2-4.1V37.3c.1-1.1.2-2.1.1-3.1 0-.1 0 .2 0 0zM54.3 12.3L88 34.8 73 44.9 54.3 32.4V12.3zm-8.6 0v20L27.1 44.8 12 34.8l33.7-22.5zM8.6 42.8L19.3 50 8.6 57.2V42.8zm37.1 44.9L12 65.2l15-10.1 18.6 12.5v20.1zM50 60.2L34.8 50 50 39.8 65.2 50 50 60.2zm4.3 27.5v-20l18.6-12.5 15 10.1-33.6 22.4zm37.1-30.5L80.7 50l10.8-7.2-.1 14.4z"/></svg></a>

           <a href="https://www.cordialblogger.com/" title="Follow This Blog"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 20c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4 7v1c0 .55.45 1 1 1s1 .45 1 1v3c0 1.66-1.34 3-3 3H9c-1.66 0-3-1.34-3-3V8c0-1.66 1.34-3 3-3h4c1.66 0 3 1.34 3 3v1zm-6.05 1h2.6c.55 0 1-.45 1-1s-.45-1-1-1h-2.6c-.55 0-1 .45-1 1s.45 1 1 1zM14 13H9.95c-.55 0-1 .45-1 1s.45 1 1 1H14c.55 0 1-.45 1-1s-.45-1-1-1z"/></svg></a>

         </div>

       </div>

    </div>

    <div class="cordial-form">

      <h1>Customer Support</h1>

      <form action="cordialform">

        <div class="flex-rev">

          <input type="text" placeholder="Your Name" name="name" id="ContactForm1_contact-form-name" value=""/>

          <label for="ContactForm1_contact-form-name">Full Name</label>

        </div>

        <div class="flex-rev">

          <input type="email" placeholder="example@gmail.com" name="email" id="ContactForm1_contact-form-email" value=""/>

          <label for="ContactForm1_contact-form-email">Your Email</label>

        </div>

        <div class="flex-rev">

          <textarea placeholder="I have an idea for a project...." name="email-message" id="ContactForm1_contact-form-email-message" ></textarea>

          <label for="ContactForm1_contact-form-email-message">Email Message</label>

        </div>

        <input id="ContactForm1_contact-form-submit" type="button" value="Send Mail" />

        <div class="cordialformmessage">

          <p id="ContactForm1_contact-form-error-message" class="contact-form-error-message-with-border"></p>

          <p id="ContactForm1_contact-form-success-message" class="contact-form-success-message"></p>

        </div>

      </form>

    </div>

  </div>

</div>

CSS Contact Form



<style type="text/css">

//css contact form blogger, email contact, phone and social media.

.cordialformmessage{text-align:center;width:100%;height:20px;margin:0 auto}

.cordialformmessage p{text-align:center;line-height:1.6;margin:0}

.cordial-content{width:100%;display:flex;justify-content:center;overflow:auto}

.cordial-contact{width:100%;display:flex;border-radius:5px;overflow:hidden}

.cordial-other{width:57%;background-size:cover;background-position:center;position:relative;display:flex;flex-direction:column;justify-content:flex-end}

.cordial-other:before{content:"";position:absolute;top:0;left:0;height:100%;width:100%;background:linear-gradient(45deg,rgb(36,51,66),rgba(36,51,66,.81))}

.cordial-form{width:43%;background-color:#fff;padding-left:20px;display:flex;flex-direction:column;align-items:flex-end}

.cordial-form h1{text-align:center;margin-bottom:20px;width:100%}

.cordial-form form{width:100%;display:flex;flex-direction:column;align-items:flex-end}

.flex-rev{display:flex;flex-direction:column-reverse;margin-bottom:10px;width:100%}

.flex-rev input,.flex-rev textarea{border:none;background-color:#e6e6e6;padding:12px 10px;font-size:16px;resize:none;margin-top:7px;margin-bottom:16px;border-radius:5px;color:#243342;outline-color:#243342;outline-width:thin;-webkit-appearance:none}

.flex-rev textarea{height:150px}

.cordial-info{position:relative;padding:20px}.cordial-info h2{color:#16f1dc;font-size:25px}.cordial-info h3{color:#fff;letter-spacing:1.2px;margin-top:20px}.svg-wrap{display:flex;margin-top:14px}

.svg-wrap a{border:0;padding:0;display:flex;color:#fff;font-size:16px;justify-content:center;align-items:center}.svg-wrap a svg{width:20px;height:20px;fill:#fff;transition:fill 0.2s ease-in-out;margin-right:13px}.svg-wrap a:hover svg{fill:#16f1dc;cursor:pointer}.svg-wrap a:hover{background-color:transparent;color:#16f1dc;cursor:pointer}

#ContactForm1_contact-form-submit{display:inline-block;height:46px!important;padding:14px;text-decoration:none;letter-spacing:1.2px;font-size:14px;border:1px solid #243342;border-radius:5px;transition:0.15s ease-in-out}#ContactForm1_contact-form-submit{color:#fff;background:#243342}#ContactForm1_contact-form-submit:hover{cursor:pointer;color:#1bf1dc}

//css responsive contact form blogger

@media screen and (max-width:680px){

.cordial-contact{width:100%;flex-direction:column-reverse;box-shadow:0 0 0 0}

.cordial-other{width:100%;padding:20px 0}

.cordial-form{width:100%;padding:0 0 20px 0;}

.entry-title{display:none;}

#ContactForm1_contact-form-submit{width:100%}

}

@media screen and (max-height:660px){

.cordial-content{align-items:flex-start}

}

</style>

Script Contact Form



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

<script>//<![CDATA[

if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '2179188380144364589';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2179188380144364589','//www.cordialbloggger.com','2179188380144364589');

_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Succes.', 'contactFormMessageNotSentMsg': 'Error Message.', 'contactFormInvalidEmailMsg': 'Invalid email.', 'contactFormEmptyMessageMsg': 'Empty Message.', 'title': 'Contact Form', 'blogId': '2179188380144364589', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

//]]></script>

Customize:

  • Ganti ID 2179188380144364589 blog pada script contact form blogger diatas dengan ID blog anda masing-masing, Sedikitnya ada empat id blog yang sama dan terletak di 4 lokasi dalam script contact form blogger yang harus diganti dengan ID blog anda.
  • Ganti Url blog www.cordialblogger.com pada script contact form dengan URL blog anda
  • Tambahkan css full width example: #post-wrapper,#main-wrapper{width:100%;} agar contact form terlihat elegan.
  • Terakhir jangan lupa untuk menekan tombol save untuk mengakhiri tutorial membuat halaman kontak (Contact form blogger) dihalaman statis.

Fitur Dan Spesifikasi Widget Contact Form

  • 100% Responsive
  • Mobile friendly
  • Contact Form Message
  • Ready Contact Via Email & Phone
  • Connect To Social Media

Demo

Untuk melihat demo contact form pada tutorial ini, silahkan lihat atau klik tombol contact us yang ada di footer blog ini.

Selesai, Hubungi admin melalui form contact us jika menemukan masalah saat membuat atau memasang contact form blogger di halaman statis (static page).

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Mengatasi Render Blocking Resources Dari Template Blogger

Gambar
Cara Mengatasi Render-blocking resources -  Sedikitnya ada dua jenis resources pada template blogger yang menyebabkan bloking first paint pada halaman blog. Yang pertama resources yang berasal dari platform blogger (resources default) yang biasa kita sebut dengan bundle css blogger dan resources pihak ketiga (3rd party) seperti bundle css fontawesome dan library javascript. Kedua jenis resources (bundle css/js) tersebut sebenarnya bukan hal buruk untuk situs blog, kita hanya perlu memuatnya secara tidak sinkron (asynchron) jika memungkinkan, Dan khusus untuk bundle css/js bawaan blogger langkah terbaik saat ini untuk mengatasinya adalah adalah dengan menonaktifka-nya. Karena sangat tidak mungkin untuk memodifikasi kode tersebut. Dampak Negatif Render-Blocking Resources [ads id="ads1"] Yang paling nyata dampak negatif render-blocking resources adalah (bloking first paint) yaitu ketika browser memuat halaman blog yang pertama kali terlihat adalah layar putih, di butuhkan waktu
Baca selengkapnya

Cara Mengatasi URL Yang Dikecualikan (Discovered-Currently Not Indexed Status)

Gambar
Tahukah kamu apa itu " Discovered currently not indexed " dengan status " Excluded "? Discovered currently not indexed maksudnya adalah halaman (url) sudah ditemukan oleh google tetapi belum di-crawl, sedangkan status excluded adalah status url yang masuk dalam ketegori pengecualian atau di kecualikan. Biasanya halaman ( url ) yang dikecualikan juga tidak diindeks oleh google karena menurut google halaman (url) merupakan duplikat dari halaman yang diindeks, atau diblokir dari pengindeksan oleh beberapa mekanisme di situs web itu sendiri. Jika tag canonical url di terapkan dengan benar beberapa url atau halaman di situs web akan dikecualikan oleh crawler google, biasanya halaman yang dikecualikan merupakan halaman (url) yang memang tidak penting untuk diindeks seperi url ?m=1, ?m=0 dan /search. Pengecualian pada yang url seperti itu baik untuk situs web, dengan begitu url (halaman) duplikat akan terjaring kedalam keranjang pengecualian di search console. [ads id=&
Baca selengkapnya

Cara Mendaftarkan Blog Ke Google Adsense (Panduan Terupdate)

Gambar
Google adsense menjadi terget utama kebanyakan blogger di dunia, pasalnya google adsense memberikan penghasilan kepada konten kreator melalui monetisasi konten blog dengan iklan adsense. Oleh karena itu bagi kamu yang baru saja memulai blogging khususnya yang ngeblog di platform blogger saya akan menunjukkan cara mendaftarkan blog anda ke google adsense agar dapat dimonetisasi dengan iklan adsense. Tapi sebelumnya harap perhatikan dan terapkan beberapa poin di bawah ini agar blog anda dapat dimonetisasi dengan iklan adsense. Syarat Agar Blog Diterima Adsense Untuk Monetisasi Daftarkan blog anda ke google adsense jika sudah rampung. Pastikan konten blog tidak berisi konten dewasa dan perjudian. Buat navigasi yang relevan dengan konten dan niche blog. Pastikan blog memiliki trafik organik. [ads id="ads1"] Jika ke empat poin di atas yang menjadi syarat kelayakan situs (blog) untuk dimonetisasi dengan iklan adsense sudah dipenuhi oleh blog anda maka blog sudah siap untuk didaftar
Baca selengkapnya