Memasang Formulir Kontak Pada Halaman Statis

11/09/2014
Memasang Formulir Kontak Pada Halaman Statis

Memasang Formulir Kontak Pada Halaman Statis - Ok langsung saja disini saya tidak akan membahas mengenai fungsi dan kenapa widget formulir kontak mempunyai peran yang penting pada sebuah blog tapi disini saya akan berbagi tips tentang cara memasang formulir kontak pada halaman statis blogger, silahkan disimak.

Terlebih dahulu Anda sudah memasukan widget formulir kontak ini pada blog.


Formulir Kontak

Dan sebelumnya Anda sudah memasang font awesome pada template, jika belum silahkan tambahkan link dibawah ini sebelum </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Selanjutnya silahkan buka Template > Edit Template > terapkan kode di bawah ini sebelum  </style> atau ]]></b:skin>

#ContactForm1 {
    display: none;
}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
    width: 300px;
    height: auto;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-email-message {
    width: 450px;
    height: 175px;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    font-family: 'Roboto',sans-serif;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
    background: #fff;
    outline: none;
    border: 1px dashed #f8a82a;
}

#ContactForm1_contact-form-submit {
    font-family: 'Roboto';
    font-size: 15px;
    width: 101px;
    height: 35px;
    float: left;
    color: #fff;
    padding: 0;
    margin: 10px 0 3px 0;
    cursor: pointer;
    background: #aaa;
    border: none;
    border-radius: 2px;
    transition: background 0.4s linear;
}

#ContactForm1_contact-form-submit:hover {
    background: #f8a82a;
}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {
    width: 450px;
    margin-top: 35px;
}

Simpan template.

Agar tampilannya rapi, sebaiknya gunakan  Tekan "Enter" untuk baris baru  pada menu "Pilihan" seperti gambar di bawah ini


Kemudian buat halaman statis baru dan terapkan kode di bawah ini pada tab  HTML

<form name="contact-form">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i> Nama</span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope"></i> Alamat Email <span style="color: red; font-weight: bolder;">*</span></span> 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil"></i> Isi Pesan <span style="color: red; font-weight: bolder;">*</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />  
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

Publikasikan dan lihat hasilnya.


Untuk font yang digunakan dan lainnya silahkan sesuaikan kembali dengan template Anda.


Referensi : http://blog.kangismet.net/2013/05/memasang-widget-contact-form-blogger-pada-halaman-statis.html

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

17 comments

Pertamax nih, keren :)

Balas

mbak,kode css nya di taruh di mana?,maaf saya masih newbie :-d

Balas

oia sudah saya tambahkan, silahkan lihat kembali artikelnya

Balas

makasih mbak,akhirnya dibuatkan juga

Balas

ini yang ane Request ya, wah mantab nih udah di Publish makasih. :) :lv You

Balas

iya mas, menjawab request

Balas

hehe... silahkan dicoba

Balas

mbak, kok isi form kontak saya, isi pesannya kok di bagian tengah, gak sejajar sma nama dan email

Balas

Silakan baca kembali, mungkin ada yang terlewat

Balas

nazayka com : Pada template blogger saya isi pesan berada di tengah .
sekedar saran , untuk membuat isi pesan menjadi sejajar dengan text form yang lain .
edit css : #ContactForm1_contact-form-email-message
pada bagian margin menjadi :
margin: 10px,auto,0; sudah saya coba dan berhasil .
semoga membantu .bebagi itu indah .
dan terimakasih dan sukses selalu untuk Arlina Fitriyani .

Balas

Keren banget sih kamu mbak wkwk, jago nih :)

Balas

udah jadi mba, tapi not working..

Balas

Can i get this Steps in English Please??

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.