Beberapa waktu yang lalu, contact form atau laman hubungi kami blog ini tidak berfungsi (gagal) ketika dicoba untuk mengirimkan pesan. Hal ini mungkin terjadi akibat edit template yang saya lakukan atau mungkin juga akibat adanya perubahan yang dilakukan oleh pihak blogger, sehingga contact form yang sudah lama terpasang menjadi tidak berfungsi. Bagi anda yang mahir dalam coding mungkin bisa anda atasi sendiri, tapi jika yang masih awam soal itu, lebih baik dan lebih mudah untuk membuat laman hubungi kami (contact form) yang baru. Contact Form berfungsi sebagai sarana bagi pengunjung yang ingin berkomunikasi dengan admin penulis (pemilik) blog. Jika anda sedang mencari cara untuk membuatnya, anda bisa coba salah satu dari dua cara yang telah saya praktekkan berikut ini.
CARA PERTAMA
Contact form ini bentuknya standar dan sederhana. Tampilannya seperti berikut ini:
Jika berniat membuatnya, anda bisa ikuti langkah-langkah berikut ini.
1. Buka akun blogger anda.
2. Pilih menu layout (tata letak) klik tambahkan gadget pada bagian sidebar.
3. Pilih Contact form dan simpan (langkah ini penting agar nantinya widget ini bisa berfungsi).
4. Karena contact form ini ingin diletakkan pada halaman statis atau menu navigasi, maka tampilan di sidebar ini harus disembunyikan. Caranya yaitu pilih menu tema dan klik edit html. Setelah terbuka, salin kode berikut ini dan letakkan di atas kode ]]></b:skin>
3. Pilih Contact form dan simpan (langkah ini penting agar nantinya widget ini bisa berfungsi).
4. Karena contact form ini ingin diletakkan pada halaman statis atau menu navigasi, maka tampilan di sidebar ini harus disembunyikan. Caranya yaitu pilih menu tema dan klik edit html. Setelah terbuka, salin kode berikut ini dan letakkan di atas kode ]]></b:skin>
#ContactForm1{display:none;}
5. Jika sudah silahkan klik simpan.
6. Langkah berikutnya pilih menu laman (pages), dan klik laman baru.
7. Setelah terbuka, masukkan judul Contact Us, Hubungi kami atau semacamnya. Pada kotak penulisan pilih mode html dan masukkan kode-kode berikut ini.
<script>
var blogId = '247740403xxxxxxxxxx';
var contactFormMessageSendingMsg ='Mengirim...';
var contactFormMessageSentMsg = 'Pesan sudah dikirim. Semoga Anda bahagia.';
var contactFormMessageNotSentMsg = 'Pesan tidak dapat dikirim. Coba lagi nanti.';
var contactFormEmptyMessageMsg = 'Bidang pesan harus diisi.';
var contactFormInvalidEmailMsg = 'Alamat email harus valid.'
var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<div class="Form">
<form name="contact-form">
<p></p>
Nama
<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>
<br />
<span style="font-weight: normal;">Email *</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>
<br />
<span style='font-weight: normal;'>Pesan *</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>
<div style="margin-bottom:1px;">
</div>
<br />
<div style="margin-bottom:1px;">
</div>
<br />
<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>
<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'] = '247740403xxxxxxxxxx';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d247740403xxxxxxxxxx','//https://santossalam.blogspot.com/','247740403xxxxxxxxxx');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar3', 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': '247740403xxxxxxxxxx', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
</div>
Keterangan: ganti yang ditandai warna merah dengan ID blogger dan link blog anda. Untuk ID blogger anda bisa lihat pada address bar browser pada akun blogger anda, Contoh seperti berikut ini:
4. Setelah itu klik publish dan lihat hasilnya. Selanjutnya anda bisa pastekan link contact form ini pada menu navigasi anda.
CARA KEDUA
Contact form yang kedua ini cukup mudah untuk membuatnya, dengan tampilan yang lebih keren. Berikut tampilannya:
Jika anda ingin memasangnya, ikuti langkah-langkah berikut ini.
1. Buka akun blogger anda.
2. Pilih menu laman (pages), dan klik laman baru.
3. Setelah terbuka, masukkan judul Contact Us, Hubungi kami atau semacamnya. Pada kotak penulisan, pilih mode html dan masukkan kode-kode berikut ini.
Silakan isi form di bawah ini untuk menghubungi kami. <br />
<form id="kontak-arlina" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" /> <input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea> <input id="ContactForm1_contact-form-submit" type="button" value="Send Message" /> <br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<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'] = '247740403xxxxxxxxxx';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x247740403xxxxxxxxxx','//https://hikayatmanfangat.blogspot.com/','247740403xxxxxxxxxx');
_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': '247740403xxxxxxxxxx', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
<style scoped="" type="text/css"> #comments,.post_meta,#blog-pager{display:none} form{color:#666} #kontak-arlina{margin:auto;max-width:640px} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out} #ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)} #ContactForm1_contact-form-submit{float:left;background:#95a5a6;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease} #ContactForm1_contact-form-submit:hover{background:#e74c3c;color:#fff;} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px} .contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0} .contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff} img.contact-form-cross{line-height:40px;margin-left:5px} .post-body input{width:initial} @media only screen and (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}} </style>
Keterangan: ganti yang ditandai warna merah dengan ID blogger dan link blog anda.
4. Setelah itu klik publish dan lihat hasilnya. Link contact form ini kemudian bisa anda pastekan pada menu navigasi anda.
Demikianlah 2 Cara Mudah Membuat Contact Form di Blog. Semoga bermanfaat.
Labels:
Blogging
Thanks for reading 2 Cara Mudah Membuat Contact Form di Blog. Please share...!
0 Komentar untuk "2 Cara Mudah Membuat Contact Form di Blog"
Terima kasih telah berkunjung ke blog saya, silahkan berkomentar dengan sopan. Maaf, Komentar berisi Link Aktif, Promosi Produk Tertentu, J*di, P*rn*, Komentar berbau SARA dan Permusuhan, tidak akan dipublish.