Iklan

Cara Mudah Membuat CONTACT FORM di BLOG Dengan EMAILMEFORM

Sekarang saya akan membahas bagaimana cara membuat kontak form untuk blogspot dengan tampilan yang seper keren 

Cara Mudah Membuat CONTACT FORM di BLOG Dengan EMAILMEFORM

Jika Sobat tertarik untuk memasangnya di Blog Sobat  silahkan ikuti  langkah-langkah dibawah ini :

KUSTOMISASI DI BLOGSPOT

Saya menggunakan CSS untuk memperkeren Kontak Form ini, caranya :

1. Login ke Blogger Sobat
2. Jika sudah di Dashboard Pergi Ke Rancangan » Edit HTML
3. Masukkan kode css berikut di atas kode ]]></b:skin> :

/*BloggingPasuruan Kontak Form*/
.kontak form { padding:0;}
.kontak input{width: 290px;padding:5px; margin:0 5px 10px 0;background:#eee url(http://2.bp.blogspot.com/-CpZl45lXYXI/TjydsGrs9PI/AAAAAAAAAh8/I_2HVt_S3XU/s000/random.png) top left repeat-y;border-left:1px solid #dddbd4;border-top:1px solid #dddbd4;border-right:1px solid #f5f5f1;border-bottom:1px solid #f5f5f1;}
.kontak input:hover { background: #fff; }
.kontak textarea{width: 600px;padding:5px; margin:0 5px 10px 0;background:#eee url(http://2.bp.blogspot.com/-CpZl45lXYXI/TjydsGrs9PI/AAAAAAAAAh8/I_2HVt_S3XU/s000/random.png) top left repeat-y;border-left:1px solid #dddbd4;border-top:1px solid #dddbd4;border-right:1px solid #f5f5f1;border-bottom:1px solid #f5f5f1;}
.kontak textarea:hover { background: #fff; }
.kontak input#cancel { width:70px;margin-top:10px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfSTThAnrHwl7s1znhrmSip7sEvlVN29sx2h45fPfECihRZkcuFOjDyHyXZsZfd30FdHfiD0CJaVVeNJV8Gq1arPsPQfptHNpZcGK9oVj9VwAcGFtHRcB-ZponKsx-7XDsnHjavWe7vsvl/s1600/background.png) top left repeat-x;color:#ffffff;padding-bottom: 3px;border:1px solid #94c1cd;}
.kontak input#submit { width:100px;margin-top:10px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfSTThAnrHwl7s1znhrmSip7sEvlVN29sx2h45fPfECihRZkcuFOjDyHyXZsZfd30FdHfiD0CJaVVeNJV8Gq1arPsPQfptHNpZcGK9oVj9VwAcGFtHRcB-ZponKsx-7XDsnHjavWe7vsvl/s1600/background.png) top left repeat-x;color:#ffffff;padding-bottom: 3px;border:1px solid #94c1cd;}

4. Selesai dan simpan template anda.

PEMBUATAN KONTAK FORM EMAIL

Untuk membuat kontak form disini, saya menggunakan fasilitas gratis dari emailmeform.com, jika anda belum terdaftar disana, silahkan daftar terlebih dahulu, jika sudah, silahkan ikuti langkah-langkah berikut ini :

1.Masuk ke EmailMeForm untuk mendaftar < klik signup free >


Cara Mudah Membuat CONTACT FORM di BLOG Dengan EMAILMEFORM
2.Lalu login ke akun EmailMeForm yang sudah Sobat buat .

3. Klik tombol "Add Form" pada pojok kanan atas, setelah tombol Pop Up muncul klik pada opsi pertama.

Cara Mudah Membuat CONTACT FORM di BLOG Dengan EMAILMEFORM

4. Pilih Form » Contact Form, lalu klik tombol "Customize"

Cara Mudah Membuat CONTACT FORM di BLOG Dengan EMAILMEFORM

5. Edit Kontak Form sesuai dengan selera anda. lalu tekan tombol "Save Form" sehingga muncul Pop Up lalu pilih opsi kedua untuk mengedit email penerima dari kontak form anda ini.

Cara Mudah Membuat CONTACT FORM di BLOG Dengan EMAILMEFORM

Cara Mudah Membuat CONTACT FORM di BLOG Dengan EMAILMEFORM

5. Klik "Save", lalu pilih opsi ketiga

Cara Mudah Membuat CONTACT FORM di BLOG Dengan EMAILMEFORM

6. Klik pada pilihan "code" untuk mendapatkan kode html kontak form anda.

alt=

7. Ambil kode paling bawah "HTML ONLY", copy lalu paste di notepad.

Cara Mudah Membuat CONTACT FORM di BLOG Dengan EMAILMEFORM

8. Buka notepad tempat kode diatas anda letakkan, lalu cari kode [Gunakan Ctrl + F]

<input value="Send email" type="submit" /><input value="Clear" type="reset" />

Ganti dengan

<input id=”submit” type="submit" value="Send email" /><input id=”cancel” type="reset" value="Clear" />

9. kembali ke halaman blogspot anda, klik menu Posting » Edit Laman » Laman baru kemudian masukkan seluruh kode HTML Kontak Form milik anda yang berada dalam notepad kehalaman baru ini [ jangan paste code menggunakan compose tapi HTML ].

10. Jangan lupa membuat judul Laman/Page baru anda tersebut, misal dengan Contact Me, Hubungi Kami.

Baiklah sobat blogger, cukup sekian dulu tutorial tentang cara membuat Form Kontak Keren ini. Semoga bermanfaat.....

Next
Prev Post
Previous
Next Post

1 comment: