Contoh Cerpen : Judulnya "Bukan Kami" Karya Andriono Kurniawan ( Republika)

Admin sudah lama ingin share tentang Cara Memasang Contact Form di Halaman Statis Blogspot. Baru kali ini kesampaian. Soalnya kesibukan belajar juga semakin padat. Tentu tugas keluarga juga menumpuk. Ups, kok bawaannya malah curhat. Hehe...

Silakan masuk ke halaman edit HTML blog kamu. Lalu, carilah kode </head>  dan letakan kode di bawah ini persis di atas kode tersebut.

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

Selanjutnya masuk ke halaman statis blog. Buatlah halaman baru di sana. Pastikan kamu dalam mode post html bukan pada mode postinga biasa. Untuk lebih jelasnya, silaka intip gambar di bawah ini. Agar terlihat lebih jelas silakan klik gambarnya.

Berikut ini script Memasang Contact Form di halaman Statis Blogspot.

<form name="contact-form">
<div class='formcolumn1'>
<input id="ContactForm1_contact-form-name" name="name" placeholder='Name' size="30" type="text" value="" />
</div>
<div class='formcolumn2'>
<input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" />
</div>
<div class='formcolumn3'>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Message' rows="7"></textarea>
</div>
<div class='formcolumn4'>
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
</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> 
<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/AVvXsEgZ1PHl3w0bchjcckOKpwFprSGdBiFqzbiIixE614C_3HsdMwh1ulPWYvlFYMrZ2SVjEEdC0AF0wFYisSokYC0mYt4HyA6M2oN-JTVGk2h3HxFSNOdgE3z12O6mUq9_nI557A5NKU_SODau/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><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'] = 'AAAAA';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dAAAAA','//web.seribupena.com/','AAAAA');
_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': 'AAAAA', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>

Jangan lupa silakan ganti Idblog  AAAAA  dengan IDBlog sendiri ya. Script di atas dicopy dengan cara seperti ini dan pastikan ikuti panduannya dengan baik. 

Setelah tahu cara memasag Contact Form di Halaman Statis blog, saya lagsung mencobanya. Saya membuka halaman statis yang sudah dipublikasikan. Kemudian saya mengecek apakah pesan yang saya kirim lewat halaman contact form di halaman statis ini berjalan lancar atau tidak. Dan ternyata hasilnya seperti di bawah ini.

Baiklah teman. Barangkali ini dulu yang bisa share ya. Semoga Tutorial pendek tentang bagaimana Cara Memasang Contact Form di Halaman statis blogspot ini bermafaat. Jika ada yang menemui kendalam dalam pemasagannya silakan tinggalkan komentar.

Related Posts