Cara Membuat Form Kontak Pada Halaman Blog

Author : |
Memasang form kontak pada halaman blog mempunyai tujuan agar pembaca blog dapat dengan mudah menghubungi Anda. Membuat form kontak sebisa mungkin sudah support pada semua device pembaca.

Cara Membuat Form Kontak Pada Halaman Blog

Untuk Membuat Form Kontak, Anda diharuskan membuat halaman baru untuk meletakkan kode CSS dan Javascript.

Berikut Kode CSS yang dapat langsung Anda tempatkan pada halaman statis blog Anda:


<div class="note">
<h4 style="text-align: center;">
Silahkan hubungi kami melalui formulir kontak ini apabila ada hal yang ingin ditanyakan, dengan senang hati kami akan segera merespon email dari saudara.  </h4>
<div id="twist_blogger_cntct_form">
<div class="wrap-me">
<form name="contact-form">
<span class='name-bg'>Nama*</span><br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Masukan nama anda ..." size="30" type="text" value="" /><br />
<br />
<span class='email-bg'>Email*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Masukan email anda..." size="30" type="text" value="" /><br />
<br />
<span class='message-bg'>Pesan*</span><br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Tulis email anda disini..." rows="5"></textarea><br />
<span class='send-bg'><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Kirim" /></span>
<span class='clear-bg'><input class='contact-form-button contact-form-button-submit clear-button' type='reset' value='Bersihkan'/></span>
<br />
<div style="max-width: 100%; text-align: center; width: 100%;">
<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>
<br />
</div>
</div>

<p>
<h3>
Selain melalui form kontak ini anda bisa menghubungi kami via :  </h3>
<p>WhatsApp   : -</p>
<p>Facebook   : <a href="#">Admin BlogLink</a></p>

<style>
div#twist_blogger_cntct_form {
    padding: 50px 0px;
    border-radius: 2px;
    color: #1D1D1D;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    background-color: #404040;
    font-family: sans-serif;
}
div#twist_blogger_cntct_form .wrap-me {
    margin: 0 auto;
    display: block;
    padding: 30px 20px;
    background-color: #F3F3F3;
    max-width: 440px;
    width: 100% !important;
    border-top: 65px solid #FF0000;
    box-sizing: border-box;
}
div#twist_blogger_cntct_form .wrap-me:before {
    content: '\f0e0';
    position: absolute;
    font-family: FontAwesome;
    font-weight: normal;
    margin-top: -88px;
    margin-left: -23px;
    left: 50%;
    display: inline-block;
    font-size: 28px;
    width: 53px;
    height: 53px;
    border-radius: 50px;
    text-align: center;
    color: #FFFFFF;
    box-sizing: border-box;
    border: 2px solid #FFFFFF;
    line-height: 49px;
}
input#ContactForm1_contact-form-name, #ContactForm1_contact-form-email, #ContactForm1_contact-form-email:hover, #ContactForm1_contact-form-email:active {
    padding: 5px;
    margin-top: 4px !important;
    box-shadow: none!Important;
    max-width: 300px;
    width: 100%;
    border: 1px solid #D2D2D2;
    line-height: 1em;
    min-height: 31px;
    background: #FEFEFE;
    font-family: sans-serif;
    margin-bottom: 15px;
    border-radius: 0px;
}
.contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover {
    padding: 5px;
    margin-top: 4px !important;
    box-shadow: none!Important;
    max-width: 400px;
    width: 100%;
    border: 1px solid #D2D2D2;
    line-height: 1em;
    min-height: 80px;
    background: #FEFEFE;
    font-family: sans-serif;
    margin-bottom: 10px;
    border-radius: 0px;
}
/***** Focus *****/
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
    outline: none;
    background: #FFFFFF !important;
    color: #444;
    border-color: rgb(236, 235, 235) !important;
    box-shadow: 0 0 5px rgba(241, 241, 241, 0.7) !important;
    transition: all 0.3s ease-in-out !important;
}
/**** Submit button style ****/
.contact-form-button-submit:hover {
    color: #FFFFFF;
    background: #0083FF !important;
}
.contact-form-button-submit {
    background: #ff0000;
    display: table;
    font-size: 17px;
    margin: 0 !important;
    border-radius: 0 !important;
    max-width: 100%;
    width: 100%;
    min-width: 100%;
    height: 32px;
    line-height: 0.5em;
    letter-spacing: 0.5px;
    font-family: sans-serif;
    font-weight: normal;
    cursor: pointer;
    outline: none!important;
    color: #FFFFFF;
    border: 1px solid #fff !important;
    text-align: center;
    padding: 0px 0px 0px 15px;
    text-transform: capitalize;
    transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
}
/**** Submit button on Focus ****/
.contact-form-button-submit:focus, .contact-form-button-submit.focus {
  border-color: #FFFFFF;
  box-shadow: none !important;
}
/**** Error message ****/
.contact-form-error-message-with-border .contact-form-success-message {
  background: #f9edbe;
  border: 1px solid #f0c36d;
  bottom: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  color: #666;
  font-size: 12px;
  font-weight: bold;
  padding-bottom: 10px;
  line-height: 19px;
  margin-left: 0;
  opacity: 1;
  position: static;
  text-align: center;
}
/**** Submit Button On Success Message ****/
.contact-form-button-submit.disabled, .contact-form-button-submit.disabled:hover, .contact-form-button-submit.disabled:active {
    opacity: 0.9;
}
/****** Success Message *****/
.contact-form-error-message-with-border {
    background: #000000;
    border: 1px solid #5A5A5A;
    bottom: 0;
    box-shadow: none;
    color: #FDFDFD;
    font-size: 15px;
    font-weight: normal;
    line-height: 35px;
    margin-left: 0;
    opacity: 1;
    position: static;
    text-align: center;
    height: 35px;
    margin-top: 45px;
}
.contact-form-cross {
    height: 14px;
    margin: 5px;
    vertical-align: -8.5%;
    float: right;
    width: 14px;
    border-radius: 50px;
    border: 0 !important;
    cursor: pointer;
}
.contact-form-success-message-with-border {
    font-weight: normal;
    background-color: #000;
    border: 1px solid #FFF;
    color: #FFF;
    line-height: 35px;
    margin-left: 0;
    font-size: 13px;
    opacity: 1;
    position: static;
    text-align: center;
    height: 35px;
    margin-top: 45px;
}
/* Extra Stuff */
div#twist_blogger_cntct_form span.name-bg {
    background-color: #E8F2FF;
 }
div#twist_blogger_cntct_form span.email-bg {
    background-color: #FFE8E8;
}
div#twist_blogger_cntct_form span.name-bg, div#twist_blogger_cntct_form span.email-bg {
    display: inline-block;
    max-width: 300px;
    line-height: 21px;
    width: 100%;
    color: #696969;
    padding: 3px 5px;
    margin: 0px 0px 4px;
    box-sizing: border-box;
    height: 30px;
    border: 1px solid #E4E0E0;
    padding-left: 39px;
}
div#twist_blogger_cntct_form span.name-bg:before {
    content: '\f007';
    background-color: #60A2FF;
 }
div#twist_blogger_cntct_form span.email-bg:before {
    content: '\f1fa ';
    background-color: #FF530B;
}
div#twist_blogger_cntct_form span.name-bg:before, div#twist_blogger_cntct_form span.email-bg:before, div#twist_blogger_cntct_form span.message-bg:before {
    font-family: FontAwesome;
    text-align: center;
    margin: -4px 0 0px 0px;
    font-weight: normal;
    padding: 0;
    line-height: 27px;
    width: 28px;
    height: 28px;
    display: table;
    position: absolute;
    margin-left: -40px !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 0 !important;
    color: #FFFFFF;
}
div#twist_blogger_cntct_form span.message-bg {
    background-color: #EBFFE8;
    display: inline-block;
    max-width: 400px;
    line-height: 21px;
    width: 100%;
    color: #696969;
    padding: 3px 5px;
    box-sizing: border-box;
    height: 30px;
    border: 1px solid #E4E0E0;
    padding-left: 39px;
    margin: 0px 0px 4px;
}
div#twist_blogger_cntct_form span.message-bg:before {
    content: '\f0e0';
    background-color: #20CC00;
}
div#twist_blogger_cntct_form span.send-bg {
    height: 32px;
    display: inline-block;
    float: left;
    max-width: 45%;
    width: 100%;
    margin-top: 15px;
    transition: all 0.4s ease-in-out !important;
}
div#twist_blogger_cntct_form span.send-bg:before {
    content: '\f1d8';
 }
div#twist_blogger_cntct_form span.send-bg:before, div#twist_blogger_cntct_form span.clear-bg:before {
    font-family: FontAwesome;
    text-align: center;
    font-weight: normal;
    margin: 0;
    background-color: #000;
    padding: 0;
    line-height: 27px;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    border: 1px solid #fff;
    border-right: 0 !important;
    color: #FFFFFF;
}
div#twist_blogger_cntct_form span.clear-bg {
    display: inline-block;
    float: right;
    margin-top: 15px;
    max-width: 45%;
    width: 100%;
}
div#twist_blogger_cntct_form span.clear-bg:before {
    content: '\f021';
 }

input.contact-form-button.contact-form-button-submit.clear-button:hover {
    background-color: #E83434 !important;
}
div#twist_blogger_cntct_form .clear-button {
    color: #FFFFFF;
    border: 1px solid #FFF !important;
    background-color: #ff0000;
    float: right;
    display: table;
    height: 32px;
}
</style>
</div>



Mudah Bukan..? dan saya yakin Anda dapat dengan mudah menerapkannya pada blog Anda.
Selamat Mencoba.
Silahkan bagikan info luarbiasa ini kepada teman anda melalui tombol share fb, twitter atau googleplus.

Comments

Post a Comment

Popular posts from this blog

Tutorial Membuat Blog dengan Mudah

Author : |
Image
Membuat blog untuk sebagian orang adalah hal yang sangat sulit dan rumit. Akan tetapi dengan langkah yang tepat, saya yakin Anda mampu  membuatnya dengan mudah, seperti yang akan saya bahas pada tutorial ini. Seperti diketahui, blog merupakan media yang efektif untuk berbagi informasi kepada orang lain. Blog adalah hal yang awalnya rumit menjadi sangat menyenangkan jika di lakukan dengan serius dan berjalan apa adanya. Bahkan bila di tekuni sebuah blog dapat menghasilkan uang yang banyak.  Jika Anda ingin memiliki blog tapi belum mengatahui caranya, artikel ini akan membantu Anda langkah demi langkah sampai blog Anda dapat diakses melalui internet. Bukan itu saja, melalui langkah pada tutorial ini Anda dapat mengembangkan blog supaya dapat bersaing di mesin pencari Google. Berikut adalah Tutorial Cara Membuat Blog dengan Mudah. Tutorial ini Saya tulis supaya lebih mudah untuk dipahami, terutama bagi Anda yang ingin mengetahui cara membuat blog dari awal sampai bl...
Read more

Tips Memulai Ngeblog, Ini Perlu Proses

Author : |
Image
Hari ini, ada banyak penekanan pada sukses blog secara mendadak. Kita banyak melihat, membaca dan mendengar banyak website yang menawarkan tips dan tutorial blogging yang lebih baik. Mereka sangat umum menjelaskan meyakinkan kita akan berhasil dalam blogging. Saya tidak tahu tentang semua itu apakah benar-benar akan berhasil. Saya telah membuat banyak blog dan kemudian saya tinggalkan, kerena terjebak oleh tutorial-tutorial yang berseliweran di website. Ketika lelah itu kemudian saya menyadari kalau sebenarnya saya tidak tahu tentang blogging. Jadi saya memutuskan untuk membuat blog baru ini, menyusun tips dan tutorial sendiri yang tentu berdasarkan apa yang saya kerjakan, saya rasakan. yang baru-baru ini saya lakukan semestinya dilakukan sejak dulu. Jadi apakah Anda baru memulai ngeblog atau berhenti sementara, berikut tips dari saya: Umum Jangan CopyPaste; Berhentilah dan mulai mencoba menjadi diri sendiri, dengan segala keunikan yang Anda miliki. Katakan yang sebenarnya...
Read more

Google Search Consule dan Fungsinya

Author : |
Image
Google Search Consule adalah sebuah layanan gratis yang disediakan oleh Google untuk memantau dan mengelola blog Anda. Google Search Consule berhubungan dengan mesin telusur, artinya segala hal tentang blog Anda, akan terdeteksi melalui layanan ini. Mulai struktur data yang membangun template blog , peta situs yang sudah terkirim, halaman terindek, halaman error, halaman diblokir, lalu lintas pengunjung keluar masuk, link yang menuju blog Anda, kata kunci yang membawa pengunjung ke blog Anda dan masih banyak lagi lainnya. Google Search consule adalah alat untuk mendiagnosa blog. bagaiman performa blog di halaman pencarian Google bersaing dengan blog lain di mesin telusur. Memanfaatkan Google Search Consule untuk mengoptimalkan SEO On Page Blog sangat diperlukan sekali, tetapi yang paling penting adalah bagaiman kita mampu mencuri perhatian mesin telusur Google dengan konten yang berkualitas dan menggiring pengunjung membaca blog kita atas pencarian yang mereka lakukan. Cata...
Read more