Cara Menembah Contact Form Pada Halaman Statis Blog

Contact Form Pada Halaman Statis merupakan sebuah cara yang digunakan para blogger untuk menambah pageview pada website/blog yang dikelola, karena dengan menempatkan contact form pada halaman statis maka secara tidak langsung para visitor diarahkan untuk membuka sebuah halaman lagi pada website/blog, dengan kata lain website/blog akan memdapatkan satu poin klik lagi pada halamannya dan hal ini tidak melanggar ketentuan dari pihak Google tentunya.

Contact Form Pada Halaman Statis ini dirangcang dengan begitu apik dan menawan karena pemaduan beberapa unsur efek script, dan yang begitu mencolok saat kita buka halaman contact form adalah delai pada teks bagian atas sehingga tulisan akan tampil secara berurutan dan perlahan sehinnga pada akhirnya akan nampak keseluruhan dari teks tersebut.


Cara Menembah Contact Form Pada Halaman Statis Blog.

Masuk ke akun blogger.
Masuk ke menu tab Template > Edit HTML.
Letakkan kode script dibawah ini tepat diatas kode </head>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Kemudian klik SAVE template.

Penerapan contact form pada halaman statis.

Letakkan kode CSS style dan script dibawah pada halaman statis.

<div class='contentx'>

Silakan isi form di bawah ini untuk menghubungi admin. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.

</div>

<br />

<form id="skin-design" 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> 

<div class='formcolumn4'>

<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Message" />

</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">

#comments,.post_meta,#blog-pager{display:none}

form{color:#666}

form.payforpal{margin:auto;text-align:center}

#skin-design{margin-right:26px;max-width:100%px}

#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{font-family:'Quicksand',sans-serif;background:#fff;color:#5f6368;font-size:16px;width:180px;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/AVvXsEjF7btVzDenTLLO2_siVO5QH5p1fpaFV39BqxsNTYFMosHLSDKx92QDn9w76vxIpDTe_C6VqacfeyuZKysC6cIgQXrIgzcqdy-3i5jxUMzyVwIqODmikYNP3qfzsuLLctc5WfwFHCfXph6N/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 5px 9px 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{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>

<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'] = '8723257515246348983';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8723257515246348983','//sk1ndesign.blogspot.com/','8723257515246348983');
_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': '8723257515246348983', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
<script type="text/javascript">

$(function(){$(".contentx").each(function(){for(var n=$(this),t=n.text(),e=t.length,i="",o=0;o<e;o++)i+="<span>"+t.charAt(o)+"</span>";n.html(i)});$(".contentx span").each(function(n,t){$(t).hide(),setTimeout(function(){$(t).fadeIn("slow")},50+50*n)})});

</script>

Pada teks box hijau silahkan ganti dengan kode link website/blog anda.
Pada teks box merah silahkan ganti dengan kode ID blog.
Jika semua sesuai dengan tutorial diatas, silahkan klik PUBLISH.

Result

Demikian tutorial dari saya, mudah-mudahan banyak memberi manfaat dan jika kurang dipahami silahkan tinggalkan pesan.