Customized Contact Me Form

Assalamu'alaikum,

Kepada bloggers sekalian! Yang berpangkat mahupun yang marhaen. Meh sini aku nak marapik sebab tak bulih tidur~~ Cer korang click sini. Ha, style tak contact us form nih? Bukan style je, benda ni sangat berguna untuk bloggers macam korang yang power-power tu, macam aku tak sangat, poyo je lebih. Actually, tak semua benda readers rasa sesuai untuk post kat comment box kan? So, tu yang penting ada benda nih kat blog korang.

Meh aku nak ngajar canne nak buat this customised "Contact Us" form menggunakan gadget standard yang memang dah disediakan oleh pihak Blogger.

Fisrtly, Jom kita belajar acaner nak tambah benda alah ni. Kepada yang biasa dah tu senang je, just another basic info khususnya untuk blogger baru. Mula-mula, korang log in Blogger macam biasa. Lepas tu, korang boleh lah tekan Layout dekat intended blog korang macam ni :

Klik 'layout'

Dah klik, korang klik je mana-mana tempat untuk tambah gadget baru dan save!.

Okay, sekarang, mari kita belajar pulak macam mana nak sembunyikan gadget tu dan letak ke PAGES yang kosong. Kita start dengan sembunyikan gadget dulu okay? (Actually, di antara dua step ni boleh je nak buat yang mana dulu, but make sure korang preview dulu template sebelum publish! takot rosak template korang yang kiut miut tu, pak cik tak bertanggung jawab taw!).

Untuk itu, korang mestilah pergi ke Template, kat bawah Layout seperti dalam gambar di atas dan klik kat dalam kotak Edit Widget. Korang kena tekan CTRL+Shift+F dan cari ContactForm1. Seterusnya korang delete code berwarna hijau seperti kat bawah ni.

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>

Korang boleh lah preview dan save. So, macam mana pulak nak letak gadget yang dah "hilang" tu ke page baru?. First, buat PAGE baru (pastikan tekan blank page), dan tekan HTML

Tekan HTML

Kepada mereka yang dah berjaya tekan button tu, boleh la terus ke pelajaran seterusnya. Kepada yang tak berjaya tekan, sila tukar mouse anda kerana berkemungkinan besar mouse anda yang rosak. Pelajaran seterusnya, korang copy code di bawah dan paste kat page baru korang tu:

  <div class='widget ContactForm' id='ContactForm1'>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>Name<p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>E-mail *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Message *</p>
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
        <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>
      </form>
    </div>
  </div>
</div>

Kan dah kuar form macam kat bawah ni kan?

Standard blogger contact form

 So, camne nak kasi comel seperti di bawah?

Customised a.k.a. comel-ised contact form

Korang pergi ke TEMPLATE > EDIT HTML balik, tekan CTRL+SHIFT+F balik dan search  ]]></b:skin>. Pastu korang copy code di bawah dan paste betul-betul kat atas code  ]]></b:skin> tadi:

 /* Contact Form Container */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}

/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}

/* Submit button style */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}

/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}

Tekan preview kalau tak yakin dan save! So, korang boleh tengok real demo yang aku dah buat. Tapi tolong jangan test banyak sangat sebab ni real page or korang akan di starlite bertali arus. Mahu?

 kA: Kalau ada kemusykilan, boleh lah comment kat bawah ni. InsyaAllah kalau ada masa dan aku akan cuba adakan masa untuk menjawab soklan korang. pastu aku nak credit info kat google la kot sebab aku campur-campur info dari banyak site. Boleh kan? Selamat bereksperimen! :)