Myjayvyn.com

Cara Membuat Landing Page: Submit Form Model 3

3  |  682 Views

Nah yang ini lebih tepat dikatakan sebagai Prospek Form, mungkin ini yang ditunggu tunggu para member d’BCN, pastinya materi ini sangat anda butuhkan untuk melengkapi tampilan landing page anda. Kalau anda bukan member d’BCN silakan lewat materi ini, sebaiknya anda tidak perlu tahu apa itu d’BCN dan jangan klik link d’BCN ini, takutnya anda malah tertarik.

Materi ini agak sedikit njelimet, tapi akan saya coba jabarkan sehingga anda hanya tinggal melakuka copas.. copas dan copas 🙂

Pertama kondisikan isi dari file index.html anda seperti dibawah ini:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
      <link rel="stylesheet" type="text/css" href="style.css">
      <TITLE>Belajar Bikin LP</TITLE>
   </HEAD>
   <BODY>
      <div id="main">
           <div id="header">
           </div>
                <div id="content">
<p>Bila kuingat lelah ayah bunda, Bunda piara piara akan daku sehingga aku besarlah
Waktuku kecil hidupku amatlah senang senang dipangku dipangku dipeluknya serta dicium dicium dimanjakan <a href="http://jayvyn-host.com" target="_blank">namanya kesayangan</a></p>

<img src="images/gambar1.jpg">

<p>Kasih ibu, kepada beta tak terhingga sepanjang masa
Hanya memberi, tak harap kembali, Bagai sang surya, menyinari dunia.</p>

<img src="images/gambar2.jpg"> <a href="http://www.dbc-network.com/?act=daftar&id=jayvyn270204" target="_blank"><img src="images/gambar3.jpg"></a>

<p>Jika ku sudah besar nanti Ku pergi dengan ibu Ibu boleh pilih sendiri Kemana yang dituju
Ibu bisa pilih Jogya, Bandung atau Semarang Aku yang beli karcisnya Karcis Kapal Terbang</p>  

                </div>

      </div>
   </BODY>
</HTML>

Berikutnya copas script ini ke dalam file index.html tepat diantara tulisan kapal terbang</p> dan sebelum </div>

            <div id="dbcnformprospek2">

                PASTE DISINI

                <p>Isi Formulir di Bawah Ini Sekarang Juga!</p>
                <div id="dbcnbox2">
                <div id="dbcninput2"><input name="name" type="text" style="font-family: Arial,Verdana,Tahoma; font-size: 14px; color: rgb(0, 0, 0); font-weight: normal; height: 21px; width:175px; background-color: rgb(248, 248, 248);" value="Nama" onFocus="this.value= (this.value=='Nama') ? '' : this.value" onBlur="this.value= (this.value=='') ? 'Nama' : this.value" ></div>
                <div id="dbcninput2"><input name="email" type="text" style="font-family: Arial,Verdana,Tahoma; font-size: 14px; color: rgb(0, 0, 0); font-weight: normal; height: 21px; width:175px; background-color: rgb(248, 248, 248);" value="Email" onFocus="this.value= (this.value=='Email') ? '' : this.value" onBlur="this.value= (this.value=='') ? 'Email' : this.value"></div>
                <div id="dbcninput2"><input name="custom telp"   type="text" style="font-family: Arial,Verdana,Tahoma; font-size: 14px; color: rgb(0, 0, 0); font-weight: normal; height: 21px; width:175px; background-color: rgb(248, 248, 248);" value="Telepon" onFocus="this.value= (this.value=='Telepon') ? '' : this.value" onBlur="this.value= (this.value=='') ? 'Telepon' : this.value"></div>
                <div id="dbcnlabel2">Dari mana anda mendengar tentang website ini?</div>
                <div id="dbcninput2"><input name='custom ref'  type='text' style='font-family: Arial,Verdana,Tahoma; font-size: 14px; color: rgb(0, 0, 0); font-weight: normal; height: 21px; width:175px; background-color: rgb(248, 248, 248);'></div>
                <div id="dbcnsubmit2"><input  Name='Submit' class='tombol22' Value='Kirim' type=submit  /></div>
                <div id="dbcnlabel2">Kami menjaga kerahasiaan data anda<br>*for non Oriflame members only<br>©copyright d&#39BCN</div>
            </div>
        </form>

Hasilnya tampak seperti contoh gambar dibawah ini

wpb259

Save/simpan file index.html tersebut.

Beralih ke file style.css, silakan copas script ini ke dalam file style.css diposisi terbawah setelah tanda }

#dbcnformprospek2 {

text-align:center;
color: #000000;
margin-left: auto;
margin-right: auto;
}
#dbcnformprospek2 p{
text-align:center;

}
#dbcnbox2 {
color: #000000;
border: 2px #50AC27 solid;
margin:10px;
padding: 20px 10px 20px 10px;
background-color: #FFFFFF;
width: 195px;
text-align:center;
margin-left: auto;
margin-right: auto;
}

#dbcnlabel2 {
color: #000000;
margin-bottom:3px;
margin-top:5px;
font-size: 9px;
text-align: center;
}

#dbcninput2 {
text-align:center;
margin-bottom:5px;
}

#dbcnsubmit2{
	text-align:center;

}

input.tombol22 {
	BORDER-RIGHT: #9a9a9a 2px solid; 
  BORDER-TOP: #ebeaea 2px solid; margin-bottom: 2px; margin-top: 5px; 
  FONT-WEIGHT: bold; 
  FONT-SIZE: 15px; 
  BORDER-LEFT: #ebeaea 2px solid; 
  WIDTH: 160px; 
  height: 30px;
  COLOR: #FFFFFF; 
  BORDER-BOTTOM: #9a9a9a 2px solid; 
  FONT-FAMILY: Arial, verdana, Helvetica, Geneva, Swiss, SunSans-Regular; 
  BACKGROUND-COLOR: #616161;
  margin-bottom:15px;
  text-align:center;
}

Kemudian save/simpan file style.css tersebut.

Sip, sekarang coba lihat tampilan webnya, sudah munculkah prospek form didalamnya?

wpb260

Horeee berhasiiiilll…

Namun itu belum selesai, karena prospek form ini langsung terhubung ke web replika maka kita memerlukan script tambahan agar ketika pengunjung mengisi form tersebut datanya masuk ke user id dbc kita.

Caranya lumayan ribet juga, follow saja step-step berikut

Buka web replika atau salah satu LP d’BCN anda. Jika halaman sudah terbuka, klik kanan mouse anda ditempat yang kosong dari halaman tersebut.

  1. Jika anda pengguna browser Mozilla Firefox pilih View Page Source
    Jika anda pengguna browser Internet Explorer pilih View Source
    Jika anda pengguna browser Google Chrome pilih View Page Source
    Jika anda pengguna browser Opera pilih View Page Source
  2. Carilah script seperti dicontohkan pada gambar dibawah ini:
    wpb205a
  3. Copy semua script tersebut.

Selanjutnya kita beralih membuka script file index.html

  1. Carilah tulisan PASTE DISINI pada file index.html tersebut seperti terlihat pada gambar dibawah ini
    wpb2591
  2. Paste script yang tadi anda copy dari web replika ke lokasi yang ada tulisan PASTE DISINI.
  3. Jangan lupa untuk menghapus tulisan PASTE DISINI.
  4. Save/simpan file index.html

Selesai! Lakukan pengetesan untuk mengetahui apakah prospek form tersebut telah berfungsi dengan benar.

Selamat mencoba! 🙂

Author: Agie

Semoga bermanfaat 🙂

More Posts - Website

Follow Me:
TwitterFacebookPinterestGoogle Plus

3 Comments

So, what do you think ?