 |
| ilustrasi kontak form |
Buat post di halaman statis,
kemudian terapkan kode di bawah ini pada tab HTML. Catatan : Jika sudah
menambahkan kode ini, disarankan untuk tidak menggunakan mode Compose di
halaman Pos ini.
<form
name="contact-form">
<span><i
class="fa fa-pencil-square-o"></i> Name </span>
<input
id="ContactForm1_contact-form-name" name="name"
size="30" type="text" value="" />
<span><i
class="fa fa-envelope-o"></i> Email Address <span
style="color: #f56954; font-size: x-small; font-weight:
bold;">important</span></span>
<input
id="ContactForm1_contact-form-email" name="email"
size="30" type="text" value="" />
<span><i
class="fa fa-keyboard-o"></i> Content <span
style="color: #f56954; font-size: x-small; font-weight:
bold;">important</span></span>
<textarea
cols="25" id="ContactForm1_contact-form-email-message"
name="email-message" rows="5"></textarea>
<input
id="ContactForm1_contact-form-submit" type="button"
value="Send" />
<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;}
#ContactForm1_contact-form-name,
#ContactForm1_contact-form-email{
height:auto;margin:5px
auto;padding:10px;background:#fafafa;color:#444;border:1px solid
#ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all
0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px
0;padding:10px;background:#fafafa;color:#444;font-family:'Open
Sans',sans-serif;border:1px solid #ccc;border-radius:3px;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:rgba(81,203,238,1);box-shadow:0
0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit{font-family:'Open
Sans';float:left;background:#cf4d35;color:#fff;margin:10px
auto;vertical-align:middle;cursor:pointer;padding:10px
18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all
.8s ease}
#ContactForm1_contact-form-submit:hover
{background:#e45a40;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;}
@media
only screen and (max-width:640px){
#ContactForm1_contact-form-name,
#ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
