Cara Membuat Halaman Contact Form Ala Arlina Design

Cara Membuat Halaman Contact Form Ala Arlina Design - Widget Contact Form atau Formulir Kontak adalah salah satu widget yang paling pentin...

Cara Membuat Halaman Contact Form Ala Arlina Design - Widget Contact Form atau Formulir Kontak adalah salah satu widget yang paling penting untuk menghubungkan antara pengunjung blog dan pemilik blog. Disini saya akan membagikan cara membuat formulir kontak mirip dengan yang ada diblog Arlina Design.

Terlebih dahulu anda harus menambahkan widget Formulir Kontak pada blog anda

Dan sebelumnya anda sudah memasang Font Awesome diblog anda, jika belum tambahkan link dibawah ini sebelum </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Silahkan buka Template > Edit HTML > Kemudian tambahkan kode dibawah ini sebelum tag </style> atau ]]></b:skin>

#ContactForm1 {
    display: none;
}

Kemudian buat halaman statis baru dan masukkan kode HTML dibawah ini

<h2 class="post-title entry-title">
Contact Form <a href="https://www.blogger.com/"><i class="fa fa-times"></i></a></h2>
<form name="contact-form">
<span style="color: white; font-size: 1.2em;"><i class="fa fa-check-square-o"></i> Name </span><br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  <br />
<br />
<span style="color: white; font-size: 1.2em;"><i class="fa fa-envelope-o"></i> Email Address <span style="color: #584f69; font-size: x-small; font-weight: bold;">important</span></span> <br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  <br />
<br />
<span style="color: white; font-size: 1.2em;"><i class="fa fa-pencil-square-o"></i> Content <span style="color: #584f69; font-size: x-small; font-weight: bold;">important</span></span><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br />
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />  <br />
<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>
<br />
<style scoped="" type="text/css">
body {background:#edeae1;}
#outer-wrapper {background:transparent;margin:0 auto;padding:0;text-align:left;float:none;background-position:center!important;box-shadow:initial;}
#post-wrapper {background:#3cc091;width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important;box-shadow:0 12px 5px -8px rgba(0,0,0,0.1);}
.post-body,.post{background-position:center!important;line-height:normal;color:#fff}
#blog1,#artikel,.blog-posts{background-position:center!important;}
.banner,#footer-wrapper,#comments,#sidebar-wrapper,#header-wrapper,#menu-wrap,.back-to-top,.back-to-top.show{display:none;margin-top:0;margin:0;}
.post-inner {padding:0 0 0 0;margin:20px auto;}
#content-wrapper {background-color:transparent;margin:5% auto 2% auto;padding:0;word-wrap:break-word;max-width:520px;}
#BackToTop,nav,.blogouter-wrapper,#comments, #blog-pager, .breadcrumbs, .post-footer,#menutop,.BackToTop,#newsletter,h1.post-title{display:none!important;}
.post {background:transparent;box-shadow:initial;border:0;padding:70px 30px 30px 30px;position:relative;}
.post img {height:auto;max-width:100%;border:0;}
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-email,#ContactForm1_contact-form-name{width:100%;height:auto;margin:10px auto;padding:12px;background:#fff;color:#444;border:1px solid transparent;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all .5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:140px;margin:10px 0;padding:12px;background:#fff;color:#444;border:1px solid transparent;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;}
#ContactForm1_contact-form-submit{width:100%;float:left;background:#494158;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:15px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border:1px solid transparent;transition:all .6s ease}
#ContactForm1_contact-form-submit:hover {color:#fff;background:#584f69;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:rgba(255,255,255,0.2);border:none;box-shadow:none;color:#fff;padding:5px 0;}
.contact-form-success-message {background:rgba(255,255,255,0.2);border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
.post h2{background:#494158;position:absolute;top:0;left:0;right:0;font-weight:700;font-size:1.6em;color:#fff;display:block;margin:auto;padding:16px 0}
.post h2 a{background:#3cc091;color:#fff;position:absolute;display:inline-block;right:0;top:0;padding:16px 26px;font-weight:normal;}
.post h2 a:hover{background:#3cc091;color:#fff!important;}
form i{font-family:Fontawesome;font-weight:normal}
.post h2 a i{transform:rotate(0deg);transition:all .6s}
.post h2 a i:hover{transform:rotate(360deg);}

@media screen and (max-width:640px){
#outer-wrapper {margin:0 20px;}}
</style>
<style scoped="" type="text/css">
#post-wrapper {width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important;}
#sidebar-wrapper{display:none;margin-top:0;margin:0;}
.post img{background:#fff;}
#comments,#disqus_thread,#disqusshow{display:none;}
</style>
<br />
<script type="text/javascript">
//<![CDATA[ 
var submit = document.getElementById('ContactForm1_contact-form-submit');
submit.addEventListener("click", function () {
    var email = document.getElementById('ContactForm1_contact-form-email').value,
        filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
    if (!filter.test(email)) {
        alert('Please enter a valid email!');
    }
}, !1)
//]]>
</script>