Cara membuat Contact us html
Seperti yang pernah saya jelaskan mengenai tujuan blog ini yaitu untuk membagikan tutorial cara menjadi publisher blogger dari awal sampai menghasilkan uang. Salah satu langkah yang saya temukan saat belajar blogger yaitu membuat contact us, maka saya akan membagikan Cara Membuat Contact us HTML seperti pada blog masigun.
Form Contact us adalah cara pengunjung blog anda untuk berkomunikasi secara pribadi dengan pembuat blog atau penulisnya.
Manfaat menambahkan contact us antara lain :
1. Pengunjung blog Anda dapat menyampaikan pertanyaan sesuai dengan salah satu isi artikel diblog anda, atau menanyakan sesuatu yang pengunjung Anda butuhkan secara pribadi.
2. Jika Pengunjung Anda memberikan saran atau kritik mengenai blog Anda lewat halaman contact us, pengunjung lainnya tidak akan melihat saran dan kritik jika saran tersebut berupa kritikan yang pedas. :D
3. Manfaat terpenting dengan adanya contact us, kemungkinan besar blog anda akan disetujui oleh google adsense.
4. Jika pengunjung Anda berkomentar atau mengirimkan pesan melalui contact us, anda akan mendapatkan notifikasi melaluui email yang terhubung dengan akun blogger Anda. Jadi Anda akan lebih cepat untuk merespon email tersebut.
Apa Anda tertarik untuk membut contact us? silahkan simak Cara membuat Contact us html seperti pada blog masigun.
1. Masuk ke akun blogger anda, klik halaman lalu buat halaman baru.
2. Isi judul dengan Contact us atau hubungi saya, lalu copy kode html dibawah ini dan pastekan pada halaman HTML bukan Compose.
<style scoped="" type="text/css">
/*<![CDATA[*/
.contact-form-box {
width: 100%;
margin: 20px auto;
padding: 0
}
#contactForm .floating-label-form-group {
font-size: 14px;
position: relative;
margin-bottom: 0;
padding-bottom: 20px;
border-bottom: 1px solid #ddd
}
#contactForm .floating-label-form-group.floating-label-form-group-with-focus {
position: relative
}
#contactForm .floating-label-form-group:after,
#contactForm .floating-label-form-group:before {
position: absolute;
bottom: -1px;
width: 0;
height: 2px;
background-color: #e8554e;
content: "";
transition: width .4s ease-in-out;
display: block
}
#contactForm .floating-label-form-group:before {
right: 50%
}
#contactForm .floating-label-form-group:after {
left: 50%
}
#contactForm .floating-label-form-group.floating-label-form-group-with-focus:after,
#contactForm .floating-label-form-group.floating-label-form-group-with-focus:before {
width: 50%
}
#contactForm .floating-label-form-group input,
#contactForm .floating-label-form-group textarea {
z-index: 1;
position: relative;
padding-right: 0;
padding-left: 0;
border: none;
border-radius: 0;
font-size: 14px;
font-family: Roboto, Arial, sans-serif;
font-weight: 400;
background: 0 0;
box-shadow: none!important;
resize: none
}
#contactForm .floating-label-form-group label {
display: block;
z-index: 0;
position: relative;
top: 2em;
margin: 0;
font-size: 12px;
font-family: Roboto, Arial, sans-serif;
font-weight: 300;
line-height: 1.764705882em;
vertical-align: middle;
vertical-align: baseline;
opacity: 0;
-webkit-transition: top .3s ease, opacity .3s ease;
-moz-transition: top .3s ease, opacity .3s ease;
-ms-transition: top .3s ease, opacity .3s ease;
transition: top .3s ease, opacity .3s ease
}
#contactForm .floating-label-form-group::not(:first-child) {
padding-left: 14px;
border-left: 1px solid #eee
}
#contactForm .floating-label-form-group-with-value label {
top: 0;
opacity: 1
}
#contactForm .floating-label-form-group-with-focus label {
color: #e8554e
}
#contactForm {
border-top: 1px solid #ddd
}
#contactForm textarea.form-control {
height: auto
}
#contactForm .form-control {
display: block;
width: 100%;
color: #555
}
#contactForm input:active,
#contactForm input:focus,
#contactForm textarea:active,
#contactForm textarea:focus {
outline: 0
}
#contactForm .btn,
#contactForm .contact-form-button-submit {
font-family: Roboto, Arial, sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 18px;
letter-spacing: 1px;
border-radius: 0;
padding: 0 25px;
height: 51px;
line-height: 51px;
color: #333;
background-color: #fff;
border: 1px solid #ccc;
cursor: pointer;
margin: 20px 0 0;
background-image: none
}
#contactForm .contact-form-button {
height: 51px;
line-height: 51px
}
#contactForm .btn-default:focus,
#contactForm .btn-default:hover,
#contactForm .contact-form-button-submit:focus,
#contactForm .contact-form-button-submit:hover {
background-color: #e8554e;
border: 1px solid #be403a;
color: #fff
}
.contact-form-error-message-with-border,
.contact-form-success-message-with-border {
background: #fff;
border: 1px solid #ddd;
bottom: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
color: #666;
font-size: 16px;
font-weight: 400;
line-height: 30px;
opacity: 1;
position: static;
text-align: center;
margin: 20px 0 0
}
.contact-form-cross {
height: 11px;
margin: 0 5px;
vertical-align: 0!important;
width: 11px;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-goog-ms-box-shadow: none!important;
box-shadow: none!important
}
.contact_layout {
text-align: center;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, .8);
z-index: 99999
}
.contact_message {
width: 50%;
background: #fff;
border-radius: 5px;
padding: 20px;
border: 1px solid transparent;
text-align: center;
color: #333;
position: absolute;
top: 10%;
left: 50%;
margin-left: -25%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.contact_message:before {
content: "\f164";
font-family: FontAwesome;
font-weight: 500;
font-size: 30px;
display: block;
margin-bottom: 10px;
}
@media screen and (max-width:768px) {
.contact_message {
width: 90%!important;
margin-left: -45%!important;
}
.contact-form-box {
width: 100%;
}
}
/*]]>*/
</style>
<div class="contact-form-box">
<div>
Silahkan isi form di bawah ini untuk menghubungi admin masigun. </div>
<br />
<form id="contactForm" name="contact-form">
<div class="floating-label-form-group">
<label>Name</label>
<input class="form-control" id="ContactForm1_contact-form-name" name="name" placeholder="Name" type="text" value="" /> </div>
<div class="floating-label-form-group">
<label>Email Address</label>
<input class="form-control" id="ContactForm1_contact-form-email" name="email" placeholder="Email Address" type="text" value="" /> </div>
<div class="floating-label-form-group">
<label>Message</label>
<textarea class="form-control" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
</div>
<input class="btn btn-default" id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<br />
<div class="clear">
</div>
<div style="max-width: 100%; text-align: left; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<script src="https://marwanpedia.blogspot.com/search?q=cara-mengetahui-id-blog-kita-sendiri" target="_blank">Cara mengetahui ID blog kita Sendiri.
4. Peringatan jangan sekali-kali atau mencoba mengklik compose setelah kode html diatas anda paste pada halaman HTML karena akan terjadi kesalahan pada contact us yang anda buat. artinya contact us yang Anda buat tidak akan bekerja
4. Setelah selesai klik publikasi dan jangan lupa untuk submit kewebmaster tool. jika Anda belum tahu cara submit artikel ke webmaster tool silahkan baca postingan saya mengenai cara submit artikel ke webmaster tool.
Begiulah cara membuat contact us html ala . jika Anda menemukan kendala saat menerapkannya pada blog anda silahkan berkomentar dipostingan ini atau beritahu saya melalui halaman contact us.
