Cara Terbaru Membuat Halaman Kontak di Blog

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

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

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

Sebelumnya saya sudah membuat artikel mengenai Cara Memasang Formulir Kontak Pada Halaman Statis Blog, tapi pada tutorial kali ini sekaligus untuk menjawab pertanyaan teman-teman seperti tombol klik tidak berfungsi, muncul widget contact form, dan 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/AVvXsEilddVpm5S0dXxm2blngw1vuNlEhKrhlE5uha8PYif2WLcN0m9_O0-fnDD8Erj1pozmqHrbttrwJiwStX9CG6kEA2ek99q4TA-AD3WnEKIzBPZFgScSVGRgRk_EIiYDTY5aTJoGttQE-UAt/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 untuk Anda. Apabila ada hal yang ingin ditanyakan, silahkan bertanya melalui kolom komentar yang tersedia dibawah ini.