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 

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 BloggerSobat

2. Jika sudah di DashboardPergi 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP3pS0xuXHd78s-obv8SDG7x9bq0RjgJeSOK8_fFAXEE7vszStkK6VRkoPysll48P4JYE-q5V8PT9OpkXTpjYA0q1hEgFpabOICKubLS1jeLFX3sAcI-wxA3CHxoslLqw2N2lD0Lg4WJhQ/s0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP3pS0xuXHd78s-obv8SDG7x9bq0RjgJeSOK8_fFAXEE7vszStkK6VRkoPysll48P4JYE-q5V8PT9OpkXTpjYA0q1hEgFpabOICKubLS1jeLFX3sAcI-wxA3CHxoslLqw2N2lD0Lg4WJhQ/s0/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/AVvXsEinZyPxhoCjYSC7u5GYGvCYV5EHY7SdYN5fq6O-QIWH9vnvAD8JB5lXG8-G-CihyphenhyphenS_Kj2zQqrJQ-SLuDpGB5tYLp9vQqE_JcteHxUZyfoY49pEa55ZYnTFhMUWLHD30vK0uPRtKJdCG_imM/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/AVvXsEinZyPxhoCjYSC7u5GYGvCYV5EHY7SdYN5fq6O-QIWH9vnvAD8JB5lXG8-G-CihyphenhyphenS_Kj2zQqrJQ-SLuDpGB5tYLp9vQqE_JcteHxUZyfoY49pEa55ZYnTFhMUWLHD30vK0uPRtKJdCG_imM/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 >

2.Lalu login ke akun EmailMeFormyang sudah Sobat buat .

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

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

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.

5. Klik "Save", lalu pilih opsi ketiga

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

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

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.....

Related Posts