MODULE 2: WEB DESIGN 

Melalui Module ini anda akan belajar cara-cara untuk merekabentuk (design) website anda menggunakan plugin “Divi Builder” serta cara-cara menggunakan contact form (contact form 7) untuk membuat borang hubungi kami & borang tempahan.

2.0.1 Web Design

  1. Membina header di dalam minisite.
  2. Memasang button “call to action”.
  3. Memasukkan element text & gambar.
  4. Menetapkan setting layout & margin.

1. Divi Builder Preview & Tour 

2. Cara-Cara Design Website Menggunakan Divi Builder

2.1.1 Contact Form 7 – “Borang Tempahan & Borang Hubungi Kami”

  1. Memasang dan mengaktifkan plugin “Contact Form 7”
  2. Memasukkan field-field penting seperti nama, no dan email.
  3. Menetapkan setting email notifikasi untuk borang tempahan

Cara-Cara Menggunakan Contact Form 7

Note: menggunakan plugin “Contact Form 7” memerlukan sedikit knowledge tentang coding (coding di sediakan dibahagian bawah).

Jika anda tidak berminat menggunakan plugin ini, anda boleh menggunakan contact form module dari Divi.


CODE UNTUK CONTACT FORM 7

#responsive-form{
max-width:750px /*-- change this to get your desired form width --*/;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-one-fourth, .column-half, .column-three-fourth, .column-full{
float: left;
position: relative;
padding: 0.50rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after {
content: "";
display: table;
clear: both;
}

/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) {
.column-one-fourth{
width: 25%;
}
}

@media only screen and (min-width: 48em) {
.column-half{
width: 50%;
}
}

@media only screen and (min-width: 48em) {
.column-three-fourth{
width: 75%;
}
}

.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
background: #ffffff;
font-size: 15px;
color: #595959;
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}

.wpcf7 label{
font-size: 15px;
color: #2d2d2d;

}

::placeholder {
color: #595959;
}

.wpcf7 input[type="text"]:focus{
background: #ffffff;
}
.wpcf7-submit{
float: inherit;
background: #595959;
color: #ffffff;
text-transform: capitalize;
font-size: 16px;
border: 10px;
padding: 15px 30px;
cursor: pointer;
}
.wpcf7-submit:hover{
background: #595959;
}
span.wpcf7-not-valid-tip{
text-shadow: none;
font-size: 20px;
color: #ffecd6;
background: #ff0000;
padding: 5px;
}
div.wpcf7-validation-errors {
text-shadow: none;
border: transparent;
background: #f9cd00;
padding: 5px;
color: #9C6533;
text-align: center;
margin: 0;
font-size: 12px;
}
div.wpcf7-mail-sent-ok{
text-align: center;
text-shadow: none;
padding: 5px;
font-size: 12px;
background: #59a80f;
border-color: #59a80f;
color: #fff;
margin: 0;
}
Footnote (jangan copy paste bahagian ini, ini adalah nota sahaja)
-Anda boleh ubah nilai-nilai di bawah mengikut kesesuaian website anda
color: #595959; (boleh google)
width: 100%;
padding: 8px;
font-size: 15px;
background: #ffffff;
<div id="responsive-form" class="clearfix">
&nbsp

<div class="form-row">
<div class="column-full"><label>1. Nama [text* your-name placehorder ""]</label></div>
</div>
&nbsp

<div class="form-row">
<div class="column-half"><label>2. Phone. No [text* your-phone placehorder ""]</label></div>

<div class="form-row">
<div class="column-half"><label>3. Email [email* your-email placehorder ""]</label></div>
</div>
&nbsp

<div class="form-row">
<div class="column-full"><label>4. Alamat [textarea* your-address placeholder ""]</label></div>
</div>
&nbsp

<div class="form-row">
<div class="column-full"><label>5. Bilangan Produk Yang Ingin Anda Beli [text* bil-produk placehorder ""]</label></div>
</div>
&nbsp

<div class="form-row">
<label> &#160 6. Pilih Akaun Bank Yang Anda Buat Pembayaran
<div class="column-full"> [select* menu-924 "1 - Maybank (XXXXXX)" "2 - Cimb (XXXXXXX)"]</label></div></div>
&nbsp

<div class="form-row">
<label> &#160 7. Upload Resit
<div class="column-full"> [file* file-886 filetypes:png|jpg|pdf|jpeg]
</label></div>
</div>
&nbsp

<div class="form-row">
<div class="column-full"><label>8. Customer Note [textarea your-message placeholder ""]</label></div>
</div>

<div class="form-row">
<div class="column-full">[submit "Submit"]</div>
</div>

</div><!--end responsive-form-->