Terbaru Membuat Halaman Kontak Di Blog

Tutorial Blogger kali ini mengenai Cara Membuat Halaman Kontak atau Contact Form di halaman statis Blog yang berfungsi buat mengirimkan pesan email kepada pemilik situs.

Membuat halaman formulir kontak merupakan hal yang wajib dimiliki sebuah situs. Halaman kontak ini berfungsi buat membantu pengunjung menghubungi pemilik situs apabila ada hal penting yang mau disampaikan.

Halaman kontak juga bisa membantu Kalian buat memperbaiki kesalahan-kesalahan yang terdapat pada situs blog Anda. Misalnya pengunjung menemukan link mati kemudian melapor pada pemilik situs, atau hal penting lainnya yang mau disampaikan, bahkan buat urusan bisnis.

Sebelumnya aku telah membuat artikel mengenai Cara Memasang Formulir Kontak Pada Halaman Statis Blog, tapi pada tutorial kali ini sekaligus buat menjawab pertanyaan teman-teman seperti tombol klik tidak berfungsi, muncul widget contact form, serta sebagainya.

Cara Membuat Halaman Kontak di Blog

Langkah 1

Silahkan buka dasbor Blogger, lalu pilih menu Tata Letak, kemudian buat gadget formulir kontak.

Langkah 2

Selanjutnya, kembali ke dasbor Blogger, kemudian klik menu Tema, lalu klik Edit HTML.

Langkah 3

Silahkan salin kode dibawah ini kemudian tambahkan kode ini sebelum kode </head>.

<style type='text/css'> #ContactForm1,#ContactForm1 br{display:none} </style>

Langkah 4

Silahkan kembali ke dasbor Blogger, kemudian pilih menu Halaman, lalu buat Halaman Baru.


Langkah 5

Silahkan salin kode dibawah ini kedalam editor mode HTML. Lihat contohnya dibawah ini:

Kode:

<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> <br /> <style scoped="" type="text/css"> #ContactForm1,#comments{display:none} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)} #ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)} #ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)} .formcolumn4{position:relative} .formcolumn4:before{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjD20nBLsRG9jS5SPMS_k8HZjp3ECuRRaAGDNAxT-XoPTRVhAd1XT8r3LOZzk7vAfFN__cet6DeTNSAzcFs9f-3L7Vcc8eNoG3MFME6IWVeelHZCwK-NrK9aSf38fNCUipPW0E42MPrwQm/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0} #ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px 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} @media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}} </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'] = '7342017194742683056';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7342017194742683056','//www.arlinadzgn.com/','7342017194742683056'); _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': '7342017194742683056', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]> </script>

Langkah 6

Silahkan pilih Publikasikan, kemudian lihat hasilnya.

Demikian pembahasan mengenai Cara Terbaru Membuat Halaman Kontak di Blog semoga bermanfaat buat Anda. Kalau ada hal yang mau ditanyakan, silahkan bertanya lewat kolom komentar yang tersedia dibawah ini.

Bagikan Artikel ini