Cara Mudah Membuat Contact Form Ala Seocips

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

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



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 == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' /> <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 == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/> <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 == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}' onfocus='if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}'></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"