Contact form ini bisa digunakan di blog apa saja baik di Blogger, Wordpress, ataupun lainnya dengan bantuan Fromspree sehingga aman untuk blog dengan Accelerated Mobile Page.
Jika Anda ingin mencobanya, silahkan ikuti langkahnya di bawah ini.
1. Silahkan simpan CSS di bawah ini
#contactForm input:focus ~ label,
#contactForm textarea:focus ~ label,
#contactForm input:valid ~ label,
#contactForm textarea:valid ~ label {
font-size: 0.75em;
color: #8e44ad;
top: -2.25rem;
-webkit-transition: all 0.125s ease;
transition: all 0.125s ease;
}
#contactForm .styled-input {
float: left;
width: 33.3333%;
margin: 2rem 0 1rem;
padding: 0 10px 0 0;
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#contactForm .styled-input-in {
position: relative;
}
#contactForm {
margin-right: -10px
}
#contactForm .styled-input label {
color: #999;
padding: 1rem;
position: absolute;
top: 0;
left: 0;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
pointer-events: none;
line-height: 1;
}
#contactForm .styled-input.wide {
width: 100%;
}
#contactForm input,
#contactForm textarea {
padding: 1rem 1rem;
border: 1px solid #ddd;
width: 100%;
font-size: 1rem;
background: #fafafa;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
#contactForm input ~ .span1,
#contactForm textarea ~ .span1 {
display: block;
width: 0;
height: 3px;
background: #8e44ad;
position: absolute;
left: 50%;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
#contactForm input ~ .span2,
#contactForm textarea ~ .span2 {
display: block;
width: 0;
height: 3px;
background: #8e44ad;
position: absolute;
right: 50%;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
#contactForm input ~ span {
bottom: 0;
}
#contactForm textarea ~ span {
bottom: 5px;
}
#contactForm input:focus,
#contactForm textarea:focus {
outline: 0;
}
#contactForm input:focus ~ .span1,
#contactForm textarea:focus ~ .span1,
#contactForm input:focus ~ .span2,
#contactForm textarea:focus ~ .span2 {
width: 50%;
}
#contactForm textarea {
width: 100%;
min-height: 15em;
}
#contactForm .btn {
font-family: "Helvetica", "Arial", sans-serif;
text-transform: uppercase;
font-size: 14px;
font-weight: 800;
letter-spacing: 1px;
border-radius: 0;
padding: 0 25px;
height: 51px;
line-height: 51px;
color: #333;
background-color: #fafafa;
border: 1px solid #ddd;
cursor: pointer;
margin: 20px 0 0;
background-image: none;
}
#contactForm .btn-default:hover,
#contactForm .btn-default:focus {
background-color: #8e44ad;
border: 1px solid #0400bf;
color: white;
}2. Untuk menampilkan contact form-nya silahkan gunakan kode HTML di bawah ini.
<form action="https://formspree.io/your@email.co" method="POST" target="_blank" name="sentMessage" id="contactForm">
<div class="styled-input">
<div class="styled-input-in">
<input type="text" name="name" required="required" />
<label>Name</label>
<span class="span1"></span><span class="span2"></span> </div></div>
<div class="styled-input">
<div class="styled-input-in">
<input type="email" name="_replyto" required="required" />
<label>Email</label>
<span class="span1"></span><span class="span2"></span> </div></div>
<div class="styled-input">
<div class="styled-input-in">
<input type="text" name="_subject" required="required" />
<label>Subject</label>
<span class="span1"></span><span class="span2"></span> </div></div>
<div class="styled-input wide">
<div class="styled-input-in">
<textarea required="required"></textarea>
<label>Message</label>
<span class="span1"></span><span class="span2"></span> </div></div>
<button type="submit" class="btn btn-default">Send</button>
</form>Silahkan ganti
your@email.co dengan alamat email Anda.Selesai, selamat mencoba....