Cara Membuat Contact Form Keren dan Responsive di Blog

Cara Terbaru Membuat Halaman Contact Form (Contact US) Keren dan Responsive diblog - Contact Form atau biasa disebut dengan formulir kontak atau contact us merupakan salah satu hal penting yang wajib dimiliki oleh setiap blog.

Kenapa penting? Karena formulir kontak ini akan sangat berguna dan membantu antara pengunjung, audiens baru dan juga kamu sebagai pemilik blog. Dengan adanya halaman formulir kontak ini, para pengunjung dan calon audiens blog kamu bisa menghubungi kamu dengan mudah. Siapa tahu banyak audiens blog kamu yang mengajak bekerja sama menjadi partner kamu.

Tentu hal ini bisa menambah penghasilan kamu dari blog yang sedang kamu kelola sekarang ini. Coba kamu bayangin, kalau blog tutorial dan sudah memiliki ribuan trafik dan visitor unik, ketika mereka ingin menghubungi kamu untuk menanyakan perihal terkait artikel yang kamu share, tapi diblog kamu sendiri tidak disediakan untuk menghubungi kamu secara langsung.

Selain itu, halaman formulir kontak atau contact us juga penting dan salah satu barometer tolak ukur diterimanya blog oleh Adsense atau minimalnya dapat mempermudah blog agar diterima Adsense.

Membuat formulir kontak diblog ini sebenernya mudah dan simpel. Kalau kamu mau formulir kontak yang sederhana dan simpel, kamu bisa menggunakan widget bawaan dari Blogger langsung. Tapi kamu tahu sendiri, tampilannya terlaku klasik dan kurang menarik.

Nah, maka dari itu, di artikel kali ini kita akan mencoba membahas dan membuat sebuah halaman statis blogger khusus digunakan untuk membuat formulir kontak ini. Untuk penampilan dan desain formulir kontak yang akan kita buat, kamu bisa lihat langsung di halaman kontak yang sudah saya terapkan sendiri di blog ini.

Gimana, tertarik untuk membuat formulir kontak yang saya buat di atas? Kalau tertarik, yuk kita simak langsung langkah-langkah cara membuat formulir kontak di atas.

Cara Membuat Contact Form (Formulir Kontak) Keren dan Responsive di Blog

1. Buka dashboard blogger kamu
2. Masuk ke menu Tata Letak ➤ tambahkan widget formulir kontak baru (kalau widget formulir kontak ini sudah ada, lewati)
3. Kemudian buat halaman statis baru dengan judul Contact Us, Contact Form atau apa saja
4. Taruh kode dibawah ini ke dalam postingan tadi di mode HTML bukan Compose

   <form name="contact-form"><div class="formcolumn1"><input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br />
   </div><div class="formcolumn2"><input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br />
   </div><div class="formcolumn3"><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="7"></textarea><br />
   </div><div class="formcolumn4"><input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" /><br />
   </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><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><br />
   <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script><br />
   <script type="text/javascript"><![CDATA[ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'ganti_dengan_ID_blog_kamu';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\ganti_dengan_ID_blog_kamu','https://www.dzuhalah.my.id/', 'ganti_dengan_ID_blog_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': '7411497632308126536', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
   </script>

   Tulisan warna merah kamu ganti dengan ID blog kamu. Dan tulisan berwarna kuning, kamu ganti dengan alamat blog kamu
5. Setelah semuanya diatur sesuai dengan blog kamu, klik simpan atau publish dan lihat hasilnya

Nah, itulah tutorial cara membuat contact form, contact us atau formulir kontak keren dan responsive di blog yang bisa saya sampaikan di artikel kali ini. Kalau masih bingung tanyakan aja di kolom komentar.

Share :