Cara Membuat Halaman Kontak Form Di Blogger

Cara Membuat Halaman Kontak Form Di Blogger

Mempunyai sebuah website rasanya kurang lengkap jika belum memiliki halaman kontak pada bagian navigasinya. Ya memang tidak di wajibkan untuk membuat form kontak di blog, tetapi form kontak ini akan memudahkan para pengunjung blog atau website kita untuk sekedar berkomunikasi dengan kita selaku pemilik blog atau Website.

Laman kontak Contact form dibuat  sebagai pendukung kelengkapan pada navigasi blog yang biasanya letaknya di sejajarkan atau bersebelahan dengan halaman halaman Seperti, about, disclaimer, privasi, Tos dan Sitemap.

Laman kontak memang hadir dengan fungsi utama sebagai alat komunikasi antara pemilik website dan pengunjung website. Laman kontak yang dibuat di website / blog biasanya Telah terhubung atau dikaitkan langsung dengan Email pemilik website tersebut.

Bagi saya pribadi keberadaan laman kontak menjadi menu wajib yang harus ada pada sebuah website. Karena selain berfungsi untuk memudahkan berkomunikasi antara pemilik dan pengunjung website. Laman kontak juga berfungsi sebagai alat evaluasi terhadap perkembangan website terkait isi konten yang dibagikan kepada pengunjung.

Sehingga apabila saat pengunjung memberikan masukan berupa saran dan kritik dengan mengirimkan pesan via email. Maka dengan cepat anda nanti akan mempertimbangkan dan memperbarui sesuai dengan saran dan kritik yang telah dikirimkan oleh pengunjung website.

Nah lalu bagaimana cara membuat halaman kontak di blog atau website, berikut ini saya akan berbagi Tutorial cara membuat halaman kontak pada blog atau website. Dan untuk langkah langkahnya mari kita simak sebagai berikut :

Untuk membuat halaman kontak pada blog Di blogger, caranya sangatlah mudah. Pertama yang harus anda lakukan adalah:

Login/masuk pada akun blogger anda masing masing. Kemudian buatlah halaman baru, untuk judul Terserah anda mau di kasih judul apa pada halaman Tersebut.

Selanjutnya Pilih mode HTML pada halaman yang Telah Dibuat untuk di jadikan halaman kontak. Lalu masukan kode HTML dibawah ini kemudian Simpan dan Publikasikan.

<div class="Form">
<form name="contact-form">
<p></p>
Nama anda :
<br />
<input class="contact-form-name" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>
Email Anda :
<span style="font-weight: bolder;"></span><br />
<input class="contact-form-email"style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>
Keluhan Anda :
<span style='font-weight: bolder;'></span>
<br />
<textarea class="contact-form-email-message" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Kirim" />
<p></p>
<div style="max-width: 400px; text-align: center; width: 100%;">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
</form>
</div>

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1783659908932XXXXXX';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1783659908932XXXXXX','//arieffsetiawan.com/','1783659908932XXXXXX');
_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': '1783659908932XXXXXX', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
  

KETERANGAN :
Untuk kata katanya silahkan anda kreasikan sendiri, dan kode ID 1783659908932XXXXXX Silahkan di ganti dengan Kode ID Blog anda masing masing. Ganti juga arieffsetiawan.com dengan domain anda sendiri.

Untuk melihat seperti apa hasilnya dari kode diatas, silahkan anda klik Disini Untuk melihat tampilanya, Mungkin dari segi tampilan bisa berbeda ya tergantung dari kode CSS yang anda gunakan di dalam template blog Anda. 

Nah seperti itulah cara sederhana dari saya untuk membuat halaman kontak di blogger. Semoga saja postingan sederhana ini dapat membantu rekan rekan blogger semua.

Arief Setiawan Blogger Yang senang berbagi ilmu

Berbagi :