Pular para o conteúdo principal

Cara Membuat Contact Form di Blog dengan Mudah

Cara Membuat Contact Form di Blog dengan Mudah
Contact Form Bloge Keren - Kontak atau biasa disebut Contact form merupakan salah satu informasi terkait keberadaan admin sebuah blog atau situs. Kontak ini dibuat dengan berbagai tujuan. Diantaranya adalah ingin membentuk sebuah kelompok forum diskusi, misalkan saja Forum Blogger Indonesia.

Forum disukusi ini nantinya akan dapat digunakan bagi setiap blogger untuk bisa berpartisipasi dalam setiap update artikel tertentu. Wujud partisipasinya secara personal (secara langsung) akan masuk pada email admin blog tersebut.
Misalkan saja sobat ingin melakukan konsultasi masalah blogger kepada kami, bisa saja langsung menghubungi contct kami. Silakan masukkan nama, alamat email, dan masukkan pesan sobat di situ. Setelahnya bisa langsung mengisi cheklist i'm not a robot dan send message.
Dengan begitu, suasana kedekatan antara admin dengan pembaca menjadi lebih harmonis, hehe. Tidak usah berlama-lama, silakan tengok saja model keren lain dari contact form berikut ini:


Ingin tahu cara pembuatannya? Silakan lakukan langkah-langkah di bawah ini:
1. Masuk akun blogger > pilih tata letak (layout)
2. Tambahkan gadget > Gadget lainnya > Formulir Kontak (contact Form) > save
3. Pilih template > mode HTML
4. Cari kode di bawah ini:
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
5. Perhatikan format kode widget kontak yang berhasil dibuat tadi seperti di bawah ini:
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'>
Hapus bagian ini
</b:includable>
</b:widget>
</b:section>
6. Save template
7. Silakan buka laman > buat laman baru > pilih HTML jangan Compose
8. Copy paste kode di bawah ini pada bagian HTML halaman baru tersebut
<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/AVvXsEiefhNz_PCt30TF3ccceWo7mu0SaoVM_O07oVPJ2z-Nz3AnTmPCJPWCbhb9okzvG9xZa3QPLBnGlqm_ke6vCp4wAPkUbtlcQpmChqrj9HYcERXRRSAidNYI7HRGYmQxP_yh4LterLIIZKs/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/AVvXsEj8kOWcVTFxlCFrqfCO6N41S43lQQh7tXWaWS3RUym-RO9JQL4vWqHekVL7tgypOBaX5KCg8zIoqKO4YKmFPJcvtnMTSxG91TvrR3gqGGCYj1ApejEeiOf3-CV2EVkm-KzENINx2BnepVE/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/AVvXsEiefhNz_PCt30TF3ccceWo7mu0SaoVM_O07oVPJ2z-Nz3AnTmPCJPWCbhb9okzvG9xZa3QPLBnGlqm_ke6vCp4wAPkUbtlcQpmChqrj9HYcERXRRSAidNYI7HRGYmQxP_yh4LterLIIZKs/s320/name.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }
</style>
9. Publikasikan
10. Selesai > cek kontak yang telah dibuat > buka email

Note: jangan melakukan copas kode pada langkah ke-8 dalam keadaan mode Compose laman baru tadi. Jika dicopas dalam mode compose, maka hasilnya kemungkinan akan berantakan.

Demikian bahasan tentang Cara Membuat Contact Form di Blog dengan Mudah. Semoga bermanfaat, salam blogger.
(http://www.forumblogindo.com).*

Marcadores

Marcadores:

Comentários

Postar um comentário

Postagens mais visitadas deste blog

9 Blog Berpenghasilan Tertinggi di Indonesia dari Google Adsense

techzend.com Sobat blogger. Kemarin telah kita ketahui bahwa pendapatan para blogger di Indonesia tahun 2015 ini memang tidak bisa dianggap remeh. Karenanya mereka menjadikan blog sebagai rutinitas pekerjaan sehari-hari.  Bisa dibayangkan, hanya cukup duduk manis, ambil poisi paling enak, serta berhadapan dengan sebuah laptop/ PC disandingkan dengan segelas kopi hangat, kita bisa mendapatkan penghasilan yang insyallloh halal thoyyiban.  Kali ini akan kita lanjutkan bahasan tentang info 9 blog berpenghasilan tertinggi di Indonesia dari Google Adsen s e . Kenapa saya ulas hanya pada fokus yang berpenghasilan dari Google Adsence? Ya karena memang rata-rata para blogger menggunakan GA sebagai pemasukankan utama mereka. Seperti halnya kita tahu, ada juga yang mendapatkan penghasilan blog dari pemasangan iklan dan affiliasi . Blog Berpenghasilan Terbesar di Indonesia Data yang saya sampaikan kali ini, hanya berdasarkan hasil survei serta ulasan dari beberapa sumber lain. Setelah mel...
42 comentários
Leia mais

28 Senjata Ngeblog Wajib para Blogger

Sobat. Pada kesempatan ini akan Ane berikan "senjata pamungkas" ketika bergelut dalam dunia blog, baik blogspot maupun wordpress . Senjata ngeblog ini berupa "tools" maupun "software" yang pasti bermanfaat dan bisa membantu Sobat dalam mengembangkan dan membangun sebuah blog yang berkualitas .  Tidak hanya berkualitas dari sisi desain, namun juga berkualitas dari sisi isi konten. 28 senjata ngeblog terbaik ini sangat muda digunakan. Tidak terlalu bertele-tele dan membingungkan, namun di dalamnye termuat cara yang simpel dan sangat memerikan manfa'at yang luar biasa. Tools ini tidak sekedar saya saja yang menggunakan, namun juga para blogger terkenal lokal maupun manca negara. Senjata Ngeblog Terbaik dan Terpopuler para Blogger Sesuai dengan judul topik bahasan kali ini, maka manfaat dari penggunakan tools di bawah ini untuk membuat sebuah situs, website atau blog yang memang berkualitas. Tidak sekedar blog "asal-asalan". Masih teringat buk...
6 comentários
Leia mais

Bahaya Copy Paste Artikel pada Blog serta Solusinya

Etika Komunikasi Publik Sobat. Pagi ini iseng-iseng Saya mencoba melakukan risearch salah satu artikel bulan kemaren diterbitkan. Judul artikel tersebut yakni 9 blog berpenghasilan tertinggi di Indonesia dari Google Adsense.  Ketika muncul di halaman pertama Google, saya coba untuk menelusuri salah satu artikel dari salah satu situs.  Keingintahuan saya itu muncul manakala judul dari artikel yang dipublish di situs tersebut "sama persis" dengan artikel yang saya terbitkan. Saking penasarannya, kemudian saya buka hyperlink dari url situs tersebut. Anehnya, ketika terbuka secara utuh, saya heran, kaget dan tersenyum sipu. Alasanya kenapa? Karena artikel  9 blog berpenghasilan tertinggi di Indonesia dari Google Adsense  ini telah di copas alias copy paste di situs yang saya buka tersebut. Postingan tersebut tidak tergolong dalam istilah rewrite atau tulis ulang, melainkan copy paste secara utuh terhadap seuruh isi artikel yang saya tulis. Tidak nyaris 90 %, namun 100% c...
15 comentários
Leia mais