Cara membuat contact form sederhana
Judul : Cara membuat contact form sederhana
link : Cara membuat contact form sederhana
Cara membuat contact form sederhana
 |
| WWW.RHM-FILES.TK |
Memasang widget contact form di blog
- Kita harus menambahkan widget contact form yg kita buat caranya :
Buka halaman layout >> tata letak >> add gadget >> contact form >> Letakan di sembarang tempat.
 |
| WWW.RHM-FILES.TK |
Kemudian cari code seperti di bawah ini dan hapus pada beberapa bagian dan sisakan seperti di bawah ini
( Tulisan "hapus bagian ini" itu di hapus juga ye )
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>Nah sekarang simpan template nya
<b:includable id='main'> Hapus bagian ini
</b:includable>
</b:widget>
</b:section>
Membuat halaman contact -us
Sekarang lanjutkan membuat halaman contact -us , Buat halaman baru atau bisa juga membuat postingan baru , terserah kamu , mau pilih yg mana , jika sudah siap letakan code di bawah ini dengan mengunakan mode HTML (Sebelahnya compose) Ke dalam halaman anda
<div class='seocips-contact-form'>Masih dalam mode HTML , langsung aja di publikasikan , jika kamu ke mode compose kemudian di publikasikan hasilnya akan berantakan
<div class='form'>
<!-- Custom Contact Form By Seocips start -->
<div class='seocips-contact-title'>
Contact Form
</div>
<form name='contact-form'>
<!-- Name Field -->
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}' />
<p></p>
<!-- Email ID Field -->
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID" size='30' type='text' onblur='if (this.value == "") {this.value = "Email ID";}' onfocus='if (this.value == "Email ID") {this.value = "";}'/>
<p></p>
<!-- Message Field -->
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' value='Leave Your Message..' onblur='if (this.value == "") {this.value = "Leave Your Message..";}' onfocus='if (this.value == "Leave Your Message..") {this.value = "";}'></textarea>
<p></p>
<!-- Clear Button -->
<input class='contact-form-button contact-form-button-submit seocips-button-color' type='reset' value='Clear'/>
<!-- Send Button -->
<input class='contact-form-button contact-form-button-submit seocips-button-color' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<p></p>
<!-- Validation -->
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
<!-- End Custom Contact Form By seocips -->
</div></div>
<style>
.seocips-contact-form { background:#fff; box-shadow:-1px 2px 3px #ddd; font:12px arial; width:100%; max-width:320px; margin:20px auto; padding:15px; border:1px solid #ddd; }
.seocips-contact-title { box-shadow:-1px 2px 3px #ddd; text-shadow:0 1px 1px rgba(0,0,0,.3); margin:0 0 10px 0; font-weight:400; padding:10px 15px; font:16px Arial; cursor:pointer; text-align:center; color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
.contact-form-name,.contact-form-email,.contact-form-email-message { max-width:320px; width:100%; font-weight:bold; }
.contact-form-name { background:#f3f3f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibvbqGjQBrCBun9o2ZBCGh5TykzPLTyMBj3ZnXds7RnOWOwco_2Pm3qQefXDeD759zE_X4RYUNyHhLcyFBJLKseWIpwlb7k6_IRe8yyYRiaAjmtxYmGq79cZK1de3k5bL3Ufl2ZdUKHeA/s320/name.png) no-repeat 7px 8px; background:#f3f3f3; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding:5px 15px 5px 28px; box-shadow:inset -2px 2px 3px #ddd; vertical-align:top; }
.contact-form-email { background:#F2F2F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmOOd7T1ER39Vk0NDLPZ983Cn0HhlkXK7kcEdNGF5vtW8zItj_4gsvqGhbbXWAZFPr1FWORNTI49ZEa2Kn1eCDRiSgjOoM9Oy6oYDcExXAZUVKCd4L9xbV8VgF36c7w-hYQc3IxlMnLP0/s320/email.png) no-repeat 7px 10px; background-color:#F2F2F2; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding:5px 15px 5px 28px; vertical-align:top; box-shadow:inset -2px 2px 3px #ddd; }
.contact-form-email:hover,.contact-form-name:hover { border:1px solid #bebebe; box-shadow:0 1px 2px rgba(5,95,255,.1); padding:5px 15px 5px 28px; }
.contact-form-email-message:hover { border:1px solid #bebebe; box-shadow:0 1px 2px rgba(5,95,255,.1); padding:10px; }
.contact-form-email-message { background:#FFF; background-color:#f2f2f2; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:arial; font-size:13px; margin:0; margin-top:5px; padding:10px; vertical-align:top; max-width:320px !important; height:150px; border-radius:4px; box-shadow:inset -2px 2px 3px #ddd; }
.contact-form-button { cursor:pointer; height:32px; line-height:28px; font-weight:bold; border:none; }
.contact-form-button { display:inline-block; zoom:1; *display:inline; vertical-align:baseline; margin:0 2px; outline:none; cursor:pointer; text-align:center; text-decoration:none; font:14px/100% Arial,Helvetica,sans-serif; padding:.5em 2em .55em; text-shadow:0 1px 1px rgba(0,0,0,.3); box-shadow:-1px 2px 3px #ddd; }
.contact-form-button:hover { text-decoration:none; }
.contact-form-button:active { position:relative; top:1px; }
.seocips-button-color { color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
.seocips-button-color:hover { background:#f47c20; }
.seocips-button-color:active { color:#fcd3a5; }
.contact-form-name { background:#F3F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibvbqGjQBrCBun9o2ZBCGh5TykzPLTyMBj3ZnXds7RnOWOwco_2Pm3qQefXDeD759zE_X4RYUNyHhLcyFBJLKseWIpwlb7k6_IRe8yyYRiaAjmtxYmGq79cZK1de3k5bL3Ufl2ZdUKHeA/s320/name.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }
</style>
Memasang widget di atas tampilanya simpel dan sederhana , tapi cukuplah menurut saya , anda dapat mengujinya dengan mengirimkan pesan mengunakan contact form ini , dan periksa apakah pesanya muncul di email gmail blog kamu.
Demikianlah Artikel Cara membuat contact form sederhana
Sekianlah artikel Cara membuat contact form sederhana kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Cara membuat contact form sederhana dengan alamat link https://cheatterbaru2.blogspot.com/2016/07/cara-membuat-contact-form-sederhana.html