Cara Mudah Membuat Contact Form Ala Seocips, ya ala seocip bukan ala Abdul Rozak karena emang buatan beliau. Saya hanya sangat sering menggunakan cara - cara yang di gunakan seocips ini dan kemudian saya jadi mikir lebih baik saya menuliskannya disini. Tapi jika mau langsung dari sumbernya silahkan bisa di lihat di sini ya http://www.seocips.com/2014/03/cara-membuat-contact-form-sederhana-di.html
Berikut cara - cara yang biasa saya lakukan supaya bisa membuat Contact Form Ala Seocips
5. Hapus dan sisakan seperti dibawah ini
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'>
Bagian yang di hapus
</b:includable>
</b:widget> </b:section>
6. Kalau sudah simpan saja.
7. Membuat halaman statis di laman. Buat saja dengan judul Formulir kontak isinya silahkan copas kode - kode di bawah ini.
<div class='seocips-contact-form'> <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/AVvXsEhAcCdBG3EuS8TF1VawL3CBtCUoqSG1uQwLm23ZC4FPWcO3zK6r9w2miTSgkrvTGW1kIOJJGncCvXsA7NvEGt9Ozc7ZFYgUFZ6_fPq6WvQT1jtTzcXhtVCpzME0OB2g2wxSzFU_HGX4xJU/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/AVvXsEghEnQlrxV1RBCFl48Flbl9AHLLYBkuUL8qH1wRmkYS3rg537S49oKbxGIA0Sz-7QbUENNDbLvlCWJAvXNun1gJddNY_i9NPMO2LqxgbZQTV_pfv9iLKJCLfFcloTceA52SLidEoOM1Fsc/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/AVvXsEhAcCdBG3EuS8TF1VawL3CBtCUoqSG1uQwLm23ZC4FPWcO3zK6r9w2miTSgkrvTGW1kIOJJGncCvXsA7NvEGt9Ozc7ZFYgUFZ6_fPq6WvQT1jtTzcXhtVCpzME0OB2g2wxSzFU_HGX4xJU/s320/name.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; } </style>
8. Simpan saja
9. Selesai
Ini contoh jadinya silahkan cek saya DEMO
Nah seperti itulah Cara Mudah Membuat Contact Form Ala Seocips, semoga bermanfaat.
Sumber :
http://www.seocips.com/2014/03/cara-membuat-contact-form-sederhana-di.html
Berikut cara - cara yang biasa saya lakukan supaya bisa membuat Contact Form Ala Seocips
 |
| Tampilan Formulir Keren buatan Seocips |
Cara Mudah Membuat Contact Form Ala Seocips
Jangan lupa sebelum melakukan ini simpan dulu templete anda. ( Cara termudah adalah masuk ke tempelet - edit HTML - Crtl A - Crtl C - Buka notepad - Ctrl V- Save.)
1. Buat formulir kontak pada templete. Terserah dimana saja tapi cari tempat yang sekiranya tidak mengganggu saja.
Contoh yangs aya buat Masuk dulu ke Tata Letak - Tambahkan Gedget - Gedget Lainnya- Formulir Kontak.
2. Kemudian klik save
3. Kemudian masuk ke templete - edit HTML
4. Setelah masuk ke Edit HTML Ikuti gambar di bawah ini
3. Kemudian masuk ke templete - edit HTML
4. Setelah masuk ke Edit HTML Ikuti gambar di bawah ini
5. Hapus dan sisakan seperti dibawah ini
<b:includable id='main'>
Bagian yang di hapus
</b:includable>
</b:widget> </b:section>
6. Kalau sudah simpan saja.
7. Membuat halaman statis di laman. Buat saja dengan judul Formulir kontak isinya silahkan copas kode - kode di bawah ini.
<div class='seocips-contact-form'> <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/AVvXsEhAcCdBG3EuS8TF1VawL3CBtCUoqSG1uQwLm23ZC4FPWcO3zK6r9w2miTSgkrvTGW1kIOJJGncCvXsA7NvEGt9Ozc7ZFYgUFZ6_fPq6WvQT1jtTzcXhtVCpzME0OB2g2wxSzFU_HGX4xJU/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/AVvXsEghEnQlrxV1RBCFl48Flbl9AHLLYBkuUL8qH1wRmkYS3rg537S49oKbxGIA0Sz-7QbUENNDbLvlCWJAvXNun1gJddNY_i9NPMO2LqxgbZQTV_pfv9iLKJCLfFcloTceA52SLidEoOM1Fsc/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/AVvXsEhAcCdBG3EuS8TF1VawL3CBtCUoqSG1uQwLm23ZC4FPWcO3zK6r9w2miTSgkrvTGW1kIOJJGncCvXsA7NvEGt9Ozc7ZFYgUFZ6_fPq6WvQT1jtTzcXhtVCpzME0OB2g2wxSzFU_HGX4xJU/s320/name.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; } </style>
8. Simpan saja
9. Selesai
Ini contoh jadinya silahkan cek saya DEMO
Nah seperti itulah Cara Mudah Membuat Contact Form Ala Seocips, semoga bermanfaat.
Sumber :
http://www.seocips.com/2014/03/cara-membuat-contact-form-sederhana-di.html
Posting Komentar untuk "Cara Mudah Membuat Contact Form Ala Seocips"