Contact Us Responsive On Static Page Blogger

Formulir kontak sangat penting bagi teman yang suka berbagi pada halaman blog pribadi maupun website komersial, formulir kontak ini akan menghubungkan halaman blog dengan visitor yang kirim lewat formulir kontak dan akan dikirim langsung oleh sistem pada alamat e-mail admin atau pemilik blog.

Secara terpisah proses pemasangan formulir kontak ini ada dua cara, meskipun fungsinya sama tapi penempatan pada template blog yang berbeda yaitu:

Cara Pertama

Letakkan kode dibawah ini pada kerangka blog tepat diatas @media screen and pertama.


/* Contact Us */

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

form{color:#666}

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

#skin-contact{margin:auto;max-width:500px}

#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:#00a8ec;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:#a7a400;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:500px){

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}

Kemudian tekan tombol SAVE template.
Selanjutnya letakkan script tersebut pada bagian akhir kerangka template, tepat diatas kode </body>.


<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','//skindezign.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>

Ganti kode 8723257515246348983 pada script dibawah ini dengan ID blog anda.
Ganti juga kode //sk1ndesign.blogspot.com/ pada script dibawah ini dengan link blog anda.
Kemudian Letakan kode di bawah ini pada halaman statis / static page.


<form id="skin-contact" 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" size="30" placeholder="Email *" 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" />

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

Kemudian hasilnya bisa dilihat.

Cara Kedua

Jika hal diatas agak sedikit sulit, maka akan sedikit lebih mudah dengan cara letakkan semua kode dibawah ini pada sebuah halaman statis.


<form id="skin-contact" 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" size="30" placeholder="Email *" 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" />  

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

<style scoped="" type="text/css">

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

form{color:#666}

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

#skin-contact{margin:auto;max-width:500px}

#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:#00a8ec;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:#a7a400;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:500px){

#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','//sk1design.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>

Ganti kode 8723257515246348983 pada script dibawah ini dengan ID blog anda.
Ganti juga kode //skindezign.blogspot.com/ pada script dibawah ini dengan link blog anda.
Kemudian Tekan tombol PUBLISH dan lihat hasilnya dengan cara cobalah untuk kirim pesan dari formulir kontak tersebut.

Result

Demikian tutorial yang bisa kami sampaikan, jika kurang dipahami silahkan tinggalkan pesan.

Contact Us Responsive On Static Page Blogger

Risky Zubaidi SEO Tutorial

Show Parser Hide Parser

Hot on this blog:

Contact Us Responsive On Static Page Blogger

Risky Zubaidi SEO Tutorial

Bila berkenan, Anda bisa membantu pengembangan blog ini dengan Paypal atau dengan Pulsa

You Might Also Like:

Show Parser Hide Parser

Hot on this blog: