Cara Membuat Halaman Contact Form Di Blogger

Sebuah blog tentunya sangat wajib untuk memasang halaman statis contact form ini yang bertujuan untuk memudahkan pengunjung untuk berkomunikasi dengan pemilik blog maupun juga memudahkan orang lain untuk menawarkan kerjasama seperti content placement, promosi produk, review, dan masih banyak lagi. Seperti yang sudah diketahui bahwasannya contact form biasanya dibuat di halaman statis yang dimana sama halnya seperti Sitemap, Partner, About, dan lain sebagainya.

Tak hanya untuk berkomunikasi, dengan adanya halaman contact form pada blogger ini juga tentunya memudahkan orang lain untuk memberikan saran terhadap situs anda, apalagi dengan adanya contact form ini memudahkan banyak orang untuk menghubungi anda dikarenakan mereka hanya diminta untuk mengisikan Nama, Email, seta Pesan yang nantinya akan dikirim.

Apalagi saat ini sudah ada banyak sekali seorang blogger yang sudah membagikan mengenai tutorial cara membuat halaman contact form ini. Akan tetapi, saya ingin membuatkannya untuk anda semua dengan tampilan yang lebih modern dan juga tersedia beberapa style nantinya bisa dicoba.

Dengan adanya halaman contact form ini tentunya memberikan banyak manfaat seperti bersifat lebih personal, menghemat waktu, privasi terjaga dikarenakan yang dapat melihat pesan tersebut hanya pemilik blog dan juga pengirim pesan. Berikut ini adalah tutorial mengenai cara membuat halaman contact form di blogger dengan beberapa style.

Daftar Isi

5 Style Halaman Contact Form untuk Blogger

1. Halaman Contact Form Neumorphism

AVvXsEha9RV VRTGWDQjlQFwiX6HEBHzS26QnJFEkiYkd1z19Il CU8zLBLPtuBlLhx5aVwgTyj0jXrQe8GHDi96krBS0k2wpWa Jm8xzJjxybZFze6k6KN3oUThWuKkxp rgcH3PSmwzHMm9NUH nTh03Rfk5nr1zouU7E8IYHrE EEfsIT3ccHeYqwyo6r=s1280 — Halaman Contact Form Neumorphism

/* css form kontak blogger */
.wc-kntk-frm{position:relative;display:inline-block;width:100%;max-width:500px;padding:30px 10px 10px 10px;background-color:#f2f3f7;border-radius:10px}
.wc-dt-inp{position:relative;margin-bottom:30px;margin-right:5px}
.wc-dt-inp input[type=text]::placeholder,.wc-dt-inp textarea::placeholder{color:#999!important;font-size:14px}
.wc-dt-inp input:focus::placeholder,.wc-dt-inp textarea:focus::placeholder {color: transparent!important}
.wc-dt-inp label{border-radius:10px;color:#999;font-size:12px;font-weight:400;position:absolute;pointer-events:none;left:30px;top:-15px;transition:.2s ease all;padding:0 10px;background-color:#f2f3f7;box-shadow:-3px -2px 4px rgb(255 255 255 / 90%), 5px 5px 8px rgb(0 0 0 / 7%);display:none}
.wc-dt-inp input[type=text]:focus + label,.wc-dt-inp input[type=text].show + label,.wc-dt-inp textarea:focus + label,.wc-dt-inp textarea.show + label{display:block;}
.wc-dt-inp input[type=text],.wc-dt-inp textarea,.wc-dt-inp.outset input[type=button]{background-color:#f2f3f7;box-shadow: inset 0.2rem 0.2rem 0.5rem rgb(0 0 0 / 7%), inset -0.2rem -0.2rem 0.5rem rgb(255 255 255 / 90%);padding:15px 15px 15px 40px;border-radius:5px;border:none;outline:none;width:100%}
.wc-dt-inp.outset input[type=button]{background-color:#f2f3f7;box-shadow: -3px -2px 4px rgb(255 255 255 / 90%), 5px 5px 8px rgb(0 0 0 / 7%);width: 100px;text-align: center;padding-left:15px;margin: -50px auto;color:#999;font-weight:bold}
.wc-dt-inp.outset input[type=button]:active {box-shadow: inset 0.2rem 0.2rem 0.5rem rgb(0 0 0 / 7%), inset -0.2rem -0.2rem 0.5rem rgb(255 255 255 / 90%)}
.wc-dt-inp input[type=text]:active,.wc-dt-inp input[type=text]:focus,.wc-dt-inp textarea:active,.wc-dt-inp textarea:focus{outline:none}
.wc-knt-notif{color:#ff0000} 
.wc-dt-inp.icon-user:before{content:"";position:absolute;left:10px;top:0;bottom:0;width:20px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='%23aaaaad'><path d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z'></path></svg>") center / contain no-repeat}
.wc-dt-inp.icon-email:before{content:"";position:absolute;left:10px;top:0;bottom:0;width:20px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='%23aaaaad'><path d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z'></path></svg>") center / contain no-repeat}
.wc-dt-inp.icon-msg:before{content:"";position:absolute;left:10px;top:-50px;bottom:0;width:20px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='%23aaaaad'><path d='M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H10V20.09L12.09,18H6V16H14.09L16.09,14H6V12H18.09L20,10.09V8L14,2H6M13,3.5L18.5,9H13V3.5M20.15,13C20,13 19.86,13.05 19.75,13.16L18.73,14.18L20.82,16.26L21.84,15.25C22.05,15.03 22.05,14.67 21.84,14.46L20.54,13.16C20.43,13.05 20.29,13 20.15,13M18.14,14.77L12,20.92V23H14.08L20.23,16.85L18.14,14.77Z'></path></svg>") center / contain no-repeat}
  
/* css darkmode sesuaikan class ( .drK ) dengan template yang kalian gunakan agar dapat berfungsi */
.drK .wc-kntk-frm,.drK .wc-dt-inp label,.drK .wc-dt-inp input[type=text],.drK .wc-dt-inp textarea,.drK .wc-dt-inp.outset input[type=button]{background-color:#2d2d30;color:#aaaaad}
.drK .wc-dt-inp input[type=text],.drK .wc-dt-inp textarea,.drK .wc-dt-inp.outset input[type=button]:active{box-shadow: inset 0.2rem 0.2rem 0.5rem rgb(36 36 36), inset -0.2rem -0.2rem 0.5rem rgb(32 32 32)}
.drK .wc-dt-inp.outset input[type=button],.drK .wc-dt-inp label{box-shadow:-3px -2px 4px rgb(36 36 36), 5px 5px 8px rgb(32 32 32)}
</style>
  
<div class='wc-kntk-frm' id='ContactForm1'>
<form name='ContactForm'>
<div class='wc-dt-inp icon-user'>
<input id='ContactForm1_contact-form-name' name='name' placeholder='Nama' type='text'/>
<label>Nama</label>
</div>
<div class='wc-dt-inp icon-email'>
<input id='ContactForm1_contact-form-email' name='email' placeholder='Email' type='text'/>
<label>Email</label>
</div>
<div class='wc-dt-inp icon-msg'>
<textarea id='ContactForm1_contact-form-email-message' name='message' placeholder='Pesan' rows='3'></textarea>
<label>Pesan</label>
</div>
<div class='wc-dt-inp outset'>
<input id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
</div>
<div class='wc-knt-notif'>
<div id='ContactForm1_contact-form-error-message'></div>
<div id='ContactForm1_contact-form-success-message'></div>
</div>
</form>
</div>

<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script>
<script>
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) {
    window['blogger_templates_experiment_id'] = 'templatesV1';
    window['blogger_blog_id'] = '6450000000000000000';
    BLOG_attachCsiOnload('');
}
_WidgetManager._Init('//www.blogger.com/rearrange?blogID6450000000000000000', '//www.mahes.web.id/', '6450000000000000000');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {
    'contactFormMessageSendingMsg': 'Mengirim...',
    'contactFormMessageSentMsg': 'Pesan Anda telah dikirim..',
    'contactFormMessageNotSentMsg': 'Pesan tidak dapat dikirim. Silakan coba lagi nanti.',
    'contactFormInvalidEmailMsg': 'Diperlukan alamat email yang valid.',
    'contactFormEmptyMessageMsg': 'Bidang pesan tidak boleh kosong.',
    'title': 'Contact Form',
    'blogId': '6459297913837684916',
    'contactFormNameMsg': 'Name',
    'contactFormEmailMsg': 'Email',
    'contactFormMessageMsg': 'Message',
    'contactFormSendMsg': 'Send',
    'submitUrl': 'https://www.blogger.com/contact-form.do'
}, 'displayModeFull'));
  
var inputs = document.querySelectorAll('.widget input[type=text], .widget input[type=email], .widget textarea');
for (var i = 0; i < inputs.length; i++) {
    var input = inputs[i];
    input.addEventListener('input', function() {
        var bg = this.value ? 'show' : 'none';
        this.setAttribute('class', bg);
    });
}
</script>

Warning!
Harap rubah yang sudah saya tandai dengan berwarna kuning dengan ID Blog dan juga alamat domain anda agar contact form ini berfungsi dengan baik.

Untuk stye yang pertama ini adalah salah satu halaman contact form yang sudah saya gunakan pada situs yang sedang baca ini. Sebenarnya, halaman contact form ini juga bisa digunakan untuk template apapun. Namun, tidak serapi seperti yang ada pada blog ini. Oleh karena itu, Anda diharuskan untuk mengatur css nya sesuai dengan lebar halaman statis template anda.

Namun, jika anda menggunakan template buatan Mas Maki atau admin dari Jagodesain.com. Maka, halaman contact form neumorphism ini sangat saya rekomendasi karena sudah sesuai dengan template Fletro Pro, Median UI, dan juga iMagz.

2. Halaman Contact Form Simple

AVvXsEjCECtW9KqAX9 ridFTDU9Kk kwkgOiWgiYW1Fe8MtdQnKndlJVx8hBNew20GdLwJm4wEcLCHxXPLJWm8M5fJvc neY Z O9jxx MXrqd 6YhSKsj3M 3AB 0TowMLelRA0DOc4eiI 77f7Dm9MPk89m3Y gK03hIFO0X8wlUVmKvzRtmpWajgSsECH=s1280 — Halaman Contact Form Simple

<div class="contact-form-widget"> <form name="contact-form"> <span class="ctitles">Nama :</span> <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" type="text" value="" /> <span class="ctitles">Alamat Email <span class="swajib">*</span> :</span> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" type="text" value="" /> <span class="ctitles">Isi Pesan <span class="swajib">*</span> :</span> <textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="10"></textarea> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Kirim" /> <br /> <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div> <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> </div> </form> </div> <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>

Apakah anda pengguna template buatan dari Sugeng.id? Jika iya, maka sangat direkomendasikan untuk menggunakan halaman contact form style 2 ini dikarenakan sangat simple tanpa harus memasukan ataupun menghubah nama domain serta memasukan ID Blog.

Halaman contact form ini juga sudah saya terapkan pada situs yang saya kelola dengan menggunakan template LinkMagz dan juga EvoMagz. Mengapa saya bilang simple? Hal ini dikarenakan untuk menerapkannya pada halama statis sangat mudah serta tampilan yang diberikan sangat menarik dan elegan.

3. Halaman Contact Form Rainbow Line

AVvXsEjixaDEZDl0 tPPjuqyXlUNwjWG7vNt1vznzu MMGw 4PHBE8EhPVOG iMPcZL4UkEYSRs2MYLZCtHe3TbrQKAGY7SKXU0jIuXVEaFxZEWAEKjgPZLufpKpUyq VbPSD7GGJ0x jFb1ZL7ELKCzDUTLkWzRexql KMy j975ZnFa0 — Halaman Contact Form Rainbow Line

<style type="text/css">
.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:0}hr{position:relative;height:.75em;border:0;overflow:hidden;margin:0}hr:before{content:"";display:block;position:absolute;top:0;left:0;height:.75em;width:5.1em;background:#C4DD83;box-shadow:5em 0 0 0 #F4FCC9,10em 0 0 0 #FDCD78,15em 0 0 0 #ED786F,20em 0 0 0 #D99DBF,25em 0 0 0 #C39EDC,30em 0 0 0 #679DE2,35em 0 0 0 #62C2E3,40em 0 0 0 #F4FCC9,45em 0 0 0 #FDCD78,50em 0 0 0 #ED786F,55em 0 0 0 #D99DBF,60em 0 0 0 #C39EDC}.contactf-name,.contactf-email{float:left;width:49.25%}.contactf-name{margin-right:1.5%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:25px 0 0;padding:10px;font-size:15px;color:#ccc;border-color:#E8E8E8;border-width:2px 2px 4px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:40px;font-size:15px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.25);background:#EE786F;border:0;border-bottom:2px solid #D4685C;outline:none;cursor:pointer;-webkit-box-shadow:inset 0 -2px #D4685C;box-shadow:inset 0 -2px #D4685C}.contact-form-button-submit:active{top:1px;outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none !important;box-shadow:none !important;padding:0 !important;}
</style>

<div class="widget ContactForm" id="ContactForm1"><div class="contact-form-widget"><hr><div class="form"><form name="contact-form"><div class="contactf-name"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="Name" onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}'  /></div><div class="contactf-email"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="E-mail address" onblur='if (this.value == "") {this.value = "E-mail address";}' onfocus='if (this.value == "E-mail address") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" value="Type your message here..." onblur='if (this.value == "") {this.value = "Type your message here...";}' onfocus='if (this.value == "Type your message here...") {this.value = "";}'></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send Message" /><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form></div></div></div>

Jika anda pengguna template IDNTheme.com, maka halaman contact form dengan style rainbow line ini sangat saya rekomendasikan karena terlihat lebih hidup dan berwarna. Tak hanya itu, Anda juga bisa menggunakan halaman contact form ini pada template EvoMagz versi lama yang dimana pada saat itu tampilan EvoMagz memiliki tampilan dengan banyak warna.

4. Halaman Contact Form Ribbon Line

<style type="text/css">
.widget.ContactForm{z-index:1}.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px 0;background:#EBEBE3;-webkit-border-radius:2%;-moz-border-radius:2%;border-radius:2%}.contact-form-widget .form{width:91%;margin:0 auto}.ribbon{font:16px Arial;text-transform:capitalize;text-shadow:0 1px 2px rgba(0,0,0,0.25);position:relative;background:#6B5F53;color:#fff;text-align:center;padding:1em 2em;margin:0 -16px}.ribbon:before,.ribbon:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #584C40;z-index:-1}.ribbon:before{left:-1.7em;border-right-width:1.2em;border-left-color:transparent}.ribbon:after{right:-1.7em;border-left-width:1.2em;border-right-color:transparent}.ribbon .ribbon-content:before,.ribbon .ribbon-content:after{content:"";position:absolute;display:block;border-style:solid;border-color:#42362A transparent transparent;bottom:-1em}.ribbon .ribbon-content:before{left:0;border-width:1em 0 0 1em}.ribbon .ribbon-content:after{right:0;border-width:1em 1em 0 0}.contactf-name,.contactf-email,.contactf-message{text-align:left;margin-top:25px;color:#a1937b;font-size:13px}.contactf-name,.contactf-email{float:left;width:100%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:10px 0 0;padding:10px;font-size:12px;color:#aaa;border-color:#DBD6D1;border-width:1px;box-shadow:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.contact-form-name,.contact-form-email{height:35px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:37px;font:normal 12px Arial;outline:none;letter-spacing:1px;color:#fff;text-align:center;cursor:pointer;text-shadow:1px 1px 0 #ffe8b2;color:#7c5d1b;border:1px solid #d6a437;background:#febd4b;background:-webkit-gradient(linear,0 0,0 100%,from(#fed970) to(#febd4b));background:-webkit-linear-gradient(#fed970,#febd4b);background:-moz-linear-gradient(#fed970,#febd4b);background:-ms-linear-gradient(#fed970,#febd4b);background:-o-linear-gradient(#fed970,#febd4b);background:linear-gradient(#fed970,#febd4b);-pie-background:linear-gradient(#fed970,#febd4b)}.contact-form-button-submit:active{color:#7c5d1b;border:1px solid #d6a437;background:#febd4b;background:-webkit-gradient(linear,0 0,0 100%,from(#febd4b) to(#fed970));background:-webkit-linear-gradient(#febd4b,#fed970);background:-moz-linear-gradient(#febd4b,#fed970);background:-ms-linear-gradient(#febd4b,#fed970);background:-o-linear-gradient(#febd4b,#fed970);background:linear-gradient(#febd4b,#fed970);-pie-background:linear-gradient(#febd4b,#fed970)}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important}
</style>

<div class="widget ContactForm" id="ContactForm1"><div class="contact-form-widget"><h2 class="ribbon"><strong class="ribbon-content">Shoot Me an Email</strong></h2><div class="form"><form name="contact-form"><div class="contactf-name">Your name:<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="Name" onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}'  /></div><div class="contactf-email">E-mail address *:<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="E-mail address" onblur='if (this.value == "") {this.value = "E-mail address";}' onfocus='if (this.value == "E-mail address") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message">Message *:<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" value="" placeholder="Type your message here..."></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="SEND MESSAGE" /><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form></div></div></div>

Apabila anda ingin membuat halaman contact form agar sesuai dengan beberapa template karena sifatnya universal, maka anda bisa menggunakan halaman contact form ribbon line ini. Anda juga dapat merubah warna dari ribbon line pada halaman contact form ini serta proses pembuatannya juga cukup mudah yang dimana anda hanya copy code html dibawah ini dan letakkan pada halaman statis di blog anda.

5. Halaman Contact Form Minimalis

<style type="text/css">
.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px;background:#fff}.contact-title{text-align:center;font:41px fantasy;color:#121212;margin-bottom:25px}.contactf-name,.contactf-email{float:left;width:47%}.contactf-name{margin-right:6%}.name-icon img,.email-icon img{background:transparent!important;border:medium none!important;box-shadow:none!important;padding:11px 0!important}.name-icon,.email-icon{position:absolute;z-index:1}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 25px;padding:10px 10px 10px 25px;font:bold 16px cursive;text-shadow:0 1px 2px #ddd;color:#121212;background:transparent!important;border-color:#121212;border-width:0 0 2.5px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message,.contact-form-email-message:hover,.contact-form-email-message:focus{padding:10px!important}.contact-form-email-message{height:150px;border-width:2.5px!important}.contact-form-button-submit,.contact-form-button-submit:hover{background:#121212!important;width:30%;height:37px;font:bold 13px "Lucida Grande";letter-spacing:2px;color:#fff;text-align:center;border:medium none;cursor:pointer;display:block;margin:0 auto;outline:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important}
</style>

<div class="widget ContactForm" id="ContactForm1"><div class="contact-form-widget"><h2 class="contact-title">Get in touch.</h2><div class="form"><form name="contact-form"><div class="contactf-name"><div class="name-icon"><img src="https://3.bp.blogspot.com/-TgreeOjV9hc/WC8lF19LbaI/AAAAAAAABq4/E5U-ahjjFcYBpgZd49O1BwTLelkqVGhgQCLcB/s1600/avatar%25281%2529.png" width="16" height="16" /></div><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="Name" onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}'  /></div><div class="contactf-email"><div class="email-icon"><img src="https://4.bp.blogspot.com/-AuOlsNet-oA/WC8lCTFCY_I/AAAAAAAABq0/7eKfEB9TINkHQ_-ug5oqM7LTl9YBXjevQCLcB/s1600/envelope%25281%2529.png" width="16" height="16" /></div><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="E-mail address" onblur='if (this.value == "") {this.value = "E-mail address";}' onfocus='if (this.value == "E-mail address") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" value="Type your message here..." onblur='if (this.value == "") {this.value = "Type your message here...";}' onfocus='if (this.value == "Type your message here...") {this.value = "";}'></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="SEND" /><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form></div></div></div>

Nah, yang terakhir yakni ada halaman contact form minimalis yang sangat saya rekomendasikan untuk anda apabila menggunakan template blogger dengan gaya minimalis seperti Mediumish, Minimalist Template Blogger, Amara, Shopia, dan template buatan BeautyTemplates.com lainnya.