Cara Membuat Halam Contact Me Tanpa Registrasi di Blogger (Blogspot)

Membuat contact form pada sebuah blog maupun website akan menjadi hal yang sangat penting untuk membangun komunikasi yang lebih private kepada pengunjung.

Kolom komentar yang ada mungkin belum cukup untuk menjalin komunikasi yang lebih private sehingga dibutuhkan form contact yang bisa langsung menuju admin dari sebuah blog maupun website.

Walaupun blogger sudah memiliki fasilitas tersebut, pasti kalian merasa kurang puas karena fasilitas yang disediakan hanya bisa tampil melalui widget sehingga kalian merasa blog kurang cakep?

Bila kita buatkan halaman tersendiri maka tampilanya akan lebih cantik dan terlihat profesional. Seperti tampilan yang ada pada halaman contact di www.jambe9.com silakan scroll ke atas dan klik form contact. Berikut tampilanya gan:

Contact Me

Keren kan? Begini admin membuat halaman tersebut:

1. Buka dashboard blogger dan buatlah halaman baru di bagian menu halaman.
2. Ketika dihadapkan kehalaman composse alihkan ke bagian HTML disebelah kananya. Untuk membuat form tersebut kita menggunakan script yang disediakan oleh teman kita di www.writergilby.com
3. Pada bagian HTML paste script berikut:



<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: 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">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
form.payforpal{margin:auto;text-align:center}
#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:#1abc9c;margin:auto;vertical-align:middle;cursor:pointer;padding:16px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;border-radius:4px;color:#fff;font-weight:500;transition:all .2s ease}
#ContactForm1_contact-form-submit:hover{background:#16a085;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f47669;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px}
.contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px}
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>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<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'] = '1197771421397196682';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1197771421397196682','www.jambe9.com','1197771421397196682');
_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': '1197771421397196682', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>




4. Ganti semua kode 1197771421397196682 menjadi ID blogger kalian menggunakan fasilitas find di browser.
5. Ganti alamat www.jambe9.com pada script menjadi alamat blogger masing-masing.
6. Lakukan publish pada halaman baru kalian dan lihat.
7. Langkah terakhir adalah mengetes apakah script ini berfungsi. Silakan kirim pesan melalui halaman contact yang kalian buat lalu cek pada email yang kalian gunakan untuk mendaftar blogger. 

Sekian Tutorial Cara Membuat Halam Contact Me Tanpa Registrasi di Blogger (Blogspot) dari jambe9.com semoga bermanfaat dan jangan lupa untuk share bila bermanfaat!

Jambe9 Tutorial

Make it Easy!

Share this post